import * as mars3d from "mars3d"
|
|
export let map // mars3d.Map三维地图对象
|
export let graphicLayer
|
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
export const mapOptions = {
|
scene: {
|
center: { lng: 117.084439, lat: 31.653047, alt: 354, heading: 319, pitch: -23 }
|
}
|
}
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
export function onMounted(mapInstance) {
|
map = mapInstance // 记录map
|
|
// 加载石化工厂模型
|
const tiles3dLayer = new mars3d.layer.TilesetLayer({
|
name: "石化工厂",
|
url: "http://data.mars3d.cn/3dtiles/max-shihua/tileset.json",
|
position: { lng: 117.077158, lat: 31.659116, alt: 24.6 },
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
popup: "all"
|
})
|
map.addLayer(tiles3dLayer)
|
|
// 创建div数据图层
|
graphicLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer)
|
|
// 添加矢量数据
|
addDemoGraphic([117.077462, 31.657745, 60], { value: 0.53, color: "#fb980b" })
|
addDemoGraphic([117.079091, 31.65898, 90], { value: 0.45, color: "#00ff00" })
|
addDemoGraphic([117.079766, 31.658268, 70], { value: 0.35, color: "#00ffff" })
|
addDemoGraphic([117.07913, 31.655748, 80], { value: 0.21, color: "#ff0000" })
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
map = null
|
}
|
|
function addDemoGraphic(position, attr) {
|
const graphic = new mars3d.graphic.DivGraphic({
|
position: position,
|
style: {
|
html: `<div style="width: 80px;height:80px;"></div>`,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
},
|
attr: attr
|
})
|
graphic.on(mars3d.EventType.add, function (e) {
|
const dom = e.target.container.firstChild
|
const attr = e.target.attr
|
|
const liquidfillchartChart = echarts.init(dom)
|
|
// 参考API：https://github.com/ecomfe/echarts-liquidfill
|
// 参考示例：https://www.makeapie.com/explore.html#tags=liquidFill~sort=rank~timeframe=all~author=all
|
const option = {
|
series: [
|
{
|
type: "liquidFill",
|
radius: "100%",
|
outline: { show: false },
|
color: [attr.color],
|
data: [attr.value],
|
label: {
|
color: "#294D99",
|
insideColor: "#fff",
|
fontSize: 20
|
}
|
}
|
]
|
}
|
liquidfillchartChart.setOption(option)
|
})
|
graphicLayer.addGraphic(graphic)
|
}
|
