鹰眼图/概述图实现

bPrbRu

本例展示在3D场景中添加一个2D的鹰眼图/概述图。概述图展示当前所在的3D场景。使用watch()来实现2D概览图和3D场景图的同步。具体案例

有关watching属性的更多信息，可以查看Working with properties

具体实现

1. 创建一个DIV，用来展示鹰眼图。

<div id="overviewDiv"><div id="extentDiv"></div></div>

2. 为鹰眼图创建一个Map。
3. 为鹰眼图创建一个MapView

var overviewMap = new Map({
    basemap: "topo"
})

var mapView = new MapView({
    contrain: "overviewDIV",
    map: overviewMap,
    constraints: {
        rotationEnabled: false
    }
})

// 移除默认的MapVIew自带的控件,具体效果可看文末下面
mapView.ui.components = [];

4. 创建一个灰色的矩形用来标示当前的位置，并添加到mapview中。

const extent3Dgraphic = new Graphic({
    geometry: null,
    symbol: {
      type: "simple-fill",
      color: [0, 0, 0, 0.5],
      outline: null
    }
  });
  mapView.graphics.add(extent3Dgraphic);

5. 重点：使用WatchUtils监听MainView的extent属性变化

WatchUtils的用法

watchUtils.init(obj, propertyName, callback)

具体代码

watchUtils.init(mainView, "extent", function(extent) {
// 当3D场景静止的时候，mapView移动到视图的位置
if (mainView.stationary) {
  mapView.goTo({
    center: mainView.center,
    scale:
      mainView.scale *
      2 *
      Math.max(
        mainView.width / mapView.width,
        mainView.height / mapView.height
      )
  });
}

extent3Dgraphic.geometry = extent;
});

其他

mapView.ui.components = []的作用

如图，该语句作用是清空默认的组件

LmJOlG

Scale缩放算式

mainView.scale * 2 *
Math.max(
mainView.width / mapView.width,
mainView.height / mapView.height

mapView.width/height 是指当前显示区域的宽度和高度.

var size = mainView.scale *
Math.max(
mainView.width / mapView.width,
mainView.height / mapView.height

令上面的算式=size，下面两张图是size*1、2的效果。 可见其实size *1的效果已经不错了，但是 *2 效果可以更好。

size * 1

wgFEZq

size * 2

sfffrS

Overview Sample