SuperMap如何实现测量距离(学习笔记)

SuperMap如何实现测量距离(学习笔记)

1.首先创建好标记图层和矢量图层，还有画线的控件

  var rangingLayer, polygonLayer, drawLine;

  //新建面标记图层
  rangingLayer = new SuperMap.Layer.Markers("Markers", { displayInLayerSwitcher: false });
  //新建面矢量图层
  polygonLayer = new SuperMap.Layer.Vector("polygonLayer");
  //创建画线控制，图层是lineLayer;这里DrawFeature(图层,类型,属性)；multi:true在将要素放入图层之前是否现将其放入几何图层中
  drawLine = new SuperMap.Control.DrawFeature(polygonLayer, SuperMap.Handler.Path, { multi: true });
  drawLine.events.on({ "featureadded": drawCompletedLine });
     function Ranging() {
        clearLayer();
        //map上添加控件
         map.addControl(drawLine);
         //激活控件
         drawLine.activate();
      }

2． 调用函数

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

            count = drawGeometryArgs.feature.geometry.components[0];
            for (var i = 0; i < drawGeometryArgs.feature.geometry.components[0].components.length; i++) {
                var x = count.components[i].x;//获取当前几何的界限上下左右除以2得到x轴，y同理
                var y = count.components[i].y;
                var size = new SuperMap.Size(25, 20),
                offset = new SuperMap.Pixel(-(size.w / 2), -size.h),
                icon = new SuperMap.Icon("/SuperMap/theme/images/marker.png", size, offset);
                marker = new SuperMap.Marker(new SuperMap.LonLat(x, y), icon);

                var centerPoint1 = new SuperMap.Geometry.Point(x, y);
                var circleVector1 = new SuperMap.Feature.Vector(centerPoint1);
                if (i == 0) {
                    circleVector1.style = {
                        strokeColor: "#CAFF70",
                        fillColor: "#DC143C",
                        strokeWidth: 2,
                        fillOpacity: 0,
                        label: "起点",
                        fontColor: "#000"
                    };
                }
                polygonLayer.addFeatures([circleVector1]);
                rangingLayer.addMarker(marker);

            }
            map.addLayers([rangingLayer, polygonLayer]);
            myMeasuerService.events.on({ "processCompleted": measureCompletedLine });

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

            myMeasuerService.measureMode = SuperMap.REST.MeasureMode.DISTANCE;

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

3.测量结束调用该事件

 function measureCompletedLine(measureEventArgs) {
            //console.log(measureEventArgs);
            var distance = measureEventArgs.result.distance;
            var unit = measureEventArgs.result.unit;
            var span = document.getElementById("result");
            span.innerHTML = parseInt(distance) + "米";
            $("#measure").attr('style', 'display:block');
            //layer.alert(span);
            for (var i = 0; i < count.components.length; i++) {
                if (i + 1 == count.components.length) {
                    o = 0;
                    DS = 0;
                }
                else {
                    var x = count.components[i].x;//获取当前几何的界限上下左右除以2得到x轴，y同理
                    var y = count.components[i].y;
                    var points = [new SuperMap.Geometry.Point(x, y),
                     new SuperMap.Geometry.Point(count.components[i + 1].x, count.components[i + 1].y)],
                      roadLine = new SuperMap.Geometry.LineString(points);
                    var measureParam = new SuperMap.REST.MeasureParameters(roadLine), /* MeasureParameters：量算参数类。 客户端要量算的地物间的距离或某个区域的面积*/
                     myMeasuerService = new SuperMap.REST.MeasureService(url); //量算服务类，该类负责将量算参数传递到服务端，并获取服务端返回的量算结果
                    myMeasuerService.events.on({ "processCompleted": measureCompletedLine1 });

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

                    myMeasuerService.measureMode = SuperMap.REST.MeasureMode.DISTANCE;

                    myMeasuerService.processAsync(measureParam); //processAsync负责将客户端的量算参数传递到服务端。
                }
            }
        }
        var o = 0;
        var DS = 0;
        function measureCompletedLine1(measureEventArgs) {
            //console.log(measureEventArgs);
            o++;
            var distance = measureEventArgs.result.distance;
            DS += distance;
            var unit = measureEventArgs.result.unit;
            var x = count.components[o].x;//获取当前几何的界限上下左右除以2得到x轴，y同理
            var y = count.components[o].y;
            var centerPoint1 = new SuperMap.Geometry.Point(x, y);
            var circleVector1 = new SuperMap.Feature.Vector(centerPoint1);

            circleVector1.style = {
                strokeColor: "#CAFF70",
                fillColor: "#DC143C",
                strokeWidth: 15,
                fillOpacity: 0,
                label: "距离" + parseInt(DS) + "米",
                fontColor: "#FF3300",
                fontWidth: 20,
            };
            polygonLayer.addFeatures([circleVector1]);
        }

4.清除图层

 function clearLayer() {
            polygonLayer.removeAllFeatures();
            rangingLayer.clearMarkers();
            $("#measure").attr('style', 'display:none');
        }

5.代码运行效果图