圆
1.构造方法：
let circleEntity1 = new MchCesium.Circle(id, cPosition, radius, option,ellipseGraphics)
实例
var option = {
needTrans: true,
extData: { name: 'cc1', type: '123', ggg: '就会加快和' },
}
var ellipseGraphics = {
fill: true,
material: Cesium.Color.BLUE,
}
let circleEntity = new MchCesium.Circle('circle-1', [104.460287, 31.831185], 50, option, ellipseGraphics)
效果
2.参数说明
id(String)：点标记id(全局唯一，不可重复)
cPosition(Array)：中心点坐标(经纬度数组，如[119.34, 32.34])
radius{number}：半径
option {object} 其他配置项。包含如下属性：needTrans(Boolean)：是否需要gcj转wgs84; 可选(默认：否false);extData(Object) 自定义数据;可选
ellipseGraphics{object} 同Cesium中ellipseGraphics配置，具体配置参考如下链接：http://cesium.xin/cesium/cn/Documentation1.62/EllipseGraphics.html
3.show显示/hide隐藏圆
显示：circleEntity1.show();
隐藏：circleEntity1.hide();
4. remove销毁圆
实例：circleEntity1.remove();
5. getCircleData获取圆相关数据
实例：var data = circleEntity1.getCircleData();
返回值说明：
center中线点坐标（三维笛卡尔空间直角坐标系Cartesian3）
radius半径
extData 自定义数据
6.CircleDrawer绘制圆形
实例：let circleEntity2 = new MchCesium.CircleDrawer(id, option, ellipseGraphics)
参数说明：
id(String)：点标记id(全局唯一，不可重复)
option {object} 其他配置项。包含如下属性：needTrans(Boolean)：是否需要gcj转wgs84,可选(默认：否false);extData(Object) 自定义数据;可选
ellipseGraphics{object} 同Cesium中ellipseGraphics配置，具体配置参考如下链接：http://cesium.xin/cesium/cn/Documentation1.62/EllipseGraphics.html
绘制方法：开启绘制后，鼠标左键点击地图以此为中心点移动鼠标随即生成圆，待绘制出自己想要的大小后鼠标右键点击地图则结束绘制；
实例
var option = {
needTrans: true,
extData: { name: 'cc1', type: '123', ggg: '就会加快和' },
}
var ellipseGraphics = { fill: true, material: Cesium.Color.RED, zIndex: 6, }
let circleEntity = new MchCesium.CircleDrawer('circle-2', option, ellipseGraphics)
7.完整代码示例
<!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>Document</title>
<style>
body {position: relative;}
.btnbar {position: absolute;top: 10px;left: 10px;}
button {margin: 10px;border: solid 1px #ccc;border-radius: 3px;padding: 5px 10px;}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div class="btnbar">
<button id="show">显示圆</button>
<button id="hide">隐藏圆</button>
<button id="get-data-btn">获取数据</button>
<button id="draw">动态绘制圆</button>
</div>
<script>
const view3D = MchCesium.init('cesiumContainer', true)
var option = {
needTrans: true,
extData: {
name: 'cc1',
type: '123',
ggg: '就会加快和'
},
}
var ellipseGraphics = {
fill: true,
material: Cesium.Color.BLUE,
zIndex: 6,
outline: true, // 一个布尔属性，指定是否勾勒出椭圆
outlineColor: Cesium.Color.RED, // 一个属性，指定轮廓的 颜色 。
outlineWidth: 3, // 一个数字属性，指定轮廓的宽度
}
let circleEntity1 = new MchCesium.Circle('circle-1', [104.460287, 31.831185], 50, option, ellipseGraphics)
MchCesium.viewer.zoomTo(MchCesium.viewer.entities)document.getElementById('show').onclick = function() {
circleEntity1.show()
}
document.getElementById('hide').onclick = function() {
circleEntity1.hide()
}
document.getElementById('get-data-btn').onclick = function() {
var data = circleEntity1.getCircleData();
console.log(data);
}
var option2 = {
needTrans: true,
extData: {
name: 'cc1',
type: '123',
ggg: '就会加快和'
},
}
var ellipseGraphics2 = {
fill: true,
material: Cesium.Color.RED,
zIndex: 6,
outline: true, // 一个布尔属性，指定是否勾勒出椭圆
outlineColor: Cesium.Color.BLUE, // 一个属性，指定轮廓的 颜色 。
outlineWidth: 20, // 一个数字属性，指定轮廓的宽度
}
document.getElementById('draw').onclick = function() {
console.log('触发绘制圆')
let circleEntity2 = new MchCesium.CircleDrawer('circle-2', option2, ellipseGraphics2)
}
</script>
</body>
</html>
效果：
Demo地址：
返回顶部
热线电话
微信
扫一扫