描述

  1. 本示例介绍:右键点击地图,可以在地图上绘制圆的中点,可输入想查询的词,点击确定即可得到结果,查询结果为圆面区域内的所有POI,圆的半径默认为1Km。

代码 (文件格式为 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" src="http://www.supermapcloud.com/cloudweb/script/jquery-1.5.1.min.js"></script>	
    <script type="text/javascript" src="http://www.supermapcloud.com/cloudweb/script/contextmenu.js"></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();
			 map = new SuperMap.Map("mapDiv", { controls: [
                      new SuperMap.Control.PanZoomBar(),
                      new SuperMap.Control.Navigation({
                          dragPanOptions: {
                              enableKinetic: true
                          }
                      })], allOverlays: true
            });
			map.addLayer(layer);
			map.addLayer(featuresLayer);
			map.addLayer(markerLayer);
			map.setCenter(new SuperMap.LonLat(12958399.4681885, 4852082.44060595),11);
			createPoiService();
			createMenu();
        }
		var bufferCenter = null;
		var popup = null;
		function openWindow(){
			var poi = this;
			bufferCenter = poi.lonlat;
			var infowinHtml = "";
			infowinHtml = '<div style="width:auto;height:auto;">';
			infowinHtml += '<div class="div1">';
			infowinHtml += '<div id="title" style="font-size:14px;font-weight: bold;padding-top: 0px;">标注点</div>';
			infowinHtml += '<div id="near" style="display:block">';
			infowinHtml += '<ul style="font-size:12px">';
			infowinHtml += '<li><a href="javascript:nearBySearchParam(\'公园\')">公园</a></li>';
			infowinHtml += '</ul>'
			infowinHtml += '</div>';
			if(popup == null){
				popup = new SuperMap.OSP.Core.InfoWindow("chicken", 
                                     poi.lonlat,
                                     new SuperMap.Size(260,148),
									 infowinHtml,
                                     null, true,closeWindow);
				map.addPopup(popup);
			}else{
				//popup.lonlat = new SuperMap.LonLat(poi.lon,poi.lat);
				popup.setContentHTML(infowinHtml);
				popup.updatePosition();
				popup.show();
			}
		}
		function closeWindow(){
			popup.hide();
		}
		function createMenu(){
			 var style = new SuperMap.MenuStyle({
				backColor: "#FFFFFF",
				overColor: "#D6E9F8",
				speed: 100});
			var items = new Array();
			items.push(new SuperMap.MenuItem({
				title:"添加点标记",
				callBack:function(e, pos){
					selectMenuPoint("marker",pos);
				}
				}));
			 var contextMenu = new SuperMap.ContextMenu({
				items: items,
				style: style,
				mapContainer: document.getElementById("mapDiv")
		});
		}
		var mark;
		function selectMenuPoint(type,point){
			markerLayer.clearMarkers();
			featuresLayer.removeAllFeatures();
			popup = null;
			var markPos = map.getLonLatFromPixel(new SuperMap.Pixel(point.x, point.y));
			var size = new SuperMap.Size(25,25);
			var icon = new SuperMap.Icon('marker.png', size);
			mark = new SuperMap.Marker(new SuperMap.LonLat(markPos.lon,markPos.lat),icon);
			mark.events.register("click",mark,openWindow);
			markerLayer.addMarker(mark);
		}
		
		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 nearBySearchParam(keyword){
			var radius = 1000;
			var searchGeometry = markRoundGeometry(bufferCenter,radius);
			var getPOIsParam = new SuperMap.OSP.Service.GetPOIsByGeometryParam();
			var poiSearchService = new SuperMap.OSP.Service.POISearch();
			getPOIsParam.geometry = round;
			getPOIsParam.keyword = keyword;
			getPOIsParam.expectCount = 10;
			getPOIsParam.startRecord = 0;
			poiSearchService.search.url = "http://services.supermapcloud.com";
			getPOIsParam.datasetName="PbeijingP";
			getPOIsParam.DataSourceName = 'china_poi';
			poiSearchService.getPOIsByGeometry(getPOIsParam, function(result){
				if(result.totalCount != 0){
					poiSearchGroup.clearPOIs();
					for(var i = 0; i < result.records.length; i++){
						var poiInfo = result.records[i];
						//组织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);
					}
					 poiManager.editPOIGroup(poiSearchGroup);
					poiManager.refreshPOI();
					markerLayer.addMarker(mark);
					featuresLayer.removeAllFeatures();
					featuresLayer.style = {fillColor:"#0000FF",pointRadius:5,strokeOpacity:0.2,fillOpacity:0.2};
					var feature = new SuperMap.Feature.Vector(markRoundGeometry(bufferCenter,radius));
					featuresLayer.addFeatures(feature);
					featuresLayer.style = {fillColor: "#7C9DE4",strokeColor: "#7A9BE2",pointRadius:6,strokeWidth:4};
					map.setCenter(bufferCenter,15);
				}
			},function(error){
			
			});
		}
		
		var round = null;
		function markRoundGeometry(center, radius) {
			var d360 = Math.PI * 2;
			var sidePoints = [];
			var n = 36;
			var d = d360 / n;
			for (var i = 1; i <= n; i++) {
				var rd = d * i;
				var x = center.lon + radius * Math.cos(rd);
				var y = center.lat + radius * Math.sin(rd);
				var sidePoint = new SuperMap.Geometry.Point(x, y);
				sidePoints.push(sidePoint);
			}
			var line = new SuperMap.Geometry.LinearRing(sidePoints);
			var roundRegion = new SuperMap.Geometry.Polygon(line);
			round = new SuperMap.OSP.Utility.Geometry();
			center = new SuperMap.OSP.Core.Point2D(center.lon,center.lat);
			sidePoints[0] = new SuperMap.OSP.Core.Point2D(sidePoints[0].x,sidePoints[0].y);
			var param = [center,sidePoints[0]];
			round.point2Ds = param;
			return roundRegion;
		}
		

    </script>

</head>
<body onload="onPageLoad()">
    <div id="mapDiv" style="position: absolute; height:398px;width:498px; top: 0px;
        left: 0px;">
    </div>
</body>
</html>