import * as mars3d from "mars3d"
|
|
export let map
|
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
const color = "#363635"
|
export const mapOptions = {
|
scene: {
|
center: { lat: 25.845231, lng: 117.57678, alt: 488175, heading: 358, pitch: -42 },
|
showSun: false,
|
showMoon: false,
|
showSkyBox: false,
|
showSkyAtmosphere: false,
|
fog: false,
|
backgroundColor: color, // 天空背景色
|
globe: {
|
baseColor: color, // 地球地面背景色
|
showGroundAtmosphere: false,
|
enableLighting: false
|
}
|
},
|
control: {
|
baseLayerPicker: false
|
},
|
terrain: { show: false },
|
basemaps: [],
|
layers: []
|
}
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
export function onMounted(mapInstance) {
|
map = mapInstance // 记录map
|
|
// 添加矢量图层
|
const graphicLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer)
|
|
// 添加对象
|
addAnhui(graphicLayer)
|
addCenterCity(graphicLayer)
|
addOutCircle(graphicLayer)
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
map = null
|
}
|
|
// 添加安徽省底图和墙
|
function addAnhui() {
|
// 安徽省卫星底图
|
const tileLayer = new mars3d.layer.XyzLayer({
|
url: "//data.mars3d.cn/tile/anhui/{z}/{x}/{y}.png",
|
minimumLevel: 0,
|
maximumLevel: 12,
|
rectangle: { xmin: 114.883371, xmax: 119.649144, ymin: 29.395253, ymax: 34.650809 }
|
})
|
map.addLayer(tileLayer)
|
|
// 安徽省边界线墙
|
const anhuiWall = new mars3d.layer.GeoJsonLayer({
|
name: "安徽省边界墙",
|
url: "//data.mars3d.cn/file/geojson/areas/340000.json",
|
// 自定义解析数据
|
onCreateGraphic: function (options) {
|
const points = options.positions[0] // 坐标
|
const attr = options.attr // 属性信息
|
|
console.log("边界墙原始坐标", points)
|
|
mars3d.PolyUtil.computeSurfaceLine({
|
map: map,
|
positions: points,
|
has3dtiles: false,
|
splitNum: 300
|
}).then((result) => {
|
console.log("边界墙插值计算完成坐标", result.positions)
|
|
const primitive = new mars3d.graphic.WallPrimitive({
|
positions: result.positions,
|
style: {
|
addHeight: -15000,
|
diffHeight: 15000, // 墙高
|
materialType: mars3d.MaterialType.Image2,
|
image: "./img/textures/fence-top.png",
|
color: "rgba(0,255,255,0.6)"
|
// renderState: Cesium.RenderState.fromCache({
|
// blending: Cesium.BlendingState.ALPHA_BLEND,
|
// depthTest: {
|
// enabled: true,
|
// func: Cesium.DepthFunction.LESS
|
// },
|
// cull: {
|
// enabled: true,
|
// face: Cesium.CullFace.BACK
|
// },
|
// depthMask: true
|
// })
|
},
|
attr: attr
|
})
|
anhuiWall.addGraphic(primitive)
|
})
|
}
|
})
|
map.addLayer(anhuiWall)
|
|
// 安徽各市边界线和名称
|
const shiLayer = new mars3d.layer.GeoJsonLayer({
|
name: "安徽各市边界线",
|
url: "//data.mars3d.cn/file/geojson/areas/340000_full.json",
|
symbol: {
|
type: "polyline",
|
styleOptions: {
|
color: "rgba(255,255,255,0.3)",
|
width: 2,
|
label: {
|
text: "{name}",
|
position: "center",
|
font_size: 18,
|
color: "black",
|
font_family: "楷体",
|
outline: true,
|
outlineColor: "#f1f3f4",
|
outlineWidth: 3,
|
// 视距的设置
|
scaleByDistance: true,
|
scaleByDistance_far: 20000000,
|
scaleByDistance_farValue: 0.1,
|
scaleByDistance_near: 1000,
|
scaleByDistance_nearValue: 1
|
}
|
},
|
styleField: "name",
|
styleFieldOptions: {
|
合肥市: { color: "rgba(0,255,255,0.3)" }
|
}
|
},
|
popup: "{name}"
|
})
|
map.addLayer(shiLayer)
|
}
|
|
// 添加示范城市的相关对象
|
function addCenterCity(graphicLayer) {
|
const point = [117.234218, 31.814155, 0]
|
|
// divgraphic标注
|
const divgraphic = new mars3d.graphic.DivGraphic({
|
position: point,
|
style: {
|
html: `<div class="marsBlackPanel">
|
<div class="marsBlackPanel-text">示范城市</div>
|
</div>`,
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // 横向定位
|
verticalOrigin: Cesium.VerticalOrigin.CENTER // 垂直定位
|
}
|
})
|
graphicLayer.addGraphic(divgraphic)
|
|
// 圆形动态扩散图
|
const cicle = new mars3d.graphic.CirclePrimitive({
|
position: point,
|
style: {
|
radius: 16000,
|
material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.CircleWave, {
|
color: "rgba(0,255,255,0.6)",
|
count: 2,
|
speed: 10
|
})
|
}
|
})
|
graphicLayer.addGraphic(cicle)
|
}
|
|
// 添加周边的圆圈刻度尺等对象
|
function addOutCircle(graphicLayer) {
|
const arrImg = [
|
{
|
// 刻度
|
image: "./img/icon/calib.png",
|
positions: [
|
[113.564329, 35.654741],
|
[120.802219, 28.844016]
|
]
|
},
|
{
|
// 刻度尺
|
image: "./img/icon/calib-value.png",
|
positions: [
|
[114.162597, 29.256489],
|
[120.216593, 35.055444]
|
]
|
},
|
{
|
// 方向
|
image: "./img/icon/calib-dir.png",
|
positions: [
|
[114.162597, 29.256489],
|
[120.216593, 35.055444]
|
]
|
}
|
]
|
|
for (let i = 0; i < arrImg.length; i++) {
|
const item = arrImg[i]
|
const primitive = new mars3d.graphic.RectanglePrimitive({
|
positions: item.positions,
|
style: {
|
materialType: mars3d.MaterialType.Image2,
|
image: item.image,
|
opacity: 0.4
|
}
|
})
|
graphicLayer.addGraphic(primitive)
|
}
|
|
// 自转的半椭圆
|
// let rotation = Cesium.Math.toRadians(50);
|
// function getRotationValue() {
|
// rotation += 0.005;
|
// return rotation;
|
// }
|
// let primitive1 = new mars3d.graphic.RectangleEntity({
|
// positions: [
|
// [114.642444, 34.789658],
|
// [119.814361, 29.425181],
|
// ],
|
// style: {
|
// materialType: mars3d.MaterialType.Image2,
|
// image: "./img/icon/calib-semicircle.png",
|
// opacity: 0.2,
|
// clampToGround: true,
|
// rotation: new Cesium.CallbackProperty(getRotationValue, false),
|
// stRotation: new Cesium.CallbackProperty(getRotationValue, false),
|
// },
|
// });
|
// graphicLayer.addGraphic(primitive1);
|
}
|
