import * as mars3d from "mars3d"
|
|
export let map // mars3d.Map三维地图对象
|
export let graphicLayer // 矢量图层对象
|
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
export const mapOptions = {
|
scene: {
|
center: { lat: 30.053342, lng: 117.677104, alt: 187118, heading: 350, pitch: -50 },
|
showSun: false,
|
showMoon: false,
|
showSkyBox: false,
|
showSkyAtmosphere: false,
|
fog: false,
|
backgroundColor: " #120f44", // 天空背景色
|
globe: {
|
baseColor: "#120f44", // 地球地面背景色
|
showGroundAtmosphere: false,
|
enableLighting: false
|
}
|
},
|
control: {
|
baseLayerPicker: false
|
},
|
basemaps: [],
|
layers: []
|
}
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
export function onMounted(mapInstance) {
|
map = mapInstance // 记录map
|
|
// 合肥市边界墙
|
const borderWall = new mars3d.layer.GeoJsonLayer({
|
name: "合肥市边界墙",
|
url: "//data.mars3d.cn/file/geojson/areas/340100.json",
|
symbol: {
|
type: "wallP",
|
styleOptions: {
|
setHeight: -25000,
|
diffHeight: 25000, // 墙高
|
materialType: mars3d.MaterialType.Image2,
|
image: "./img/textures/fence-top.png",
|
color: "#4881A7"
|
}
|
}
|
})
|
map.addLayer(borderWall)
|
|
// 创建矢量数据图层
|
graphicLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer)
|
|
addGraphics()
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
map = null
|
|
graphicLayer.remove()
|
graphicLayer = null
|
}
|
|
/**
|
* 添加矢量数据
|
*polygon面 PolylineEntity线 光锥体 和 LED数字显示
|
* @returns {void} 无
|
*/
|
function addGraphics() {
|
mars3d.Util.fetchJson({ url: "//data.mars3d.cn/file/geojson/areas/340100_full.json" })
|
.then(function (geojson) {
|
const arr = mars3d.Util.geoJsonToGraphics(geojson) // 解析geojson
|
|
for (let i = 0; i < arr.length; i++) {
|
const item = arr[i]
|
|
// polygon面
|
const polygonEntity = new mars3d.graphic.PolygonEntity({
|
positions: item.positions,
|
style: {
|
fill: true,
|
color: "#4881a7",
|
opacity: 0.5,
|
label: {
|
text: item.attr.name,
|
font_size: 20,
|
color: "#ffffff",
|
font_family: "楷体",
|
outline: true,
|
outlineColor: "black",
|
setHeight: 2000,
|
visibleDepth: false,
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 500000),
|
scaleByDistance: new Cesium.NearFarScalar(200000, 1.0, 500000, 0.5)
|
}
|
}
|
})
|
graphicLayer.addGraphic(polygonEntity)
|
|
// PolylineEntity线
|
const graphicLine = new mars3d.graphic.PolylineEntity({
|
positions: item.positions,
|
style: {
|
color: "rgba(255,255,255,0.5)",
|
width: 1
|
}
|
})
|
graphicLayer.addGraphic(graphicLine)
|
|
// 中心点
|
const center = item.attr.centroid
|
|
// 光锥体
|
const coneGlow = new mars3d.graphic.LightCone({
|
position: center,
|
style: {
|
radius: 1500,
|
height: 15000
|
}
|
})
|
graphicLayer.addGraphic(coneGlow)
|
|
// LED数字显示
|
const number = Math.floor(Math.random() * (4000 - 3000 + 1) + 3000) // 随机数字 3000-4000
|
const graphic = new mars3d.graphic.DivGraphic({
|
position: [center[0], center[1], 12000],
|
style: {
|
html: `<div class ="coneNum">${number}`,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 500000),
|
scaleByDistance: new Cesium.NearFarScalar(200000, 1.0, 500000, 0.5)
|
}
|
})
|
graphicLayer.addGraphic(graphic)
|
}
|
})
|
.catch(function (error) {
|
console.log("加载JSON出错", error)
|
})
|
}
|
