SuperMap如何实现测量距离

超图中实现测距功能

效果如下：

实现代码：

1.构造map时，map.events.register("mousemove", undefined,mousePoint);注册监听鼠标mousemove，这里主要为解决测距时提示框遮挡鼠标点击事件用的。

//构造地图
function initWorldMap(){
    var mapControls = [
        new SuperMap.Control.ScaleLine({
            isImperialUnits:false
        }),
        new SuperMap.Control.Zoom(),
        new SuperMap.Control.Navigation({
            dragPanOptions: {
                enableKinetic: true
            }
        })
    ];

    if(location.hostname == "localhost") mapControls.push(new SuperMap.Control.LayerSwitcher());
    map = new SuperMap.Map(
        "map",{controls:mapControls},{theme: null}
    );
    map.allOverlays = true;
    map.minZoom = 1;
    map.maxZoom = 19;
    layerWorld= new SuperMap.Layer.CloudLayer();
    layerWorld.resolutions = null;
    layerWorld.displayInLayerSwitcher = false;
    map.addLayers([layerWorld,lineLayer, layerMineLevel,layerAreaLevel]);
    map.setCenter(new SuperMap.LonLat(11339634, 4588716), LEVEL_NONE);
    //在map中注册监听mousemove
    map.events.register("mousemove", undefined,mousePoint);
}

2.测距部分代码：

//测距功能-start
var measure = {},measurement = {},measurementClick = [];//测距doubleClick结果对象、测距move实时对象、测距click单击实时对象
var control;
var clickTimes=0;//测距click单击次数
var mouseMovePoint={};//记录当前鼠标移动到的位置

$scope.stopDistanceMeasure =  function() {
    if(control)control.deactivate();//注销控件
    destroyMeasurePopup();
    destroyMeasurementPopup();
    destroyMeasurementClickPopup();
}
function destroyMeasurePopup() {//销毁双击后的弹窗
    if(measure.popup)
        measure.popup.destroy();
    measure = {};
}
function destroyMeasurementPopup(){//销毁移动中的弹窗
    if(measurement.popup)
        measurement.popup.destroy();
    measurement = {};
}
function destroyMeasurementClickPopup(){//销毁单击后的弹窗
    if(measurementClick!=undefined && measurementClick!=null){
        for(var i=0;i<measurementClick.length;i++){
            if(measurementClick[i].popup)
                measurementClick[i].popup.destroy();
            //measurementClick[i] = {};
        }
        measurementClick = [];
        clickTimes=0;
    }
}

function mousePoint(e) {//需在map中注册监听mousemove
    mouseMovePoint = e.xy;
}

$scope.distanceMeasure = function() {
    $scope.stopDistanceMeasure();
    var measureControls = {//实例化 measureControls 控件，用于测量距离和面积
        line:new SuperMap.Control.Measure(//距离量算
            SuperMap.Handler.Path, {
                persist:true,//是否在量算结束后保留绘制的要素。当新的量算开始，控件取消激活获取取消量算时会清除绘制的要素。默认为：false，不保留
                immediate:true//当该属性为true时，量算过程中时时显示结果，同时会触发 “measurepartial” 事件。默认为false
            }
        )
    };
    //量算完成时触发 measure 事件，当点被添加到量算过程中时触发 measurepartial
    for(var key in measureControls){
        control = measureControls[key];
        control.events.on({
            "measure": handleMeasure,
            "measurepartial": handleMeasurements
        });
        //添加控件到 map 上
        map.addControl(control);
    }
    //激活控件
    control.activate();
}
//测量completed调用
function handleMeasure(event) {
    console.log('handleMeasure');
    destroyMeasurePopup();
    destroyMeasurementPopup();
    var points = event.geometry.components;
    measure.longitude = points[points.length-1].x;
    measure.longlat = points[points.length-1].y;
    var distance = event.measure;
    var unit = event.units;
    if(unit == 'km')distance = distance*1000;
    var css = "border: none;" +
        "padding: 3px;" +
        "padding-top: 3px;";
    var measureContent =
        "<div id='deleteMeasure' style='font-size: 12px;'>" +
            "<div style='font-size: 12px;float:left;'>" +
            "<span>总长:<span style='color:#ff4500'>" + Number(distance.toFixed(2)) +"</span>米 </span>" +
            "</div>" +
            "<div style='font-size: 12px;float:right;'>" +
            "<i class=\"fa fa-times\" style=\""+css+"\" aria-hidden=\"true\"></i>" +
            "</div>" +
        "</div>"
    var popup = new SuperMap.Popup.Anchored("measureDoubleClickWin",
        new SuperMap.LonLat(measure.longitude, measure.longlat),
        new SuperMap.Size(12,16),
        measureContent,
        null,
        false,
        null);
    popup.autoSize = true;
    measure.popup = popup;
    popup.setBorder("solid 1px red");
    map.addPopup(popup);
    $("#measureDoubleClickWin").css("height","");
    $("#measureDoubleClickWin_GroupDiv").css("height","");
    $("#measureDoubleClickWin_contentDiv\n").css("height","");
    $("#measureDoubleClickWin").css("margin-top","10px");
    $("#deleteMeasure").click($scope.stopDistanceMeasure);
}
//测量ing调用
function handleMeasurements(event) {
    var type = event.type;//获取传入参数 event 的 type 信息（click指示的是点击事件，move指示的是移动事件）
    if(type == 'move'){
        destroyMeasurePopup();
        destroyMeasurementPopup();
        var points = event.geometry.components;
        measurement.longitude = points[points.length-1].x;
        measurement.longlat = points[points.length-1].y;
        var distance = event.measure;
        var unit = event.units;
        if(unit == 'km')distance = distance*1000;
        var css = "border: none;" +
            "padding: 3px;" +
            "color:red;" +
            "padding-top: 3px;";
        var measureContent =
            "<div>" +
                "<div style='font-size: 12px'>" +
                    "<span>总长:<span style='color:#ff4500'>" + Number(distance.toFixed(2)) +"</span>米 </span>" +
                "</div>" +
                "<div>" +
                    "<span style='font-size: 12px;color:#9E9E9E;'>单机确定地点，双击结束</span>" +
                "</div>" +
            "</div>"
        var popup = new SuperMap.Popup.Anchored("measureMoveWin",
            new SuperMap.LonLat(measurement.longitude, measurement.longlat),
            new SuperMap.Size(12,16),
            measureContent,
            null,
            false,
            null);
        popup.autoSize = true;
        measurement.popup = popup;
        popup.setBorder("solid 1px red");
        map.addPopup(popup);
        $("#measureMoveWin").css("height","");
        $("#measureMoveWin_GroupDiv").css("height","");
        $("#measureMoveWin_contentDiv\n").css("height","");
        var size = map.getSize();
        if ( mouseMovePoint.x >size.w/2){
            $("#measureMoveWin").css("margin-right","10px");
        }
        if ( mouseMovePoint.y >size.h/2){
            $("#measureMoveWin").css("margin-bottom","10px");
        }
        if ( mouseMovePoint.x <= size.w/2){
            $("#measureMoveWin").css("margin-left","10px");
        }
        if ( mouseMovePoint.y <= size.h/2){
            $("#measureMoveWin").css("margin-top","10px");
        }
    }else if(type == 'click'){
        var points = event.geometry.components;
        var distance = event.measure;
        var unit = event.units;
        if(distance==0){
            destroyMeasurementClickPopup();
        }
        clickTimes+=1;
        measurementClick.push({});
        measurementClick[clickTimes-1].longitude = points[points.length-1].x;
        measurementClick[clickTimes-1].longlat = points[points.length-1].y;
        if(unit == 'km')distance = distance*1000;
        var measureContent =
            "<div>" +
                "<span style='font-size: 10px;color:#848282;'>"+Number(distance.toFixed(2))+"米</span>" +
            "</div>"
        if(distance==0) {
            measureContent =
                "<div>" +
                "<span style='font-size: 10px;color:#848282;'>起点</span>" +
                "</div>"
        }

        var popup = new SuperMap.Popup.Anchored("measureClickWin"+clickTimes,
            new SuperMap.LonLat(measurementClick[clickTimes-1].longitude, measurementClick[clickTimes-1].longlat),
            new SuperMap.Size(12,16),
            measureContent,
            null,
            false,
            null);
        popup.autoSize = true;
        measurementClick[clickTimes-1].popup = popup;
        popup.setBorder("solid 1px #848282");
        map.addPopup(popup);
        $("#measureClickWin"+clickTimes).css("height","");
        $("#measureClickWin"+clickTimes+"_GroupDiv").css("height","");
        $("#measureClickWin"+clickTimes+"_contentDiv\n").css("height","");
        $("#measureClickWin"+clickTimes+"_contentDiv\n").css("padding","0 8px");
        var size = map.getSize();
        if ( mouseMovePoint.x >size.w/2){
            $("#measureClickWin"+clickTimes).css("margin-right","10px");
        }
        if ( mouseMovePoint.y >size.h/2){
            $("#measureClickWin"+clickTimes).css("margin-bottom","10px");
        }
        if ( mouseMovePoint.x <= size.w/2){
            $("#measureClickWin"+clickTimes).css("margin-left","10px");
        }
        if ( mouseMovePoint.y <= size.h/2){
            $("#measureClickWin"+clickTimes).css("margin-top","10px");
        }
    }
}//测距功能-end

参考API：

https://iclient.supermap.io/libs/iclient8c/apidoc/files/SuperMap/Control/Measure-js.html