import * as mars3d from "mars3d"
|
|
export let map // mars3d.Map三维地图对象
|
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
export const mapOptions = {
|
scene: {
|
center: { lat: 31.818816, lng: 117.221131, alt: 2553, heading: 0, pitch: -55 }
|
}
|
}
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
export function onMounted(mapInstance) {
|
map = mapInstance // 记录map
|
|
map.basemap = 2017 // 切换到蓝色底图
|
|
addTilesetLayer()
|
addGraphics()
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
map = null
|
}
|
|
// 合肥市建筑物模型
|
function addTilesetLayer() {
|
const fragmentShader = `
|
// 注意shader中写浮点数是，一定要带小数点，否则会报错，比如0需要写成0.0，1要写成1.0
|
float _baseHeight = 0.0; // 物体的基础高度，需要修改成一个合适的建筑基础高度
|
float _heightRange = 25.0; // 高亮的范围(_baseHeight ~ _baseHeight + _heightRange)
|
float _glowRange = 300.0; // 光环的移动范围(高度)
|
|
// 建筑基础色
|
float mars_height = marsJzwHeight - _baseHeight;
|
float mars_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
|
float mars_a12 = mars_height / _heightRange + sin(mars_a11) * 0.1;
|
gl_FragColor *= vec4(vec3(mars_a12), 1.0);// 渐变
|
|
// 动态光环
|
float time = fract(czm_frameNumber / 360.0);
|
time = abs(time - 0.5) * 2.0;
|
float mars_h = clamp(mars_height / _glowRange, 0.0, 1.0);
|
float mars_diff = step(0.005, abs(mars_h - time));
|
gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - mars_diff);
|
`
|
|
const tiles3dLayer = new mars3d.layer.TilesetLayer({
|
name: "合肥市建筑物",
|
url: "//data.mars3d.cn/3dtiles/jzw-hefei/tileset.json",
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
marsJzwStyle: fragmentShader,
|
style: {
|
color: {
|
conditions: [["true", "rgba(16, 119, 209, 1)"]]
|
}
|
}
|
})
|
map.addLayer(tiles3dLayer)
|
|
// 模型裁剪
|
const modelThing = new mars3d.thing.TilesetPlanClip({
|
layer: tiles3dLayer,
|
positions: [
|
[117.22648, 31.827441],
|
[117.210341, 31.830612],
|
[117.211311, 31.842438],
|
[117.226091, 31.842885]
|
],
|
clipOutSide: true // 外裁剪
|
})
|
|
map.addThing(modelThing)
|
}
|
|
function addGraphics() {
|
// 创建矢量数据图层
|
const graphicLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer)
|
|
mars3d.Util.fetchJson({ url: "//data.mars3d.cn/file/geojson/hefei-shequ.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: {
|
color: item.attr.color,
|
opacity: 0.4
|
},
|
attr: { remark: "polygon面" }
|
})
|
graphicLayer.addGraphic(polygonEntity)
|
|
// PolylineEntity线
|
const graphicLine = new mars3d.graphic.PolylineEntity({
|
positions: item.positions,
|
style: {
|
width: 4,
|
closure: true,
|
// clampToGround: true,
|
material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.LineTrail, {
|
color: item.attr.color,
|
speed: 4
|
})
|
},
|
attr: { remark: "PolylineEntity线" }
|
})
|
graphicLayer.addGraphic(graphicLine)
|
|
// 动态边框文本 DIV
|
const graphic = new mars3d.graphic.DivBoderLabel({
|
position: polygonEntity.center,
|
style: {
|
text: item.attr.name,
|
font_size: 15,
|
font_family: "微软雅黑",
|
color: "#ccc",
|
boderColor: "#15d1f2",
|
addHeight: 100
|
},
|
attr: { remark: "DIV矢量数据" }
|
})
|
graphicLayer.addGraphic(graphic)
|
}
|
})
|
.catch(function (error) {
|
console.log("加载JSON出错", error)
|
})
|
}
|
