描述

  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 featuresLayer = null;
		var markerLayer = null;
		var poiSearchGroup = null; //poi搜索结果分组
		var poiManager = null;
		var layer = null;
        //初始化地图
        function onPageLoad() {
           layer = new SuperMap.Layer.CloudLayer();
			markerLayer = new SuperMap.Layer.Markers("maker");
			featuresLayer = new SuperMap.Layer.Vector();
			drawPolygon = new SuperMap.Control.DrawFeature(featuresLayer,SuperMap.Handler.Polygon, { multi: true });
			drawPolygon.events.on({"featureadded": drawCompleted});
			 map = new SuperMap.Map("mapDiv", { controls: [
                      new SuperMap.Control.PanZoomBar(),
                      new SuperMap.Control.Navigation({
                          dragPanOptions: {
                              enableKinetic: true
                          }
                      }),drawPolygon], allOverlays: true
            });
			map.addLayer(layer);
			map.addLayer(featuresLayer);
			map.addLayer(markerLayer);
			map.setCenter(new SuperMap.LonLat(12958399.4681885, 4852082.44060595),11);
			createPoiService();
        }
		function drawCompleted(args){
			drawPolygon.deactivate();
			var keyword = document.getElementById("txtKeyword").value;
			var geometry = new SuperMap.OSP.Utility.Geometry();
			if(keyword == ""){
				alert("关键字不能为空");
				return false;
			}
			var polygon = args.feature;
			for(var i=0;i<polygon.geometry.components[0].components[0].components.length - 1; i++){
				geometry.point2Ds.push(new SuperMap.OSP.Core.Point2D(polygon.geometry.components[0].components[0].components[i].x,polygon.geometry.components[0].components[0].components[i].y));
			}
			var getPOIsParam = new SuperMap.OSP.Service.GetPOIsByGeometryParam();
			var poiSearchService = new SuperMap.OSP.Service.POISearch();
			poiSearchService.search.url = "http://services.supermapcloud.com";
			getPOIsParam.geometry = geometry;
			getPOIsParam.keyword = keyword;
			getPOIsParam.expectCount = 10;
			getPOIsParam.startRecord = 0;
			getPOIsParam.datasetName = "PbeijingP";
			getPOIsParam.DataSourceName = 'china_poi';
			poiSearchService.getPOIsByGeometry(getPOIsParam,function(result){
				if(result.totalCount != 0){
					poiSearchGroup.clearPOIs();
					var strHtml = "<table>";
					for(var i = 0; i < result.records.length; i++){
						var poiInfo = result.records[i];
						var itemId = "poi_info_item_"+ i;
						strHtml += '<tr><td style="font-size:12px">';
						strHtml += '<div id="'+ itemId +'">';
						//添加图标
						strHtml += '<div style="float:left;"><img src="http://www.supermapcloud.com/cloudweb/images/' + (i + 1) + '.gif"></div>';
						//添加内容
						strHtml += '<div style="margin-left:20px; padding-left:4px;"><div style="clear:right;"><div style="float:right; width:50px;"></div></div>';
						//添加信息标题
						if(!!poiInfo.name) {
							strHtml += '<div id="poi_title"><span><strong>' + poiInfo.name + '</strong></span></div>';
							//<strong><a href="javascript:positionPoi(\'' + poiInfo.code + '\',1)">' + poiInfo.name + '</a></strong>
						}
						strHtml += '</div></div>';
						strHtml += '</td></tr>';
						//组织poi对象
						var poi = new SuperMap.OSP.UI.POI("search_POI_" + i);
						//poi.position = latToMetersPoi(poiInfo);
						poi.name = poiInfo.name;
						poi.address = poiInfo.address;
						poi.zipCode = poiInfo.zipCode;
						poi.affiliation = poiInfo.affiliation;
						poi.code = poiInfo.code;
						poi.telephone = poiInfo.telephone;
						poi.position = new SuperMap.OSP.Core.Point2D(parseFloat(poiInfo.x), parseFloat(poiInfo.y));
						var scaledContent = new SuperMap.OSP.UI.ScaledContent();
						//服务端约定好'|_['代表'<'符号,']_|'代表'>'符号
						scaledContent.content = 'http://www.supermapcloud.com/cloudweb/images/num_map/' + (i + 1) + '.png';
						scaledContent.offset = new SuperMap.OSP.Core.Point2D(0, 0);
						poi.title = poiInfo.name;
						poi.scaledContents = scaledContent;
						 poiSearchGroup.addPOIs(poi);
					}
					strHtml += "</table>";
					 document.getElementById("divInfo").innerHTML = strHtml;
					 poiManager.editPOIGroup(poiSearchGroup);
					poiManager.refreshPOI();
				}
			},function(error){
			
			});
		}
		function createPoiService(){
			poiManager = new SuperMap.OSP.UI.POIManager(map);
			poiManager.markerLayer = markerLayer;
			poiSearchGroup = new SuperMap.OSP.UI.POIGroup("poi_searchGroupId");
			poiSearchGroup.caption = "poi搜索分组";
			var scaledContent = new SuperMap.OSP.UI.ScaledContent();
			scaledContent.content = '<img src="images/num_map/1.png" />';
			scaledContent.offset = new SuperMap.OSP.Core.Point2D(0, 0);
			poiSearchGroup.scaledContents = scaledContent;
			poiManager.addPOIGroup(poiSearchGroup);
		}
		
		function searchByKeyword(){
			drawPolygon.activate();
		}
		
		function clearAll(){
			document.getElementById("divInfo").innerHTML = "";
			poiSearchGroup.pois = [];
			poiManager.editPOIGroup(poiSearchGroup);
			poiManager.refreshPOI();
			featuresLayer.removeAllFeatures();
		}

    </script>

</head>
<body onload="onPageLoad()">
    <div id="mapDiv" style="position: absolute; height:398px;width:498px; top: 0px;
        left: 0px;">
    </div>
    <div id="operatePanel" style="position: absolute;width: 200px; left: 500px; top: 0px;
        font-size: 12px; border: solid 1px #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>
            查询绘制范围内的POI。
         
        <input type="text" id="txtKeyword" value="银行" /><input type="button" value="绘制面" onclick="searchByKeyword()" />
		<input type="button" value="清除所有" onclick="clearAll()"/>
    </div>
    <div id="divInfo" style="position: absolute;width: 200px; left: 500px; top: 100px;
        font-size: 12px; z-index: 100; padding-bottom: 5px;
        background-image: url(../../images/toolbar_backgroundb.png);">
		</div>
	<div id="divInfo1" ></div>
</body>
</html>
</html>