import * as mars3d from "mars3d"
|
|
export let map // mars3d.Map三维地图对象
|
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
export const mapOptions = {
|
scene: {
|
center: { lat: 26.520735, lng: 99.609792, alt: 23891502.7, heading: 93.3, pitch: -80.8, roll: 266.7 },
|
clock: {
|
multiplier: 200 // 速度
|
}
|
}
|
}
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
export function onMounted(mapInstance) {
|
map = mapInstance // 记录map
|
|
// 按shift键+鼠标左键 拖拽 地球到合适区域，通过下面代码获取视角参数，拷贝到mapOptions的center参数中。
|
const center = JSON.stringify(map.getCameraView({ simplify: false }))
|
console.log("center视角为：", center)
|
|
startRotate()
|
|
getGeojsonStart()
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
map = null
|
}
|
|
let previousTime
|
|
export function startRotate() {
|
stopRotate()
|
previousTime = map.clock.currentTime.secondsOfDay
|
map.on(mars3d.EventType.clockTick, map_onClockTick)
|
}
|
export function stopRotate() {
|
map.off(mars3d.EventType.clockTick, map_onClockTick)
|
}
|
// 地球旋转
|
function map_onClockTick() {
|
const spinRate = 1
|
|
const currentTime = map.clock.currentTime.secondsOfDay
|
const delta = (currentTime - previousTime) / 1000
|
previousTime = currentTime
|
map.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta)
|
}
|
|
// 加载 演示数据
|
export function getGeojsonStart() {
|
startRotate()
|
// 获取演示数据并加载
|
mars3d.Util.fetchJson({ url: "//data.mars3d.cn/file/geojson/areas/100000_full.json" })
|
.then(function (json) {
|
addDemoGraphics(json)
|
})
|
.catch(function (error) {
|
console.log("加载JSON出错", error)
|
})
|
}
|
|
function addDemoGraphics(geojson) {
|
const center = Cesium.Cartesian3.fromDegrees(117.203932, 31.856794, 31.8)
|
// 公司位置 矢量对象标记
|
const lightCone = new mars3d.graphic.LightCone({
|
position: center,
|
style: {
|
color: "rgba(0,255,255,0.9)",
|
radius: 80000, // 底部半径
|
height: 1000000 // 椎体高度
|
},
|
show: true
|
})
|
map.graphicLayer.addGraphic(lightCone)
|
|
const arr = mars3d.Util.geoJsonToGraphics(geojson) // 解析geojson
|
const lineMaterial = mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
|
image: "img/textures/line-color-yellow.png",
|
color: new Cesium.Color(255 / 255, 201 / 255, 38 / 255, 0.5),
|
speed: 9
|
})
|
for (let i = 0; i < arr.length; i++) {
|
const item = arr[i].attr
|
if (item.name) {
|
const thisPoint = Cesium.Cartesian3.fromDegrees(item.center[0], item.center[1])
|
const positions = mars3d.PolyUtil.getLinkedPointList(center, thisPoint, 40000, 100) // 计算曲线点
|
const primitive = new mars3d.graphic.PolylinePrimitive({
|
positions: positions,
|
style: {
|
width: 2,
|
material: lineMaterial // 动画线材质
|
},
|
attr: item
|
})
|
primitive.bindTooltip(`合肥 - ${item.name}`)
|
map.graphicLayer.addGraphic(primitive)
|
}
|
}
|
}
|
