描述

  1. 提供两点之间的实地长度测量服务,面状区域的面积、周长测量服务。 本示例介绍:点击“绘制线并量算长度”按钮,程序会计算出绘制出的线的长度值。

代码 (文件格式为 UTF-8)


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>SuperMap Online Service Platform Sample - 地图测量</title>
	<script type="text/javascript" src="http://services.supermapcloud.com/iserver/api?key=aXtbCHyF5FSZn6TeeEywSW0u8TDHrwC0IjFudD2j5xM%3D&v=1.1"></script>
    <script type="text/javascript">
        var map = null;
        var layer = null;
        var featuresLayer = null;
		var measureLine,measurePoint;
		var poiMeasurementGroup;
        function onPageLoad() {
            layer = new SuperMap.Layer.CloudLayer();
			markersLayer = new SuperMap.Layer.Markers("maker");
			featuresLayer = new SuperMap.Layer.Vector();
			measureLine = new SuperMap.Control.DrawFeature(featuresLayer,SuperMap.Handler.Path, { multi: true });
			measureLine.events.on({"featureadded": drawCompleted});
			measurePoint = new SuperMap.Control.DrawFeature(featuresLayer,SuperMap.Handler.Point, { multi: true });
			featuresLayer.style = {fillColor: "#7C9DE4",strokeColor: "#7A9BE2",pointRadius:6,strokeWidth:4};
			 map = new SuperMap.Map("mapDiv", { controls: [
                      new SuperMap.Control.PanZoomBar(),
                      new SuperMap.Control.Navigation({
                          dragPanOptions: {
                              enableKinetic: true
                          }
                      }),measureLine,measurePoint], allOverlays: true
            });
			map.addLayer(layer);
			map.addLayer(featuresLayer);
			map.addLayer(markersLayer);
			map.setCenter(new SuperMap.LonLat(12958399.4681885, 4852082.44060595),11);
			createPoiService();
        }
				//初始化POI管理
		function createPoiService(){
			poiManager = new SuperMap.OSP.UI.POIManager(map);
			poiManager.markerLayer = markersLayer;
			poiMeasurementGroup = new SuperMap.OSP.UI.POIGroup("poigroup_measurement_id");
			poiManager.addPOIGroup(poiMeasurementGroup);
			//路径分析起始点、终止点初始化
		}
		//测距
var iClientMeter = 0;
function setMeasure(){			
	featuresLayer.style ={fillColor: "red",strokeColor: "red",pointRadius:6};
	measureLine.activate();
}
//绘制长度
var measureIndex = 0;
var measureHashMap = null;
function drawCompleted(drawGeometryArgs){
	var featureIds = new Array();
	measureLine.deactivate();
	if(measureHashMap == null){
		measureHashMap = new SuperMap.OSP.Core.HashMap();
	}
	iClientMeter = 0;
	var index = ++measureIndex;
	var geometry = drawGeometryArgs.feature;
	featureIds.push(geometry.id);
	var start,end;
	var pois = new Array();
	for(var k = 0; k < geometry.geometry.components[0].components.length; k++){
		var point = new SuperMap.Geometry.Point(geometry.geometry.components[0].components[k].x,geometry.geometry.components[0].components[k].y);
		if(k == 0){
			start = point;
		}else if(k == (geometry.geometry.components[0].components.length -1)){
			end = point;
		}
		var pointFeature = new SuperMap.Feature.Vector(point);
		featureIds.push(pointFeature.id);
		pointFeature.style  = {fillColor: "#fffff",strokeColor: "#FF0000",pointRadius:5,strokeOpacity:0.5,fillOpacity:0.5};
		featuresLayer.addFeatures(pointFeature);
		pois.push(point);
	}
	measureHashMap.put(index,featureIds);
	for(var i = 0; i < pois.length; i++){
		pois[i] = new SuperMap.LonLat(pois[i].x,pois[i].y);
		pois[i] = SuperMap.OSP.Core.Utility.metersToLatLon(pois[i]);
	}
	for(var j = 0; j < pois.length; j++){
		if(j != (pois.length -1)){
			var p = new SuperMap.LonLat(pois[j].lon,pois[j].lat);
			var p1 = new SuperMap.LonLat(pois[j+1].lon,pois[j+1].lat);
			iClientMeter += SuperMap.Util.distVincenty(p,p1);
		}
	}
	for(var z = 0; z < pois.length; z++){
		//将线段的点变成莫卡托
		pois[z] = SuperMap.OSP.Core.Utility.latLonToMeters(pois[z]);
	}

	var poiStart = new SuperMap.OSP.UI.POI("poi_start_id" + index);
	var startContent = new SuperMap.OSP.UI.ScaledContent();
	startContent.content = "images/begin.gif";
	startContent.offset = new SuperMap.OSP.Core.Point2D(10,-10);
	poiStart.scaledContents = startContent;
	poiStart.position = new SuperMap.OSP.Core.Point2D(start.x,start.y);
	poiStart.imageSize = new SuperMap.Size(25,18);
	var poiClose = new SuperMap.OSP.UI.POI("" + index);
	var closeScaled = new SuperMap.OSP.UI.ScaledContent();
    closeScaled.content = "images/close1.gif";
	closeScaled.offset = new SuperMap.OSP.Core.Point2D(-20,-5);
    poiClose.scaledContents = closeScaled;
	poiClose.title = "清除本次测量结果";
	poiClose.imageSize = new SuperMap.Size(12,12);
    poiClose.position = new SuperMap.OSP.Core.Point2D(end.x,end.y);
	poiClose.addEventListerner("click",clearMeasure);
	var poiMeasurement = new SuperMap.OSP.UI.POI("poi_measurement_id" + index);
	poiMeasurement.position = new SuperMap.OSP.Core.Point2D(end.x,end.y);
	poiMeasurement.imageSize = new SuperMap.Size(96,20);
	var scaledContent = new SuperMap.OSP.UI.ScaledContent();
	scaledContent.offset = new SuperMap.OSP.Core.Point2D(15,-15);
	poiMeasurement.scaledContents = scaledContent;
	var distance = iClientMeter;
	var distanceinfo = '';
	if(distance * 100 < 100){
		distanceinfo = "总长:<font color=red>" + parseInt(distance * 100) * 10 + "</font>米";
	}else{
	    distanceinfo = "总长:<font color=red>" + distance.toFixed(2) + "</font>公里";
	}
	  scaledContent.content = '<div style="width:96px;height:17px;padding:2px;border:1px solid #ff0000;text-align:center; background-color:white;font-size:12px">' + distanceinfo + '</div>';
	  poiMeasurement.scaledContents = scaledContent;
	 poiMeasurementGroup.addPOIs([poiStart,poiMeasurement,poiClose]);
     poiManager.editPOIGroup(poiMeasurementGroup);
     poiManager.refreshPOI();
}
//清除量算结果
function clearMeasure(){
	var id = this.id;
	iClientMeter = 0;
	var array = measureHashMap.get(id);
	poiMeasurementGroup.removePOIs(id);
	poiMeasurementGroup.removePOIs("poi_measurement_id"+id);
	poiMeasurementGroup.removePOIs("poi_start_id"+id);
	poiManager.editPOIGroup(poiMeasurementGroup);
    poiManager.refreshPOI();
	var featureArray = new Array();
	for(var i = 0; i < array.length; i++){
		var feature = featuresLayer.getFeatureById(array[i]);
		featureArray.push(feature);
	}
	featuresLayer.removeFeatures(featureArray);
	
	measureHashMap.remove(id);
	measureIndex--;
}

        
    </script>

</head>
<body onload="onPageLoad()">
    <div id="mapDiv" style="position: absolute;  height:398px;width:498px; top: 0px;
        left: 0px; border: solid 1px">
    </div>
    <div id="operatePanel" style="position: absolute; width: 200px; left:500; top:0px;
        font-size: 12px; border: solid 0px #969696; z-index: 100; padding-bottom: 5px;
        background-image: url(../../images/toolbar_backgroundb.png);">
        <font style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 100%">地图测量:</font>
        <p>
            点击“绘制线并量算长度”按钮,程序会计算出绘制出的线的长度值。</p>
        <input type="button" value="绘制线并量算长度" onclick="setMeasure()" style="background-color: #CCCCCC;
            border: double" />
    </div>
    <div id="divInfo" style="clear: both">
    </div>
</body>
</html>