(function (window, mars3d) {
|
//创建widget类，需要继承BaseWidget
|
class MyWidget extends mars3d.widget.BaseWidget {
|
//弹窗配置
|
get view() {
|
return {
|
type: "window",
|
url: "view.html",
|
windowOptions: {
|
width: 250,
|
height: 500,
|
},
|
};
|
}
|
create() {
|
var inhtml = `
|
<div id="centerDivEx" style="position:absolute;left:0px;top:0px;border:1px solid #ccc;bottom: 0px;width:50%;overflow: hidden;">
|
<div id="cesiumContainerEx" style="height:100%;width:100%;overflow: hidden;"></div>
|
</div>`;
|
|
$("body").append(inhtml);
|
|
var mapOptions2 = this.map.getOptions();
|
//绑定的控件
|
mapOptions2.control = {
|
baseLayerPicker: true, //basemaps底图切换按钮
|
defaultContextMenu: true, //右键菜单
|
};
|
|
//用于双屏同图层，不同配置展示
|
for (let i = 0, len = mapOptions2.layers.length; i < len; i++) {
|
let item = mapOptions2.layers[i];
|
if (item.compare) {
|
//存在compare属性时
|
for (var key in item.compare) {
|
item[key] = item.compare[key];
|
}
|
}
|
}
|
|
//后置加的图层的处理
|
var mapLayers = this.map.getLayers({
|
filter: true,
|
});
|
for (let i = mapLayers.length - 1; i >= 0; i--) {
|
let layer = mapLayers[i];
|
if (layer.noLayerManage || layer.parent) {
|
continue;
|
}
|
mapOptions2.layers.push(layer.toJSON());
|
}
|
console.log("分屏地图配置", mapOptions2);
|
|
this.mapEx = new mars3d.Map("cesiumContainerEx", mapOptions2);
|
this.mapEx.basemap = "天地图电子";
|
|
this.map.on(mars3d.EventType.morphComplete, (event) => {
|
//切换场景前事件
|
if (this.map.scene.mode === Cesium.SceneMode.SCENE2D) {
|
this.mapEx.scene.screenSpaceCameraController.enableTilt = false;
|
} else {
|
this.mapEx.scene.screenSpaceCameraController.enableTilt = true;
|
}
|
});
|
}
|
//每个窗口创建完成后调用
|
winCreateOK(opt, result) {
|
$("#btn_mapCompare_close").click(() => {
|
this.disableBase();
|
});
|
}
|
//激活插件
|
activate() {
|
$("#centerDiv").css({
|
position: "absolute",
|
height: "100%",
|
width: "50%",
|
top: 0,
|
left: "auto",
|
right: 0,
|
});
|
|
$("#centerDivEx").show();
|
|
this.map.on(mars3d.EventType.cameraChanged, this._map_extentChangeHandler, this);
|
this.map.camera.percentageChanged = 0.01;
|
|
this.mapEx.on(mars3d.EventType.cameraChanged, this._mapEx_extentChangeHandler, this);
|
this.mapEx.camera.percentageChanged = 0.01;
|
|
this._map_extentChangeHandler();
|
}
|
|
//释放插件
|
disable() {
|
this.map.off(mars3d.EventType.cameraChanged, this._map_extentChangeHandler, this);
|
this.mapEx.off(mars3d.EventType.cameraChanged, this._mapEx_extentChangeHandler, this);
|
|
$("#centerDivEx").hide();
|
$("#centerDiv").css({
|
position: "",
|
height: "100%",
|
width: "100%",
|
left: 0,
|
right: "auto",
|
});
|
}
|
_map_extentChangeHandler(e) {
|
if (!this.isActivate) {
|
return;
|
}
|
// console.log('map主地图 视角变化了')
|
this.mapEx.off(mars3d.EventType.cameraChanged, this._mapEx_extentChangeHandler, this);
|
|
this.updateView(this.map, this.mapEx);
|
this.mapEx.on(mars3d.EventType.cameraChanged, this._mapEx_extentChangeHandler, this);
|
}
|
_mapEx_extentChangeHandler(e) {
|
if (!this.isActivate) {
|
return;
|
}
|
// console.log('mapEx对比地图 视角变化了')
|
this.map.off(mars3d.EventType.cameraChanged, this._map_extentChangeHandler, this);
|
|
this.updateView(this.mapEx, this.map);
|
this.map.on(mars3d.EventType.cameraChanged, this._map_extentChangeHandler, this);
|
}
|
//“变化屏”mapChange变化，将“被更新屏”mapUpdate同步更新
|
updateView(mapChange, mapUpdate) {
|
var cameraView = mapChange.getCameraView();
|
mapUpdate.setCameraView(cameraView, { duration: 0 });
|
}
|
|
//图层树相关
|
getLayers() {
|
return this.mapEx.getLayers({
|
basemaps: true, //是否取config.json中的basempas
|
layers: true, //是否取config.json中的layers
|
});
|
}
|
|
//更新图层:显示隐藏状态
|
updateLayerShow(layer, show) {
|
layer.show = show;
|
|
if (show) {
|
if (!layer.isAdded) {
|
this.mapEx.addLayer(layer);
|
}
|
} else {
|
// if (layer.isAdded) {
|
// this.mapEx.removeLayer(layer)
|
// }
|
}
|
}
|
}
|
|
//注册到widget管理器中。
|
mars3d.widget.bindClass(MyWidget);
|
|
//每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。
|
})(window, mars3d);
|
