点标记
1.构造方法：
const marker = new MchCesium.Marker(id, billboardGraphics, position, option)
代码实例：
let billboardGraphics = {
image: 'https://mhc.ixiera.com/mhc/img/st_uav.png',
width:50,
height: 35,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
}
let labelGraphics = {
text: '这是marker的label',
font: '14px Microsoft YaHei',
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -40)
}
let markerPosition = [104.336329, 35.979957, 3000]
let option = {
needTrans: true,
editable: false,
showHeightLine: true,
label: labelGraphics ,
}
let marker = new MchCesium.Marker('testMarker', billboardGraphics, markerPosition, option)
marker.createMarkerEntity();
效果：
2.参数说明
id(String)：点标记id(全局唯一，不可重复)
billboardGraphics(Object)：点标记的图标配置。具体配置参考如下链接：http://cesium.xin/cesium/cn/Documentation1.62/BillboardGraphics.html
position(Array)：点标记位置(经纬度数组，如[119.34, 32.34])
option(Object)：其他配置项。包含如下属性：needTrans(Boolean)：是否需要gcj转wgs84; editable(Boolean)：点标记是否可编辑; showHegihtLine(Boolean)：是否显示点标记到地面的铅垂线及投影。extData(Object) 自定义数据;label(Object)：可选，如果点标记想带Label，则设置此项，具体配置参考如下链接：http://cesium.xin/cesium/cn/Documentation1.62/LabelGraphics.html
3.createMarkerEntity() 生成点标记实体，并在地图上渲染
在用构造方法构造marker实例后，需要使用该方法在地图上生成maker实体。
实例:marker.createMarkerEntity()
4.changeMarkerEditable(editable) 改变点标记的可编辑性
在生成marker实例后，可以使用该方法动态改变点标记是否可编辑。
参数说明：editable(Boolean)：点标记是否可编辑，默认值为true。
实例：marker.changeMarkerEditable(false)
5. destroy() 销毁点标记实例
实例：marker.destroy()
6.show() 在地图上显示点标记
实例：marker.show()
7.hide() 在地图上隐藏点标记
实例：marker.hide()
8.setZIndex(zIndex) 设置点标注的层级
参数说明：zIndex(Number)：点标注的显示层级。
实例：marker.setZIndex(100)
9.setPosition(position) 设置点标记的位置
参数说明：position(Array): 数组的第一个元素为经度，第二个元素为纬度，如[119.33, 38.22]。
实例：marker.setPosition([119.16, 39.04])
10.setLabel(labelGraphics) 给点标记设置其label
参数说明：labelGraphics(Object):label实体的配置。具体参考如下链接：http://cesium.xin/cesium/cn/Documentation1.62/LabelGraphics.html
实例：
marker.setLabel({ text: '这是marker的label', font: '14px Microsoft YaHei', verticalOrigin: Cesium.VerticalOrigin.BOTTOM, pixelOffset: new Cesium.Cartesian2(0, -40) })
11.onDarg(callback) 监听点标记的拖拽事件，并在拖拽结束后调用callback
参数说明：callback(Function):拖拽点标记结束后的回调函数。callback中的参数e含有两个属性，分别为position(Object)拖拽后点标记的屏幕坐标，target(Object)地图上的点标记实体。
实例：
marker.onDrag(function (e) { console.log(e) })
12.onClick(callback) 监听点标记的点击事件，并在点击后调用callback
参数说明：callback(Function):点击点标记后的回调函数。callback中的参数e含有两个属性，分别为position(Object)点击后点标记的屏幕坐标，target(Object)地图上的点标记实体。
实例：
marker.onClick(function (e) { console.log(e) })
13.onRightClick(callback) 监听点标记的右键点击事件，并在点击后调用callback
参数说明：callback(Function):点击点标记后的回调函数。callback中的参数e含有三个属性，分别为position(Object)点击后点标记的屏幕坐标，target(Object)地图上的点标记实体，extData自定义数据。
实例：
marker.onRightClick(function (e) { console.log(e) })
14.完整代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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/Cesium3DTile.js"></script>
<title>Marker</title>
<style type="text/css">
.btnbar{
position: absolute;
top: 10px;
left: 10px;
}
.btnbar button{
padding: 5px 10px;
margin-right: 15px;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div class="btnbar">
<button id="show">显示点标注</button>
<button id="hide">隐藏点标注</button>
<button id="addLabel">添加Label</button>
<button id="destroy">销毁点标注</button>
<button id="toggleEditable">切换可编辑性</button>
</div>
<script type="text/javascript">
const view3D = MchCesium.init('cesiumContainer', true)
let billboardGraphics = {
image: 'https://mhc.ixiera.com/mhc/img/st_uav.png',
width:50,
height: 35,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
}
let markerPosition = [104.336329, 35.979957, 3000]
let editable = false;
let option = {
needTrans: true,
editable: editable,
showHeightLine: true ,
}
let marker = new MchCesium.Marker('testMarker', billboardGraphics, markerPosition, option)
marker.createMarkerEntity()
document.getElementById('addLabel').addEventListener('click', function () {
marker.setLabel({
text: '这是marker的label',
font: '14px Microsoft YaHei',
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -40)
})
})
document.getElementById('show').addEventListener('click', function () {
marker.show()
})
document.getElementById('hide').addEventListener('click', function () {
marker.hide()
})
document.getElementById('destroy').addEventListener('click', function () {
marker.destroy()
})
document.getElementById('toggleEditable').addEventListener('click', function () {
editable = !editable
marker.changeMarkerEditable(editable)
})
marker.onDrag(function (e) {
console.log('点标记被拖动', e)
})
marker.onClick(function (e) {
console.log('点标记被点击', e)
})
MchCesium.viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(104.336329, 35.979957, 3000)
})
</script>
</body>
</html>
15.展示效果
Demo地址：
返回顶部
热线电话
微信
扫一扫