超图中实现测距功能
效果如下：
image.png
实现代码：
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
网友评论