import * as mars3d from "mars3d"
|
|
export let map // mars3d.Map三维地图对象
|
let tileLayer
|
let graphicLayer
|
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
export const mapOptions = {
|
scene: {
|
center: { lat: 31.676218, lng: 117.251248, alt: 27740, heading: 1, pitch: -63 }
|
}
|
}
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
export function onMounted(mapInstance) {
|
map = mapInstance // 记录map
|
|
globalNotify("已知问题提示", "(1) 百度街景目前限制使用，需要自行申请全景地图服务使用权限Key替换 ")
|
|
creatDom()
|
map.basemap = "腾讯电子"
|
|
// 矢量图层数据
|
graphicLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer)
|
|
// 叠加的图层
|
tileLayer = new mars3d.layer.BaiduLayer({
|
layer: "streetview",
|
show: false
|
})
|
map.addLayer(tileLayer)
|
|
splitScreen()
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
map = null
|
}
|
|
export function chooseStree() {
|
if (markerStreet) {
|
graphicLayer.removeGraphic(markerStreet, true)
|
markerStreet = null
|
}
|
|
map.off(mars3d.EventType.click, onClickMap)
|
tileLayer.show = false
|
|
tileLayer.show = true
|
|
if (typeView !== 0) {
|
viewTo3d()
|
}
|
|
graphicLayer.startDraw({
|
type: "billboard",
|
style: {
|
image: "img/marker/street.png",
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
label: {
|
font_size: 30,
|
color: "#ffffff",
|
outline: true,
|
outlineColor: "#000000",
|
pixelOffsetY: -50
|
}
|
},
|
success: function (graphic) {
|
markerStreet = graphic
|
}
|
})
|
|
map.on(mars3d.EventType.click, onClickMap)
|
}
|
|
function creatDom() {
|
const divDom = mars3d.DomUtil.create("div", "", document.body)
|
divDom.setAttribute("id", "centerDivJJ")
|
|
const iframDom = mars3d.DomUtil.create("iframe", "stree", divDom)
|
iframDom.setAttribute("id", "streeScape")
|
iframDom.setAttribute("src", window.currentPath + "baidu.html?lng=117.215219&lat=31.861592") // currentPath为当前目录，内置在示例框架中
|
}
|
let typeView = 0
|
|
// 3d显示
|
export function viewTo3d() {
|
typeView = 0
|
const dom2d = document.getElementById("centerDivJJ")
|
const dom3d = document.getElementById("centerDiv3D")
|
dom3d.style.display = "block"
|
dom3d.style.width = "100%"
|
dom3d.style.left = "0"
|
|
dom2d.style.display = "none"
|
}
|
|
// // 街景显示
|
export function streetscape() {
|
typeView = 1
|
const dom2d = document.getElementById("centerDivJJ")
|
const dom3d = document.getElementById("centerDiv3D")
|
dom3d.style.display = "none"
|
dom2d.style.width = "100%"
|
dom2d.style.display = "block"
|
}
|
|
// 分屏显示
|
export function splitScreen() {
|
typeView = 2
|
const dom2d = document.getElementById("centerDivJJ")
|
const dom3d = document.getElementById("centerDiv3D")
|
|
dom2d.style.width = "50%"
|
dom3d.style.width = "50%"
|
dom3d.style.left = "50%"
|
dom2d.style.display = "block"
|
dom3d.style.display = "block"
|
}
|
|
function onClickMap(event) {
|
const point = mars3d.LngLatPoint.fromCartesian(event.cartesian)
|
|
const rightFrame = document.getElementById("streeScape")
|
rightFrame.contentWindow.setPosition(point)
|
|
if (typeView === 0) {
|
streetscape()
|
}
|
}
|
|
let markerStreet
|
function updateMarker(position) {
|
if (markerStreet) {
|
markerStreet.position = position
|
} else {
|
markerStreet = new mars3d.graphic.BillboardEntity({
|
position: position,
|
style: {
|
image: "img/marker/street.png",
|
scale: 1,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
clampToGround: true
|
}
|
})
|
graphicLayer.addGraphic(markerStreet)
|
}
|
|
map.flyToGraphic(markerStreet, { radius: 800 })
|
}
|
