import * as mars3d from "mars3d"
|
|
let map3d
|
let map2d
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
export function onMounted(mapInstance) {
|
map3d = mapInstance // 记录map
|
map3d.camera.percentageChanged = 0.01
|
|
globalNotify("已知问题提示", `三维事件目前监听不灵敏，视角同步不够平滑。 `)
|
|
creatMap2D()
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
unbind3dEvent()
|
unbind2dEvent()
|
|
map3d = null
|
|
map2d.destroy()
|
map2d = null
|
}
|
|
function creatMap2D() {
|
showLoading()
|
|
const mapDiv = mars3d.DomUtil.create("div", "", document.body)
|
mapDiv.setAttribute("id", "centerDiv2D")
|
|
const map2dDiv = mars3d.DomUtil.create("div", "", mapDiv)
|
map2dDiv.setAttribute("id", "map2d")
|
map2dDiv.setAttribute("class", "mars2d-container")
|
|
const configUrl = "http://mars2d.cn/config/config.json"
|
mars2d.Util.fetchJson({ url: configUrl })
|
.then(function (data) {
|
// 构建地图
|
map2d = new mars2d.Map("map2d", data.mars2d)
|
bind2dEvent(map2d)
|
bind3dEvent()
|
|
_map2d_extentChangeHandler()
|
|
viewTo23D() // 默认
|
|
hideLoading()
|
})
|
.catch(function (error) {
|
hideLoading()
|
|
console.log("构建地图错误", error)
|
globalMsg(error && error.message, "error")
|
})
|
}
|
|
// 二维地图变化事件
|
function bind2dEvent() {
|
map2d.on("drag", _map2d_extentChangeHandler, this)
|
map2d.on("zoomend", _map2d_extentChangeHandler, this)
|
}
|
|
function unbind2dEvent() {
|
map2d.off("drag", _map2d_extentChangeHandler, this)
|
map2d.off("zoomend", _map2d_extentChangeHandler, this)
|
}
|
|
function _map2d_extentChangeHandler(e) {
|
const bounds = map2d.getBounds()
|
const extent = {
|
xmin: bounds.getWest(),
|
xmax: bounds.getEast(),
|
ymin: bounds.getSouth(),
|
ymax: bounds.getNorth()
|
}
|
console.log(`'二维地图变化了，区域： ${JSON.stringify(extent)} `)
|
|
unbind3dEvent()
|
map3d.camera.setView({
|
destination: Cesium.Rectangle.fromDegrees(extent.xmin, extent.ymin, extent.xmax, extent.ymax)
|
})
|
|
bind3dEvent()
|
}
|
|
// 三维地图相机移动结束事件
|
function bind3dEvent() {
|
map3d.on(mars3d.EventType.cameraChanged, camera_moveEndHandler, this)
|
}
|
|
function unbind3dEvent() {
|
map3d.off(mars3d.EventType.cameraChanged, camera_moveEndHandler, this)
|
}
|
|
function camera_moveEndHandler(e) {
|
const point = map3d.getCenter() // 范围对象
|
const level = map3d.level
|
console.log(`'三维地图变化了，位置： ${point.toString()},层级 ${level} `)
|
|
unbind2dEvent()
|
|
map2d.setView([point.lat, point.lng], level, { animate: false })
|
|
bind2dEvent()
|
}
|
|
export function viewTo3d() {
|
const to3dDom = document.getElementById("centerDiv3D")
|
const to2dDom = document.getElementById("centerDiv2D")
|
to2dDom.style.display = "none"
|
to3dDom.style.display = "block"
|
to3dDom.style.left = "0"
|
to3dDom.style.width = "100%"
|
}
|
|
export function viewTo2d() {
|
const to3dDom = document.getElementById("centerDiv3D")
|
const to2dDom = document.getElementById("centerDiv2D")
|
to3dDom.style.display = "none"
|
to2dDom.style.display = "block"
|
to2dDom.style.width = "100%"
|
|
if (map2d) {
|
map2d.invalidateSize(false)
|
}
|
}
|
|
export function viewTo23D() {
|
const to3dDom = document.getElementById("centerDiv3D")
|
const to2dDom = document.getElementById("centerDiv2D")
|
to3dDom.style.width = "50%"
|
to2dDom.style.width = "50%"
|
to3dDom.style.left = "50%"
|
to3dDom.style.display = "block"
|
to2dDom.style.display = "block"
|
|
if (map2d) {
|
map2d.invalidateSize(false)
|
}
|
}
|
