折线

1.构造方法：

var polyline = new MchCesium.Polyline(id, data, option);

实例

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);

2.参数说明

id: 折线实体id

data: 折线数据（折线点坐标），如 const data = [{longitude: 104.4612, latitude: 31.8347}, {longitude: 104.4712, latitude: 31.8147}]

option: 折线配置

option配置属性如下表：

3.show显示/hide隐藏折线

显示：polyline.show();

隐藏：polyline.hide();

4.remove销毁折线

实例：polyline.remove();

5.getPath获取折线路径数据

实例：let path = polyline.getPath()

6.closeEditor关闭折线编辑

polyline.closeEditor()

7.PolylineDrawer动态绘制折线

var polyline2 = new MchCesium.PolylineDrawer(id,option)

返回值说明：

id: 设置折线实体id

option: 折线配置(详细说明参考构造函数中option说明)

应用：在地图上点击点绘制折线双击结束绘制，结束后可通过拖动顶点编辑修改折线

示例：

8.完整代码示例

<div id="cesiumContainer"></div>   <div class="btnbar">     <button id="show">显示折线</button>     <button id="hide">隐藏折线</button>     <button id="draw">动态绘制</button>   </div>   <script>     const view3D = MchCesium.init('cesiumContainer', true)     let data = [ { longitude: "104.461587", latitude: "31.831385"}, { longitude: "104.481478", latitude: "31.831406"}, { longitude: "104.461278", latitude: "31.84115"} ] // 设置贴地线 let option1 = { color: 'rgba(223, 112, 255, 1)', // 颜色 width: 5, // 线宽 needTrans: true, // 需转世界坐标系 editable: false, // 是否可编辑 extData: { name: '贴底线-demo', type: '贴底线'}, // 自定义数据 zIndex: 5, // 显示层级 } let polyline = new MchCesium.Polyline('line1', data, option1) // 设置带高度的线 let data2 = [ { longitude: "104.481587", latitude: "31.831385", height: 1800 }, { longitude: "104.491478", latitude: "31.831406", height: 2200 }, { longitude: "104.481278", latitude: "31.84115", height: 2500 } ] let option2 = { color: 'rgba(120, 112, 255, 1)', // 颜色 width: 5, // 线宽 needTrans: true, // 需转世界坐标系 editable: false, // 是否可编辑 extData: { name: '带高度线-demo', type: '带高度线'}, // 自定义数据 zIndex: 5, // 显示层级 showHeight: true, // 显示高度 showHeightLine: true, // 设置对高线 // isArrow: true, // 显示箭头（默认方向箭头） // isArrowType: 1, // 设定指定样式方向箭头 } let polyline2 = new MchCesium.Polyline('line2', data2, option2) // 聚焦实体 MchCesium.viewer.zoomTo(MchCesium.viewer.entities) // 事件 document.getElementById('show').onclick = function () { polyline.show(); polyline2.show(); } document.getElementById('hide').onclick = function () { polyline.hide(); polyline2.hide(); } document.getElementById('draw').onclick = function () { let polyline2 = new MchCesium.PolylineDrawer('line2', option1) }   </script>

9.效果展示

Demo地址：

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