SuperMap怎么实现距离测量

SuperMap怎么实现距离测量

开发工具与关键技术：Visual Studio 2015 SuperMap怎么实现距离测量
作者：李国旭
撰写时间：2020年4月29日
在SuperMap中怎么去实现这个功能呢？那么在做这个功能之前，第一个要做的就是把地图加载出来，没有地图是操作不了的；无论是距离测量、面积量算、范围查询等等…这些都是在有地图的基础上做出来的。“SuperMap.Include.js”先把这个超图的js的脚本文件引用
1、首先，声明“rangingLayer, polygonLayer, drawLine”这三个参数，第二创建好标记图层和矢量图层，还有画线的控件；具体的内容请看下方的代码。

var map, layerWorld, rangingLayer, polygonLayer, drawLine
function onPageinit() {
//新建面标记图层//新建面矢量图层
  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 });
//初始化地图
    map = new SuperMap.Map("map", {//要绑定的html标签ID
        controls: [new SuperMap.Control.Navigation() ,
new SuperMap.Control.Zoom()
]});
//初始化图层
layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null,{maxResolution:"auto"});
//监听图层信息加载完成事件
layer.events.on({"layerInitialized":addLayer});
}
function RangLayer () {
        clearLayer();
         map.addControl(drawLine); //map上添加控件
         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负责将客户端的量算参数传递到服务端。
}

（注意）：上面说到了调用函数方法，这里需要注意一个细节的问题，尤其是第一步那个地方；本人在这里犯了一个错，就是那些方法位置放错地方了，它就会报错说：某某的方法未定义（Undefined）或者是地图的的点击事件（onload）这些错等等…所以说，我们写代码的时候要注意一下代码的整洁，那句代码该放哪里的就给它放哪里，不能乱放；要不然它就会在编译js脚本的时候出错。
//测量结束调用该函数

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) + "米";
    $("#Diastimeter").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 {//获取当前几何的界限上下左右除以2得到x轴，y同理
            var x = count.components[i].x;            
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、然后呢最后一步清除绘画的点和线的图层，在关掉量算的结果的同时清除图层。

5、代码写完了，我们运行代码的结果和量算结果由起点到终点的距离，如下图所示：