MCHMAP 丨 地图引擎
MCHMAP 丨 地图引擎 > 快速开始 > MCHMAP > 折线

折线

1.构造方法：

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

实例

var lineSty = {         
      color: 'rgba(223, 112, 255, 1)',         
      width: 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 polyline = new MchCesium.Polyline('LINE-1', lineData, lineSty);

2.参数说明

id: 折线实体id

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

option: 折线配置

option配置属性如下表：

属性数据类型说明
editableBoolen是否可编辑，可选(默认：否false)
colorString线路颜色，可选(默认：red)
widthNumber线路宽度，可选(默认：2)
typeString线路类型（solid实线，dashed虚线），可选(默认：solid)
dashLengthNumber虚线长度(仅当type=dashed时起作用)
isArrowBoolen是否显示方向箭头，可选(默认否false)
isArrowTypeNumber仅当isArrow =true起作用，设置指定样式isArrowType=1
zIndexNumber显示层级，可选(默认1)
needTransBoolen是否需要gcj02 to wgs84，可选(默认：否false)
extDataObject用户自定义属性，可选
showHeightBoolen是否显示高度(默认：否false)
showHeightLineBoolen是否显示高度线 (默认：否false)，仅当showHeight=true时起作用

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.完整代码示例

<!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>折线</title>
        <style>
            body {position: relative;}
            .btnbar {position: absolute;top: 10px;left: 10px;}
            button {margin: 10px;border: solid 1px #ccc;border-radius: 3px;}
        </style>
    </head>
    <body>
        <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, // 设置对高线
            }
            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>
    </body>
</html>

9.效果展示

Demo地址：

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

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