超图js api距离/面积测量问题

最新推荐文章于 2022-12-07 20:19:29 发布

傅里叶大师

最新推荐文章于 2022-12-07 20:19:29 发布

阅读量938

点赞数

CC 4.0 BY-SA版权

文章标签： webgis supermap JavaScript

本文链接：https://blog.csdn.net/weixin_41138247/article/details/99852857

本文详细介绍使用SuperMap实现地图上绘制线并进行距离测量的方法。通过实例化SuperMap.Control.DrawFeature并设置样式，实现线的绘制。绘制完成后，利用MeasureService进行距离计算，展示总长度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现方式：将

SuperMap.Control.DrawFeature(lineLayer, SuperMap.Handler.Path, { multi: true })

实例化为drawLine，并通过map.addControl方法添加为地图控件。通过 drawLine.activate()激活控件，并设置事件监听drawLine.events.on()，绘完触发事件。

详细代码如下：

distanceMeasure: function () {

        var map, layer, drawLine, lineLayer,
            style = {
                strokeColor: "#304DBE",
                strokeWidth: 2,
                pointerEvents: "visiblePainted",
                fillColor: "#304DBE",
                fillOpacity: 0.8
            };

        url = ""//设置为调用的矢量服务


        //新建线矢量图层
        lineLayer = new SuperMap.Layer.Vector("lineLayer");
        //对线图层应用样式style（前面有定义）
        lineLayer.style = style;
    
        //创建画线控制，图层是lineLayer;这里DrawFeature(图层,类型,属性)；multi:true在将要素放入图层之前是否现将其放入几何图层中
       drawLine = new SuperMap.Control.DrawFeature(lineLayer, SuperMap.Handler.Path, { multi: true });

       // /*
       //  注册featureadded事件,触发drawCompleted()方法
       //  例如注册"loadstart"事件的单独监听
       //  events.on({ "loadstart": loadStartListener });
       //  */
        drawLine.events.on({ "featureadded": drawCompleted });

       //定义map
        map.addControl(drawLine);//添加画线控件
        addLayer();
        distanceMeasure();
        function addLayer() {
            map.addLayer(lineLayer); 
        }

        function distanceMeasure() {
           // clearFeatures();
            drawLine.activate();
        }

        //绘完触发事件
        function drawCompleted(drawGeometryArgs) {
            //停止画面控制
            drawLine.deactivate();
            //获得图层几何对象
            var geometry = drawGeometryArgs.feature.geometry,
                measureParam = new SuperMap.REST.MeasureParameters(geometry), /* MeasureParameters：量算参数类。 客户端要量算的地物间的距离或某个区域的面积*/
                myMeasuerService = new SuperMap.REST.MeasureService(url); //量算服务类，该类负责将量算参数传递到服务端，并获取服务端返回的量算结果
            myMeasuerService.events.on({ "processCompleted": measureCompleted });

            //对MeasureService类型进行判断和赋值，当判断出是LineString时设置MeasureMode.DISTANCE，否则是MeasureMode.AREA
            myMeasuerService.measureMode = SuperMap.REST.MeasureMode.DISTANCE;

            myMeasuerService.processAsync(measureParam); //processAsync负责将客户端的量算参数传递到服务端。
        }

        //测量结束调用事件
        function measureCompleted(measureEventArgs) {
            var distance = measureEventArgs.result.distance;
            var unit = measureEventArgs.result.unit;
            window.alert("总长度：" + distance + "米")
        }

        ////移除图层要素
        //function clearFeatures() {
        //    lineLayer.removeAllFeatures();
        //}
    },

其中需要注意的是该量算方法依托于iserver的服务，所以要将url设置为矢量要素的服务，而不是栅格要素。栅格要素服务没有提供单位。

参考文档：http://iclient.supermap.io/libs/iclient8c/index.html