const mapSplit = {
|
levelArray: [
|
0, 40000000, 20000000, 10000000, 5000000, 2000000, 1000000, 500000,
|
250000, 200000, 100000, 50000, 17000, 9000, 5000, 2000, 1000, 500, 200,
|
100, 50, 25, 10, 0,
|
],
|
isSplitFlag: 0,
|
init() {
|
setTimeout(() => {
|
window.map.updateSize();
|
this.showSplitMap();
|
this.isSplitFlag = 1;
|
this.skdToOl();
|
}, 500)
|
|
|
},
|
skdToOl() {
|
var position = window.Viewer.camera.position
|
|
var ellipsoid = window.Viewer.scene.globe.ellipsoid;
|
var cartographic = ellipsoid.cartesianToCartographic(position)
|
var lat = Cesium.Math.toDegrees(cartographic.latitude)
|
var lng = Cesium.Math.toDegrees(cartographic.longitude)
|
var level = this.getLevel(cartographic.height)
|
console.log(lng, lat, level)
|
window.map.getView().setCenter([parseFloat(lng), parseFloat(lat)])
|
window.map.getView().setZoom(level)
|
},
|
getLevel(height) {
|
var levelArray = this.levelArray;
|
for (var i = 1, len = levelArray.length; i < len - 1; i++) {
|
if (height >= (levelArray[i] + levelArray[i + 1]) / 2) {
|
return i
|
}
|
}
|
return levelArray.length - 1
|
},
|
getHeight(level) {
|
var levelArray = this.levelArray;
|
if (level > 0 && level < 23) {
|
return levelArray[level]
|
}
|
return levelArray[levelArray.length - 1]
|
},
|
showSplitMap() {
|
var that = this;
|
$("#mapView")
|
.off()
|
.on("mousemove", function () {
|
if (that.isSplitFlag == 1) {
|
window.Viewer.camera.changed.addEventListener(that.skdToOl())
|
}
|
})
|
.on("mouseout", function () {
|
if (that.isSplitFlag == 1) {
|
window.Viewer.camera.changed.removeEventListener(that.skdToOl())
|
}
|
});
|
let mapZoomAndMove = function (event) {
|
var position = window.map.getView().getCenter()
|
|
|
var pos = position
|
var level = that.getHeight(parseInt(window.map.getView().getZoom()))
|
|
window.Viewer.camera.setView({
|
destination: Cesium.Cartesian3.fromDegrees(pos[0], pos[1], level),
|
})
|
}
|
$("#mapOl")
|
.off()
|
.on("mousemove", function () {
|
if (that.isSplitFlag == 1) {
|
that.olzoomAndMove(mapZoomAndMove)
|
}
|
})
|
.on("mouseout", function () {
|
if (that.isSplitFlag == 1) {
|
that.clearolzoomAndMove()
|
}
|
})
|
}, clearolzoomAndMove() {
|
let registerOnZoomArr = window.map.get("registerOnZoom")
|
if (registerOnZoomArr && registerOnZoomArr.length > 0) {
|
for (let i = 0; i < registerOnZoomArr.length; i++) {
|
window.map.un("moveend", registerOnZoomArr[i])
|
}
|
}
|
}, olzoomAndMove(eventListen, notListenMove) {
|
// 记录地图缩放，用于判断拖动
|
window.map.lastZoom =
|
window.map.lastZoom || window.map.getView().getZoom()
|
// 地图缩放事件
|
let registerOnZoom = function (e) {
|
// 不监听地图拖动事件
|
if (notListenMove) {
|
if (window.map.lastZoom != window.map.getView().getZoom()) {
|
eventListen && eventListen(e)
|
}
|
} else {
|
eventListen && eventListen(e)
|
}
|
window.map.lastZoom = window.map.getView().getZoom()
|
}
|
// 保存缩放和拖动事件对象，用于后期移除
|
let registerOnZoomArr = map.get("registerOnZoom") || []
|
|
registerOnZoomArr.push(registerOnZoom)
|
|
// 使用地图 set 方法保存事件对象
|
window.map.set("registerOnZoom", registerOnZoomArr)
|
|
// 监听地图移动结束事件
|
window.map.on("moveend", registerOnZoom)
|
|
return eventListen
|
},
|
}
|
export default mapSplit;
|
