MCHMAP 丨 地图引擎
MCHMAP 丨 地图引擎 > 快速开始 > MchCesium > 文字标记

文字标记

1.MchCesium.Label加载label

构造函数：

const label = new MchCesium.Label(id, position, option)

参数说明：

id(String)：文字标记id

position(Array)：文字标记位置(经纬度数组，如[119.34, 32.34])

option(Object)：其他配置。

option包含属性：needTrans 是否需要gcj转wgs84; 及LabelGraphics包含的属性，具体配置参http://cesium.xin/cesium/cn/Documentation1.62/LabelGraphics.html

实例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>label-热力图</title> <script src="https://mhc.ixiera.com/mhc/main.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script> <script src="https://mhc.ixiera.com/mhc/main.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script> <style type="text/css"> .MchCesium-mapContainer{width: 100%;height: 100%;position: relative;overflow: hidden;} </style> </head> <body> <div id="containerId" class="MchCesium-mapContainer"></div> <script type="text/javascript"> // 初始化MchCesium MchCesium.init('containerId'); // 测试数据 var option = { needTrans: true, extData:{name:'Label-2',type:'2',ggg:'sssxxxzz', lnglat:[104.461587,31.831195]}, zIndex: 1, text: 'Label-1', fontSize: '12px', // 字体样式 fontFamily: 'monospace', style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 文字样式 outlineColor: 'rgba(0, 225, 225, 1)', // 轮廓颜色 outlineWidth: 5, // 轮廓宽度 fillColor: '#ffffff', // 填充颜色 showBackground: true, // 是否显示背景 backgroundColor: 'rgba(200, 60, 50, 1)', // 背景颜色和透明度 horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平对齐方式 verticalOrigin: Cesium.VerticalOrigin.CENTER ,// 垂直对齐方式 } let labelEntity = new MchCesium.Label('Label-2', [104.461587,31.831195], option) console.log(labelEntity) // 聚焦 MchCesium.flyto(104.461587,31.831195) </script> </body> </html>

效果：

Demo地址：

https://mhc.ixiera.com/html/cesiumDemo/demo_label.html




 

2.show显示

基本用法：

labelEntity.show();

实例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>label-热力图</title> <script src="https://mhc.ixiera.com/mhc/main.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script> <script src="https://mhc.ixiera.com/mhc/main.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script> <style type="text/css"> .MchCesium-mapContainer{width: 100%;height: 100%;position: relative;overflow: hidden;} #btn_bar{position: absolute;bottom: 10px;left: 20px;z-index: 1000;} #btn_bar button{padding: 5px;border-radius: 3px;margin-bottom: 5px;} </style> </head> <body> <div id="containerId" class="MchCesium-mapContainer"></div> <div id="btn_bar"> <button onclick="showEven()">显示</button> <button onclick="hideEven()">隐藏</button> </div> <script type="text/javascript"> // 初始化MchCesium MchCesium.init('containerId'); // 测试数据 var option = { needTrans: true, extData:{name:'Label-2',type:'2',ggg:'sssxxxzz', lnglat:[104.461587,31.831195]}, zIndex: 1, text: 'Label-1', fontSize: '12px', // 字体样式 fontFamily: 'monospace', style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 文字样式 outlineColor: 'rgba(0, 225, 225, 1)', // 轮廓颜色 outlineWidth: 5, // 轮廓宽度 fillColor: '#ffffff', // 填充颜色 showBackground: true, // 是否显示背景 backgroundColor: 'rgba(200, 60, 50, 1)', // 背景颜色和透明度 horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平对齐方式 verticalOrigin: Cesium.VerticalOrigin.CENTER ,// 垂直对齐方式 } let labelEntity = new MchCesium.Label('Label-2', [104.461587,31.831195], option) console.log(labelEntity) // 聚焦 MchCesium.flyto(104.461587,31.831195) // 显示 function showEven(){ labelEntity.show(); } // 隐藏 function hideEven(){ labelEntity.hide(); } </script> </body> </html>

效果：

Demo地址：

https://mhc.ixiera.com/html/cesiumDemo/demo_label2.html




 

3.hide隐藏

基本用法：

labelEntity.hide();

实例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>label-热力图</title> <script src="https://mhc.ixiera.com/mhc/main.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script> <script src="https://mhc.ixiera.com/mhc/main.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script> <style type="text/css"> .MchCesium-mapContainer{width: 100%;height: 100%;position: relative;overflow: hidden;} #btn_bar{position: absolute;bottom: 10px;left: 20px;z-index: 1000;} #btn_bar button{padding: 5px;border-radius: 3px;margin-bottom: 5px;} </style> </head> <body> <div id="containerId" class="MchCesium-mapContainer"></div> <div id="btn_bar"> <button onclick="showEven()">显示</button> <button onclick="hideEven()">隐藏</button> </div> <script type="text/javascript"> // 初始化MchCesium MchCesium.init('containerId'); // 测试数据 var option = { needTrans: true, extData:{name:'Label-2',type:'2',ggg:'sssxxxzz', lnglat:[104.461587,31.831195]}, zIndex: 1, text: 'Label-1', fontSize: '12px', // 字体样式 fontFamily: 'monospace', style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 文字样式 outlineColor: 'rgba(0, 225, 225, 1)', // 轮廓颜色 outlineWidth: 5, // 轮廓宽度 fillColor: '#ffffff', // 填充颜色 showBackground: true, // 是否显示背景 backgroundColor: 'rgba(200, 60, 50, 1)', // 背景颜色和透明度 horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平对齐方式 verticalOrigin: Cesium.VerticalOrigin.CENTER ,// 垂直对齐方式 } let labelEntity = new MchCesium.Label('Label-2', [104.461587,31.831195], option) console.log(labelEntity) // 聚焦 MchCesium.flyto(104.461587,31.831195) // 显示 function showEven(){ labelEntity.show(); } // 隐藏 function hideEven(){ labelEntity.hide(); } </script> </body> </html>

效果：

Demo地址：

https://mhc.ixiera.com/html/cesiumDemo/demo_label2.html




 

4.remove销毁

基本用法：

labelEntity.remove();

实例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>label-热力图</title> <script src="https://mhc.ixiera.com/mhc/main.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script> <script src="https://mhc.ixiera.com/mhc/main.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script> <style type="text/css"> .MchCesium-mapContainer{width: 100%;height: 100%;position: relative;overflow: hidden;} #btn_bar{position: absolute;bottom: 10px;left: 20px;z-index: 1000;} #btn_bar button{padding: 5px;border-radius: 3px;margin-bottom: 5px;} </style> </head> <body> <div id="containerId" class="MchCesium-mapContainer"></div> <div id="btn_bar"> <button onclick="removeEven()">销毁</button> </div> <script type="text/javascript"> // 初始化MchCesium MchCesium.init('containerId'); // 测试数据 var option = { needTrans: true, extData:{name:'Label-2',type:'2',ggg:'sssxxxzz', lnglat:[104.461587,31.831195]}, zIndex: 1, text: 'Label-1', fontSize: '12px', // 字体样式 fontFamily: 'monospace', style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 文字样式 outlineColor: 'rgba(0, 225, 225, 1)', // 轮廓颜色 outlineWidth: 5, // 轮廓宽度 fillColor: '#ffffff', // 填充颜色 showBackground: true, // 是否显示背景 backgroundColor: 'rgba(200, 60, 50, 1)', // 背景颜色和透明度 horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平对齐方式 verticalOrigin: Cesium.VerticalOrigin.CENTER ,// 垂直对齐方式 } let labelEntity = new MchCesium.Label('Label-2', [104.461587,31.831195], option) console.log(labelEntity) // 聚焦 MchCesium.flyto(104.461587,31.831195) // 销毁 function removeEven(){ labelEntity.remove(); } </script> </body> </html>

效果：

Demo地址：

https://mhc.ixiera.com/html/cesiumDemo/demo_label3.html




 

5.getData获取数据

基本用法：

labelEntity.getData();

实例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>label-热力图</title> <script src="https://mhc.ixiera.com/mhc/main.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script> <script src="https://mhc.ixiera.com/mhc/main.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script> <style type="text/css"> .MchCesium-mapContainer{width: 100%;height: 100%;position: relative;overflow: hidden;} #btn_bar{position: absolute;bottom: 10px;left: 20px;z-index: 1000;} #btn_bar button{padding: 5px;border-radius: 3px;margin-bottom: 5px;} </style> </head> <body> <div id="containerId" class="MchCesium-mapContainer"></div> <div id="btn_bar"> <button onclick="getData()">获取label数据</button> </div> <script type="text/javascript"> // 初始化MchCesium MchCesium.init('containerId'); // 测试数据 var option = { needTrans: true, extData:{name:'Label-2',type:'2',ggg:'sssxxxzz', lnglat:[104.461587,31.831195]}, zIndex: 1, text: 'Label-1', fontSize: '12px', // 字体样式 fontFamily: 'monospace', style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 文字样式 outlineColor: 'rgba(0, 225, 225, 1)', // 轮廓颜色 outlineWidth: 5, // 轮廓宽度 fillColor: '#ffffff', // 填充颜色 showBackground: true, // 是否显示背景 backgroundColor: 'rgba(200, 60, 50, 1)', // 背景颜色和透明度 horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平对齐方式 verticalOrigin: Cesium.VerticalOrigin.CENTER ,// 垂直对齐方式 } let labelEntity = new MchCesium.Label('Label-2', [104.461587,31.831195], option) console.log(labelEntity) // 聚焦 MchCesium.flyto(104.461587,31.831195) // 获取 function getData(){ console.log('获取label数据') var data = labelEntity.getData(); console.log(data) } </script> </body> </html>

效果：

Demo地址：

https://mhc.ixiera.com/html/cesiumDemo/demo_label4.html




 

6.updatePosition更新位置

基本用法：

labelEntity.updatePosition(lnglat);

参数说明：

Lnglat：位置坐标（格式：[104.461587,31.832185]）；

实例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>label-热力图</title> <script src="https://mhc.ixiera.com/mhc/main.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script> <script src="https://mhc.ixiera.com/mhc/main.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script> <style type="text/css"> .MchCesium-mapContainer{width: 100%;height: 100%;position: relative;overflow: hidden;} #btn_bar{position: absolute;bottom: 10px;left: 20px;z-index: 1000;} #btn_bar button{padding: 5px;border-radius: 3px;margin-bottom: 5px;} </style> </head> <body> <div id="containerId" class="MchCesium-mapContainer"></div> <div id="btn_bar"> <button onclick="updateLabel()">更新label位置</button> </div> <script type="text/javascript"> // 初始化MchCesium MchCesium.init('containerId'); // 测试数据 var option = { needTrans: true, extData:{name:'Label-2',type:'2',ggg:'sssxxxzz', lnglat:[104.461587,31.831195]}, zIndex: 1, text: 'Label-1', fontSize: '12px', // 字体样式 fontFamily: 'monospace', style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 文字样式 outlineColor: 'rgba(0, 225, 225, 1)', // 轮廓颜色 outlineWidth: 5, // 轮廓宽度 fillColor: '#ffffff', // 填充颜色 showBackground: true, // 是否显示背景 backgroundColor: 'rgba(200, 60, 50, 1)', // 背景颜色和透明度 horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平对齐方式 verticalOrigin: Cesium.VerticalOrigin.CENTER ,// 垂直对齐方式 } let labelEntity = new MchCesium.Label('Label-2', [104.461587,31.831195], option) console.log(labelEntity) // 聚焦 MchCesium.flyto(104.461587,31.831195) // 更新 function updateLabel(){ labelEntity.updatePosition([104.461587,31.832185]); var data = labelEntity.getData(); console.log('更新label位置后') console.log(data) } </script> </body> </html>

效果：

Demo地址：

https://mhc.ixiera.com/html/cesiumDemo/demo_label5.html




 

7.updateText更新文本

基本用法：

labelEntity.updateText(text);

参数说明：

text: {string}文本内容（如'Label-1-899'）

实例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>label-热力图</title> <script src="https://mhc.ixiera.com/mhc/main.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script> <script src="https://mhc.ixiera.com/mhc/main.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script> <style type="text/css"> .MchCesium-mapContainer{width: 100%;height: 100%;position: relative;overflow: hidden;} #btn_bar{position: absolute;bottom: 10px;left: 20px;z-index: 1000;} #btn_bar button{padding: 5px;border-radius: 3px;margin-bottom: 5px;} </style> </head> <body> <div id="containerId" class="MchCesium-mapContainer"></div> <div id="btn_bar"> <button onclick="updateLabel()">更新label文字</button> </div> <script type="text/javascript"> // 初始化MchCesium MchCesium.init('containerId'); // 测试数据 var option = { needTrans: true, extData:{name:'Label-2',type:'2',ggg:'sssxxxzz', lnglat:[104.461587,31.831195]}, zIndex: 1, text: 'Label-1', fontSize: '12px', // 字体样式 fontFamily: 'monospace', style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 文字样式 outlineColor: 'rgba(0, 225, 225, 1)', // 轮廓颜色 outlineWidth: 5, // 轮廓宽度 fillColor: '#ffffff', // 填充颜色 showBackground: true, // 是否显示背景 backgroundColor: 'rgba(200, 60, 50, 1)', // 背景颜色和透明度 horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平对齐方式 verticalOrigin: Cesium.VerticalOrigin.CENTER ,// 垂直对齐方式 } let labelEntity = new MchCesium.Label('Label-2', [104.461587,31.831195], option) console.log(labelEntity) // 聚焦 MchCesium.flyto(104.461587,31.831195) // 更新 function updateLabel(){ labelEntity.updateText('Label-1-899'); var data = labelEntity.getData(); console.log('更新label文本后') console.log(data) } </script> </body> </html>

效果：

Demo地址：

https://mhc.ixiera.com/html/cesiumDemo/demo_label6.html

本文档来自—MCHMAP 丨 地图引擎平台