cesium-heatmap-es6
2 |
3 |
参考源码
4 | 5 |1.《117颗星 manuelnas/CesiumHeatmap》 6 | 基于heatmap.min.js，通过绘制Entity(矩形)实体实现，364行代码，有三维效果 7 | 2. 《32颗星 postor/cesiumjs-heat 》 8 | 基于heatmap.min.js，使用SingleTileImageryProvider图层实现，根据镜头移动具有重绘功能，239行代码，无三维效果 9 | 3. 《16颗星 wangzhongliang/CesiumHeatmap》 10 | 使用Primitive图元实现，提供了两种方式，优点在于计算范围的方法。 11 | 方式一基于heatmap.min.js，157行代码，无三维效果； 12 | 方式二基于webgl-heatmap.js，128行代码，无三维效果；
13 | 14 | 15 |特点
16 | 17 |-
18 |
- 提供三种绘制方式，实体（可贴模型，有三维效果）、图元、图层 19 |
- 提供重绘，通过摄像头的高度进行重绘 20 |
- 提供heatmap.js的所有配置参数入口 21 |
- 源码ts编写，发布支持es6和umd两种模式 22 |
- 支持npm安装 23 |
效果图
27 | 28 |
30 | 
插件使用方法
34 | 35 | 36 | 37 |安装
38 | 39 |npm install cesium-heatmap-es6
文档
43 | 44 |自行打开docs文件夹
45 | 46 | 47 |umd模式
48 | 49 |<script type="text/javascript" src="./CesiumHeatmap/dist/cesium-heatmap-es6.umd.js"></script>
const defaultDataValue = [10, 500]
const defaultOpacityValue = [0, 1]
const points = []
fetch("/datas/geojson/busstop2016.geojson", {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
}).then((response) => {
response.json().then((data) => {
if (data)
data.features.forEach(function (feature) {
const lon = feature.geometry.coordinates[0]
const lat = feature.geometry.coordinates[1]
points.push({
x: lon,
y: lat,
value: 100 * Math.random()
})
})
const earthHeatMap = new CesiumHeatmap(viewer,
{
zoomToLayer: true,
points,
heatmapDataOptions: { max: defaultDataValue[1], min: defaultDataValue[0] },
heatmapOptions: {
maxOpacity: defaultOpacityValue[1],
minOpacity: defaultOpacityValue[0]
}
}
)
})
})
50 | es6模式
54 | 55 | const defaultDataValue = [10, 500]
const defaultOpacityValue = [0, 1]
import { CesiumHeatmap, HeatmapPoint } from "cesium-heatmap-es6"
const points: HeatmapPoint[] = []
fetch("/datas/geojson/busstop2016.geojson", {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
}).then((response) => {
response.json().then((data) => {
if (data)
data.features.forEach(function (feature) {
const lon = feature.geometry.coordinates[0]
const lat = feature.geometry.coordinates[1]
points.push({
x: lon - 0.05,
y: lat - 0.04,
value: 100 * Math.random()
})
})
cesiumHeatmap = new CesiumHeatmap(viewer,
{
zoomToLayer: true,
points,
heatmapDataOptions: { max: defaultDataValue[1], min: defaultDataValue[0] },
heatmapOptions: {
maxOpacity: defaultOpacityValue[1],
minOpacity: defaultOpacityValue[0]
}
}
)
})
})
56 | 源码使用方法
60 | 61 | 62 | 63 |依赖安装
64 | 65 |npm run a
项目运行
69 | 70 |npm start
项目打包
74 | 75 |npm run build
发布
79 | 80 |npm run release
Generated using TypeDoc
Interface CesiumHeatmapOption
Generated using TypeDoc
Interface HeatmapDataOption
Generated using TypeDoc
Interface HeatmapPoint
Generated using TypeDoc
cesium-heatmap-es6
Generated using TypeDoc
Interface CesiumHeatmapOption
Generated using TypeDoc
Interface HeatmapDataOption
Generated using TypeDoc
Interface HeatmapPoint
Generated using TypeDoc
cesium-heatmap-es6
Generated using TypeDoc
163 |
164 |
173 |
223 |
224 | );
225 | };
226 |
227 | export default PHeatMap;
228 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///