MchCesium 3D展示

admin · 发表于 2025-5-30 15:28:39

基本用法： 在html文件中引入
"https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"和
"https://mhc.ixiera.com/mhc/Cesium3DTile.js"，
并添加一个div容器，设置id属性
创建实例：const view3D = MchCesium.init(containerId)
实例方法： 1. init(containerId) 功能：初始化MchCesium
参数说明：
containerId(String)：MchCesium的容器id
2. flyto(lng, lat, h, callback) 功能：初始镜头飞行定位
参数说明：
lng(Number)：经度，lat(Number)：纬度，h(Number)：高度
callback(Function)：定位后的回调
3. load3dTiles(url) 功能：加载3Dtiles数据
参数说明：
url(String)：3dtiles的json数据url地址
返回值：
返回一个Promise
4. changeHeight(height) 功能：改变3Dtiles模型的高度
参数说明：
height(Number)：要调整的高度
5. loadMarker(data, markerOption, type, needTrans) 功能：加载单个标注
参数说明：
data(Object)：标注数据。具体如下表：

id(string)	标注id（必填）
lng(number)	标注的经度（必填）
lat(number)	标注的纬度（必填）
text(string)	标注label的文字内容（type为2或3时必填）
description(string)	标注的描述
dialogHtml(string)	点击标注后的弹窗内容，应为HTML片段

markerOption(Object)：标注的配置对象，包含billboard和label两个属性。
let markerOption = {billboard: {}, label: {}}
billboard及label具体配置可点击链接查看:

billboard配置项

label配置项

type(Number)：标注类型，默认值为1。type取值及代表含义：1. 只加载marker，2. 同时加载marker和label，3.只加载label
needTrans(Boolean)：是否需要GCJ02(高德地图、腾讯地图、谷歌地图等)转换WGS84
返回值：
返回一个Promise。loadMarker(markerinfo, markerOption, 1).then((marker) => {...}), marker为添加的marker对象
6. loadMarkers(data, markerOption, type) 功能：加载多个标注
参数说明：
data(Array)：标注数据数组。具体内容见loadMarker函数中的data参数。
markerOption(Object)：标注的配置对象。参数同loadMarker的markerOption。
type(Number)：标注类型，默认值为1。type取值及代表含义：1. 只加载marker，2. 同时加载marker和label，3.只加载label
返回值：
返回一个Promise。用法如下：
loadMarkers(markerinfo, markerOption, 1).then(markers => { // markers为添加的多个marker对象的数组 console.log(markers) }) 7. dgToCar(lng, lat, h) 功能：经纬度转笛卡尔坐标
参数说明：
lng(Number)：经度，lat(Number)：纬度，h(Number)：高度
8. carTodg(x, y, z) 功能：笛卡尔坐标转经纬度
参数说明：
x(Number)，y(Number)，z(Number)。分别为笛卡尔坐标系的x，y，z
9. isPositionInView(lng, lat, h) 功能：判断该位置是否在视野范围内
参数说明：
lng(Number)：经度，lat(Number)：纬度，h(Number)：高度
返回值：
Boolean类。为true时，在视野内；为false时，不在视野内。
10. removeMarkerDialogArr(markers) 功能：清除markers及其对应的对话框
参数说明：
markers(Array): 标注数组
返回值:
Boolean类型。为true时，清除成功；为false时，清除失败。
11. MchCesium.viewer.entities.add(entity) 功能：添加实体。
参数说明：
entity(Object): 实体。实体可为标注，多边形，billboard，label等
12. initHeatMap(option, data, bounds, needTrans) 功能：初始化热力图

* 注意：如使用热力图功能，需引入"https://mhc.ixiera.com/mhc/Cesium-1.120/CesiumHeatmap.js"

参数说明：
option(Object)：热力图配置。具体配置如下：
const option = { // 渐变 gradient: { .5: 'blue', .8: 'yellow', .95:'red' }, // 半径 radius: 30, // 不透明度 opacity: 0.7, // 最大不透明度 maxOpacity: 0.8, // 最小不透明度 minOpacity: 0.6, // 渐变的平滑因子，0-1之间的数值。值越大，渐变越平滑 blur: 0.85} data(Array)：热力图数据。 x：datapoint的经度；y：datapoint的纬度；value：datapoint的value。示例如下：
const data = [{ x: 104.45926982311602, y: 31.833608860886198, value: 100 }, { x: 104.45925095013386, y: 31.834335363637414, value: 73 }, { x: 104.456136982311602, y: 31.826335363637414, value: 85 }, { x: 104.45965095013386, y: 31.820608860886198, value: 50 }] bounds(Object)：热力图boundingbox范围。west(Number)：画布区域在地图上最西边的经度；south(Number)：最南边的纬度；east(Number)：最东边的经度；north(Number)：最北边的纬度；示例如下：
const bounds = { west: 104.45926982311602, south: 31.820608860886198, east: 104.45965095013386, north: 31.834335363637414 } needTrans(Boolean)：是否需要GCJ02(高德地图、腾讯地图、谷歌地图等)转换WGS84
13. showHeatmap() 功能：显示热力图
14. hideHeatmap() 功能：隐藏热力图
应用代码示例  <script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium-1.120/CesiumHeatmap.js"></script> <div id="cesiumContainer"></div>  // 测试数据 - 标注数据 var markerInfos = [ { id: 'marker1', text: '生命之洞', description: '服务器获取的数据1', lng: 104.461479, lat: 31.83257, }, { id: 'marker2', text: '税务局', description: '服务器获取的数据2', lng: 104.460787, lat: 31.832211, }, { id: 'marker3', text: '林业局', description: '测试', lng: 104.461191, lat: 31.830424, } ] // 自定义弹窗html markerInfos.forEach(item=>{ var strhtml = '<div><p>名称：'+item.text+'</p><p>描述：'+item.description+'</p></div>'; item.dialogHtml = strhtml }); // 测试数据 - 热力图数据 let heatMapData = [ { "x": 104.45926982311602, "y": 31.833608860886198, "value": 100 }, { "x": 104.45925095013386, "y": 31.834335363637414, "value": 73 }, { x: 104.456136982311602, y: 31.826335363637414, value: 85 }, { x: 104.45965095013386, y: 31.820608860886198, value: 50 }, ]; let bounds = { west: 104.45465095013386, east: 104.46436982311602, south: 31.810608860886198, north: 31.839335363637414 }; // 初始化 let markers1 = []; const view3D = MchCesium.init('cesiumContainer', true); const markerOption = { billboard: { image: 'https://mhc.ixiera.com/img/bz.png', width: 30, height: 35, }, label: { font: '20px', pixelOffset: new Cesium.Cartesian2(0, -38) } } var url = 'https://mhc.ixiera.com/thrdtiles/static/3dtiles/tileset.json'; MchCesium.load3dTiles(url).then(async () => {  MchCesium.changeHeight(720);  MchCesium.loadMarkers(markerInfos, markerOption, 2, true).then((markers) => { markers1 = markers //  // setTimeout(function() { // MchCesium.removeMarkerDialogArr(markers1) // }, 10000); }) }) // 渲染热力图 MchCesium.initHeatMap({radius: 50}, heatMapData, bounds, false

15.折线实体 ①　创建折线
var Polyline1 = new MchCesium.Polyline(id, data, option);
参数说明：
id: 设置折线实体id
data: 绘制折线数据（折线点坐标）
option: 折线配置

data数据配置实例：
var testData = [ {longitude: "104.461587", latitude: "31.831385"}, {longitude: "104.461478", latitude: "31.831406"}, {longitude: "104.461278", latitude: "31.831415"} ]
折线option配置属性

属性	数据类型	说明
editable	Boolen	是否可编辑，可选(默认：否false)
color	String	线路颜色，可选(默认：red)
width	Number	线路宽度，可选(默认：2)
type	String	线路类型（solid实线，dashed虚线），可选(默认：solid)
dashLength	Number	虚线长度(仅当type=dashed时起作用)
isArrow	Boolen	是否显示方向箭头，可选(默认否false)
zIndex	Number	显示层级，可选(默认1)
needTrans	Boolen	是否需要gcj02 to wgs84，可选(默认：否false)
extData	Boolen	用户自定义属性，可选

②　动态绘制折线
var Polyline5 = new MchCesium.PolylineDrawer(id,option);
参数说明：
id: 设置折线实体id
option: 折线配置(详细说明参考上表)
应用：在地图上点击点绘制折线双击结束绘制，结束后可通过拖动顶点编辑修改折线

③　显示/隐藏折线
显示：Polyline1.show();
隐藏：Polyline1.hide();

④　销毁折线
Polyline1.remove();

⑤　获取折线路径数据
var path = Polyline1.getPath();
path三维笛卡尔空间直角坐标系(Cartesian3)数组
返回值：[ { "x": -1354250.6494432683, "y": 5252030.7465766575, "z": 3344758.926688901 }, { "x": -1354240.3334738093, "y": 5252032.15384273, "z": 3344760.8805824495 }, { "x": -1354221.8366393335, "y": 5252036.408661305, "z": 3344761.683163913 } ] ⑥　关闭折线编辑
Polyline5.closeEditor()
实例：
// 已知path - 渲染折线 var lineSty1 = { color: 'rgba(223, 112, 255, 1)', width: 5, needTrans: true, zIndex: 5, extData:{name:'LINE-1',type:'实线',ggg:'已知path - 渲染折线'}, } var lineData = [ {longitude: "104.461587", latitude: "31.831385"}, {longitude: "104.461478", latitude: "31.831406"}, {longitude: "104.461278", latitude: "31.831415"} ] var Polyline1 = new MchCesium.Polyline('LINE-1', lineData, lineSty1); console.log(Polyline1); polylineArr.push(Polyline1); // 获取折线路径数据 function getPolylinePath(){ console.log('获取折线路径数据') var path = Polyline1.getPath(); console.log(path) Polyline5.closeEditor() } // 销毁折线 function delPolyline(){ console.log('销毁折线') Polyline1.remove(); } // 显示/隐藏 function switch1(e){ if (e.checked) { // 重新绘制 polylineArr.forEach(item=>{ item.show(); }) } else { // 移除 polylineArr.forEach(item=>{ item.hide(); }) } } // 已知path - 渲染折线（带箭头） var lineSty2 = { color: 'rgba(223, 112, 120, 1)', width: 5, type: 'dashed', dashLength : 50.0, // 虚线长度 needTrans: true, isArrow: true, zIndex: 6, extData:{name:'LINE-2',type:'带箭头',ggg:'已知path - 渲染折线（带箭头）'}, } var lineData2 = [ {longitude: "104.461587", latitude: "31.831345"}, {longitude: "104.461478", latitude: "31.831366"}, {longitude: "104.461278", latitude: "31.831375"} ] var Polyline2 = new MchCesium.Polyline('LINE-2', lineData2, lineSty2); console.log(Polyline2); polylineArr.push(Polyline2); // 已知path - 渲染折线(虚线) var lineSty3 = { color: 'rgba(0, 0, 255, 1)', width: 5, type: 'dashed', dashLength : 10.0, // 虚线长度 needTrans: true, zIndex: 7, extData:{name:'LINE-3',type:'虚线',ggg:'已知path - 渲染折线(虚线)'}, } var lineData3 = [ {longitude: "104.461587", latitude: "31.831305"}, {longitude: "104.461478", latitude: "31.831326"}, {longitude: "104.461278", latitude: "31.831335"} ] var Polyline3 = new MchCesium.Polyline('LINE-3', lineData3, lineSty3); console.log(Polyline3); polylineArr.push(Polyline3); // 已知path - 渲染折线(可编辑) var lineSty4 = { color: 'rgba(200, 60, 50, 1)', width: 5, zIndex: 8, needTrans: true, extData:{name:'LINE-4',type:'可编辑',ggg:'已知path - 渲染折线(可编辑)'}, editable:true } var lineData4 = [ {longitude: "104.461587", latitude: "31.831265"}, {longitude: "104.461478", latitude: "31.831286"}, {longitude: "104.461278", latitude: "31.831295"} ] var Polyline4 = new MchCesium.Polyline('LINE-4', lineData4, lineSty4); console.log(Polyline4); polylineArr.push(Polyline4); // 动态绘制折线 var Polyline5; function drawPolyline(){ var lineSty5 = { color: 'rgba(223, 112, 255, 1)', width: 5, needTrans: true, zIndex: 9, extData:{name:'LINE-5',type:'绘制',ggg:'动态绘制折线'}, } Polyline5 = new MchCesium.PolylineDrawer('LINE-5', lineSty5); console.log(Polyline5); polylineArr.push(Polyline5); } 16.圆实体 ①　创建圆
let circleEntity1 = new MchCesium.Circle(id, cPosition, radius, option)
参数说明：
id: 设置圆实体id
cPosition: 中心点坐标（格式：[104.460287,31.831185]）
radius: 半径
option圆配置
圆option配置属性

属性	数据类型	说明
outlineColor	String	轮廓颜色，可选
outlineWidth	Number	轮廓宽度，可选
fillColor	String	填充颜色，可选（默认透明）
zIndex	Number	显示层级，可选(默认1)
needTrans	Boolen	是否需要gcj02 to wgs84，可选(默认：否false)
extData	Object	用户自定义属性，可选

②　动态绘制圆
let circleEntity3 = new MchCesium.CircleDrawer(id, option)
参数说明：
id: 设置圆实体id
option: 圆配置(详细说明参考上表)
应用：在地图上点击点设置中心点后移动鼠标绘制圆，右键结束绘制；

③　显示/隐藏圆
显示：circleEntity1.show();
隐藏：circleEntity1.hide();

④　销毁圆
circleEntity1.remove();

⑤　获取圆相关数据
var data = circleEntity1.getCircleData();
返回值说明：
center中线点坐标（三维笛卡尔空间直角坐标系Cartesian3）
radius半径
extData 自定义数据
返回值：{ "center": { "x": -1354134.1977939678, "y": 5252073.042972411, "z": 3344739.7881829604 }, "radius": 50, "extData": { "name": "cc1", "type": "123", "ggg": "就会加快和" } } 实例：
var circleArr = []; var cStyle1 = { needTrans: true, fillColor: '#c800ff5c', outlineColor: 'rgba(200, 60, 50, 1)', outlineWidth: 5, zIndex: 6, extData:{name:'cc1',type:'123',ggg:'就会加快和'}, } let circleEntity1 = new MchCesium.Circle('circle-1', [104.460287,31.831185], 50, cStyle1) console.log(circleEntity1) circleArr.push(circleEntity1) // 获取圆中心点和半径 function getCircle(){ console.log('获取折线路径数据') var data = circleEntity1.getCircleData(); console.log(data) } // 销毁圆 function delgetCircle(){ console.log('销毁圆') circleEntity1.remove(); } // 显示/隐藏 function switch2(e){ if (e.checked) { // 重新绘制 circleArr.forEach(item=>{ item.show(); }) } else { // 移除 circleArr.forEach(item=>{ item.hide(); }) } } // 动态绘制圆 function drawCircle(){ var cStyle3 = { needTrans: true, outlineColor: 'rgba(0, 255, 255, 1)', outlineWidth: 5, zIndex: 5, extData:{name:'cc1',type:'123',ggg:'就会加快和'}, } let circleEntity3 = new MchCesium.CircleDrawer('circle-3', cStyle3) console.log(circleEntity3) circleArr.push(circleEntity3) } 17.点标记 构造方法： const marker = new MchCesium.Marker(id, billboardGraphics, position, option)
参数说明：
id(String)：点标记id
billboardGraphics(Object)：点标记的图标配置。具体配置参考http://cesium.xin/cesium/cn/Docu ... lboardGraphics.html
position(Array)：点标记位置(经纬度数组，如[119.34, 32.34])
option(Object)：其他配置。包含属性：needTrans 是否需要gcj转wgs84; editable 点标记是否可编辑; extData 自定义数据; label参考 http://cesium.xin/cesium/cn/Documentation1.62/LabelGraphics.html
实例方法：
createMarkerEntity() 创建点标注实体
changeMarkerEditable(editable=true) 改变点标记的可编辑性
destroy() 销毁点标记对象
show() 在地图上显示点标记
hide() 在地图上隐藏点标记
setZIndex(zIndex) 设置点标记的zindex
setPosition([lng, lat]) 设置点标记位置
setLabel(LabelGraphics) 设置点标记的label
onDrag(callback) 监听dragend事件
onClick(callback) 监听click事件
代码示例：
let billboardGraphics = {       image: '../img/bz.png',       width: 30,       height: 35,       verticalOrigin: Cesium.VerticalOrigin.BOTTOM,       horizontalOrigin: Cesium.HorizontalOrigin.CENTER,       heightReference: Cesium.HeightReference.CLAMP_TO_GROUND } let markerPosition = [104.461587, 31.8321385] let option3 = {    needTrans: true, editable: true, } let marker = new MchCesium.Marker('testMarker', billboardGraphics, markerPosition, option3) marker.createMarkerEntity() marker.setLabel({       text: '点标注',       font: '14px Microsoft YaHei',       verticalOrigin: Cesium.VerticalOrigin.BOTTOM,       heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,       pixelOffset: new Cesium.Cartesian2(0, -40) }) marker.show() marker.setZIndex(55) marker.hide() marker.onClick(function(e) { console.log(e) }) 18.点标记鼠标绘制工具 构造方法： const markerDrawer = new MchCesium.MakerDrawer(id, billboardGraphics, labelGraphics)
参数说明：
id(String) 鼠标绘制工具id
billboardGraphics(Object)：点标记的图标配置。具体配置参考http://cesium.xin/cesium/cn/Docu ... lboardGraphics.html
labelGraphics(Object)：点标记的label配置。具体配置参考http://cesium.xin/cesium/cn/Documentation1.62/LabelGraphics.html
实例方法：
open() 开启鼠标绘制功能
close() 关闭鼠标绘制功能
onFinish(callback) 监听绘制结束事件，传入回调
代码示例：
const markerDrawer = new MchCesium.MarkerDrawer('testMarkerDrawer', billboardGraphics) function drawMarker() {    markerDrawer.open() } markerDrawer.onFinish(function(e) {    markerDrawer.close() }) 19.矩形 构造方法： const rect = new MchCesium.Rectangle(id, rectGraphics, bounds, option)
参数说明：
id(String)：矩形id
rectGraphics(Object)：矩形配置。具体配置参考http://cesium.xin/cesium/cn/Docu ... tangleGraphics.html
bounds(Object) 矩形西南顶点和东北顶点坐标 let bounds = {southwest: [119.12, 34.11], northeast: [119.22, 34.23]}
option(Object) 其他配置。包含属性：needTrans 是否需要gcj转wgs84；editable 是否可编辑；outline 边框配置{width: 3, color: '#fff', style: 'solid'}；extData 扩展数据
实例方法：
createRectangleEntity() 创建矩形实体
changeRectEditable(editable=true) 改变矩形可编辑性
destroy() 销毁矩形对象
show() 在地图上显示矩形
hide() 在地图上隐藏矩形
setZIndex(zIndex) 设置矩形zindex
setCoordinates(bounds) 设置矩形边界(bounds参数格式同构造函数中bounds参数)
onClick(callback) 监听click事件
代码示例：
let rectbounds = {southwest: [104.459587, 31.8291385], northeast: [104.460587, 31.8301385]}       let option = { needTrans: true, editable: true,outline: {          color: '#fff',          width: 2.0,          style: 'solid'       } }       let rectGraphics = {          material: Cesium.Color.RED.withAlpha(0.5),          outlineColor: Cesium.Color.WHITE,          outlineWidth: 100.0,       }       let rect = new MchCesium.Rectangle('testrect', rectGraphics, rectbounds, option)       rect.createRectangleEntity() rect.show() rect.setZIndex(55) rect.hide() rect.onClick(function(e) { console.log(e) }) 20.矩形鼠标绘制工具 构造方法： const rectDrawer = new MchCesium.RectangleDrawer(id, rectGraphics)
参数说明：
id(String) 鼠标绘制工具id
rectGraphics(Object)：矩形配置。具体配置参考http://cesium.xin/cesium/cn/Docu ... tangleGraphics.html
实例方法：
open() 开启鼠标绘制功能
close() 关闭鼠标绘制功能
onFinish(callback) 监听绘制结束事件，传入回调
代码示例：
const rectDrawer = new MchCesium.RectangleDrawer('testRectDrawer', rectGraphics) function drawRect() {       rectDrawer.open() } rectDrawer.onFinish(function(e) {       rectDrawer.close() }) 21.多边形 构造方法：
const polygon = new MchCesium.Polygon(id, polygonGraphics, positions, option, holes)
参数说明：
id(String)：多边形id
polygonGraphics(Object)：多边形配置。具体配置参考http://cesium.xin/cesium/cn/Docu ... olygonGraphics.html
positions(Array)。多边形顶点坐标（按照顺序）。如[[119.12, 23.4], [118.23, 25.1], [118.34, 34.4], [117.34, 35.11]]
option(Object)：其他配置。包含属性：needTrans 是否需要gcj转wgs84；editable 是否可编辑；outline 边框配置{width: 3, color: '#fff', style: 'solid'}；extData 扩展数据
holes(Array)。如果多边形为环形，则为内环顶点坐标集。
实例方法：
createPolygonEntity() 创建多边形实体
changePolygonEditable(editable=true) 改变多边形可编辑性
destroy() 销毁多边形对象
show() 在地图上显示多边形
hide() 在地图上隐藏多边形
setZIndex(zIndex) 设置多边形zindex
setCoordinates(positions) 设置多边形顶点坐标
onClick(callback) 监听click事件
代码示例：
let polygonGraphics = {         material: Cesium.Color.RED.withAlpha(0.5), outlineColor: Cesium.Color.WHITE, outlineWidth: 100.0,       } let positions = [[104.460887, 31.8291385], [104.462587, 31.8291385], [104.46302587, 31.8311385], [104.4609587, 31.8308385]] let option2 = {          needTrans: true, editable: true,          outline: {             color: '#fff',             width: 2.0,             style: 'dashed'          } } let polygon = new MchCesium.Polygon('testPolygon', polygonGraphics, positions, option2) polygon.createPolygonEntity() polygon.show() polygon.setZIndex(55) polygon.hide() polygon.onClick(function(e) { console.log€ }) 22.多边形鼠标绘制工具 构造方法： const polygonDrawer = new MchCesium.PolygonDrawer(id, polygonGraphics)
参数说明：
id(String) 鼠标绘制工具id
polygonGraphics(Object)：多边形配置。具体配置参考http://cesium.xin/cesium/cn/Docu ... olygonGraphics.html
实例方法：
open() 开启鼠标绘制功能
close() 关闭鼠标绘制功能
onFinish(callback) 监听绘制结束事件，传入回调
代码示例：
const polygonDrawer = new MchCesium.PolygonDrawer('testPolygonDrawer', polygonGraphics) function drawPolygon() { polygonDrawer.open() } polygonDrawer.onFinish(function(e) { polygonDrawer.close() }) 23.文字标记 构造函数： const label = new MchCesium.Label(id, position, option)
参数说明：
id(String)：文字标记id
position(Array)：文字标记位置(经纬度数组，如[119.34, 32.34])
option(Object)：其他配置。包含属性：needTrans 是否需要gcj转wgs84; 及LabelGraphics包含的属性，具体配置参http://cesium.xin/cesium/cn/Documentation1.62/LabelGraphics.html
实例方法：
show() 在地图上显示文字标记
hide() 隐藏文字标记
getData() 获取数据
remove() 销毁文字标记
代码示例：
// 文本标记demo          var labelStyle1 = {          needTrans: true,          extData:{name:'Label-1',type:'1',ggg:'kkkk', lnglat:[104.461587,31.831185]},          zIndex: 2,          text: 'Label-1',          fontSize: '12px', // 字体样式          fontFamily: 'monospace',          style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 文字样式          outlineColor: 'rgba(0, 0, 255, 1)', // 轮廓颜色          outlineWidth: 5, // 轮廓宽度          fillColor: '#c800ff5c', // 填充颜色          showBackground: true, // 是否显示背景          backgroundColor: 'rgba(200, 60, 50, 0.4)', // 背景颜色和透明度          horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平对齐方式          verticalOrigin: Cesium.VerticalOrigin.CENTER ,// 垂直对齐方式       }                      let labelEntity1 = new MchCesium.Label('Label-1', [104.461487,31.831465], labelStyle1)       console.log(labelEntity1)             // 获取数据       function getLabel(){          console.log('获取label数据')          var data = labelEntity1.getData();          console.log(data)       }       function updateLabel1(){          labelEntity1.updatePosition([104.461587,31.832185]);          var data2 = labelEntity1.getData();          console.log('label1更新位置后')          console.log(data2)       }       function updateLabel2(){          labelEntity1.updateText('Label-1-899');          var data3 = labelEntity1.getData();          console.log('label1更新文本后')          console.log(data3)       }       // 销毁       function delLabel(){          console.log('销毁label')          labelEntity1.remove();       }       // 显示/隐藏       function switch3(e){          if (e.checked) {             // 重新绘制             labelEntity1.show();          } else {             // 移除             labelEntity1.hide();          }       } 24.热力图 ①　创建热力图
var heatmap = new MchCesium.Heatmap(id, data,option, bounds, needTrans);
参数说明：
id: 设置热力图id
data: 绘制热力图数据
option: 热力图配置
bounds(Object)：热力图boundingbox范围
needTrans(Boolean)：是否需要gcj转wgs84

热力图option配置说明

属性	数据类型	说明
zIndex	Number	显示层级（默认1）
radius	Number	半径
opacity	Number	不透明度
maxOpacity	Number	最大不透明度
minOpacity	Number	最小不透明度
blur	Number	渐变的平滑因子0-1之间的数值

②　显示/隐藏热力图
显示：heatmap.show();
隐藏：heatmap.hide();

③　销毁热力图
heatmap.remove();

实例方法：
// 测试数据 - 热力图数据 let heatMapData = [ { "x": 104.45926982311602, "y": 31.833608860886198, "value": 100 }, { "x": 104.45925095013386, "y": 31.834335363637414, "value": 73 }, { x: 104.456136982311602, y: 31.826335363637414, value: 85 }, { x: 104.45965095013386, y: 31.820608860886198, value: 50 }, ]; let bounds = { west: 104.45465095013386, east: 104.46436982311602, south: 31.810608860886198, north: 31.839335363637414 }; var heatmap = new MchCesium.Heatmap('hhh', heatMapData, {radius: 20}, bounds, false); console.log(heatmap); // 销毁圆 function delHeatmap(){ console.log('销毁Heatmap') heatmap.remove(); } // 显示/隐藏 function switch4(e){ if (e.checked) { // 重新绘制 heatmap.show(); } else { // 移除 heatmap.hide(); } }

		自动登录	找回密码
密码			立即注册

MchCesium 3D展示

浏览过的版块