合抱之木,生于毫末; 九层之台,起于累土; 千里之行,始于足下。
一、设置视角?
scene: {
center: { lat: 31.654436, lng: 117.083883, alt: 759, heading: 316, pitch: -50 }
}
二、创建模型热力图
1.加一个石化工厂模型
代码如下(示例):
map.fixedLight = true // 固定光照,避免gltf模型随时间存在亮度不一致。
const tilesetLayer = new mars3d.layer.TilesetLayer({
name: "石化工厂",
url: "//data.mars3d.cn/3dtiles/max-shihua/tileset.json",
position: { lng: 117.077158, lat: 31.659116, alt: 24.6 },
maximumScreenSpaceError: 1,
maximumMemoryUsage: 1024,
center: {
lat: 31.654436,
lng: 117.083883,
alt: 758.53,
heading: 316.4,
pitch: -50.1,
roll: 359.8
},
popup: "all"
})
map.addLayer(tilesetLayer)
2.创建热力图图层
代码如下(示例):
const arrPoints = getRandomPoints(900)// 测试点数据
// 热力图 图层
const heatLayer = new mars3d.layer.HeatLayer({
positions: arrPoints,
// 以下为热力图本身的样式参数,可参阅api:https://www.patrick-wied.at/static/heatmapjs/docs.html
heatStyle: {
radius: 40,
blur: 0.8
},
// 以下为矩形矢量对象的样式参数
style: {
opacity: 0.6,
classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
clampToGround: true
}
})
map.addLayer(heatLayer)
获取随机点方法:
// 获取bbox矩形区域内的count个随机点
function getRandomPoints(count) {
const xmin = 117.075718
const xmax = 117.083508
const ymin = 31.654645
const ymax = 31.661744
const arr = []
const arrPoint = turf.randomPoint(count, { bbox: [xmin, ymin, xmax, ymax] }).features // 随机点
for (let i = 0; i < arrPoint.length; i++) {
const item = arrPoint[i].geometry.coordinates
const val = Math.floor(Math.random() * 100) // 热力值
arr.push({ lng: item[0], lat: item[1], value: val })
}
return arr
}
模型热力图效果如下: