openlayers 渲染wkt数据，标记中心值并弹窗

最新推荐文章于 2025-07-28 20:28:17 发布

nc-sf

最新推荐文章于 2025-07-28 20:28:17 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： GIS 文章标签： openlayers 中心点弹窗

本文链接：https://blog.youkuaiyun.com/u013925989/article/details/46969187

GIS 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何使用OpenLayers解析WKT地理数据，并通过获取几何中心点来标记并弹出包含详细信息的窗口。内容包括计算几何对象的中心点，以及根据中心点创建弹窗展示名称、电话和地址等信息。

function drawFatureSelectRow(vwkt,vl,name,phone,address){
		 var feature = new OpenLayers.Format.WKT().read(vwkt);		
		 var gml = new OpenLayers.Format.GML();
		 var style = {
			        strokeColor: "blue",
			        strokeWidth: 1,
			        pointerEvents: "visiblePainted",
			        fillColor: "red",
			        fillOpacity: 0.5
			    };
		 feature.style=style;
		 var geo = feature.geometry;
	    /* <span style="color:#ff0000;">var bo = geo.getBounds();
	     var latlon=bo.getCenterLonLat()</span>; 可以获得中心点，但如果是不规则线面状数据，中心点会偏移到不在图象上*/
		 var vlistv=geo.getVertices();
		 var latlon;
		 if(vlistv.length>1){
			 var vmid;
			 if(vlistv.length%2==0){
				 vmid=vlistv.length/2
			 }else{
				 vmid=(vlistv.length+1)/2;
			 }
			 
			 alert(vmid);
			 latlon=vlistv[vmid]; 
		 }else{
			 latlon= geo.getVertices()[0];
		 }
		 	     
	     var lat = latlon.y;
	     var lon = latlon.x;
	     
	     vectorLayer.addFeatures([feature]);
	     locatebylonlatSelectRow(lon,lat,name,phone,address);
	     map.moveTo([lon, lat], vl, new Object());
		 
	}
	
	
	function locatebylonlatSelectRow(lon,lat,name,phone,address){
		var AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
            'autoSize': true,
            'maxSize': new OpenLayers.Size(280, 270)
        });
        var feature = new OpenLayers.Format.WKT().read("POINT(" + lon + " " + lat + ")");
        var point = feature.geometry.getCentroid();
        var lonlat = new OpenLayers.LonLat(point.x, point.y);
        var popupClass = AutoSizeFramedCloud;
        var popupContentHTML = "<label>名称： </label>" + name + "<br/>" + "<label>电话： </label>" + phone+ "<label>地址： </label>" + address;
        if(address==="rode"){
        	popupContentHTML= "<label>名称： </label>" + name ;
        }
        addMarkerForLocate(lonlat, popupClass, popupContentHTML, true, true);
	}
	
	
	//弹窗
	function addMarkerForLocate(ll, popupClass, popupContentHTML, closeBox, overflow) {

	    var feature = new OpenLayers.Feature(markerLayer, ll);
	    feature.closeBox = closeBox;
	    feature.popupClass = popupClass;
	    feature.data.popupContentHTML = popupContentHTML;
	    feature.data.overflow = (overflow) ? "auto" : "hidden";

	    var marker = feature.createMarker();

	    var markerClick = function(evt) {
	        if (this.popup == null) {
	            this.popup = this.createPopup(this.closeBox);
	            map.addPopup(this.popup);
	            this.popup.show();
	        } else {
	            this.popup.toggle();
	        }
	        currentPopup = this.popup;
	        OpenLayers.Event.stop(evt);
	    };
	    marker.events.register("mousedown", feature, markerClick);

	    markerLayer.addMarker(marker);
	}