Openlayers 踩坑日记

最新推荐文章于 2024-03-14 11:31:36 发布

原创最新推荐文章于 2024-03-14 11:31:36 发布 · 932 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用OpenLayers库创建离线瓦片地图，包括地图层的添加、动态点的绘制及交互事件的处理。通过具体代码示例，展示了如何在地图上添加图标，并为每个图标绑定信息，实现点击图标时弹出包含该点信息的窗口。

Openlayers 踩坑日记

创建瓦片地图、、使用的是全能电子地图下载器扒的高德地图瓦片。

 //创建地图
    var map = new ol.Map({
        view: new ol.View({ 
            center: center,
            zoom: 12
        }),
        target: 'map'
    });

    // 添加一个使用离线瓦片地图的层
    var offlineMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            // 设置本地离线瓦片所在路径，由于例子里面只有一张瓦片，页面显示时就只看得到一张瓦片。
            url: '/maps/{z}/{x}/{y}.png'
        })
    })

在地图上添加动态点：

var  point = new ol.Feature({
             geometry:new ol.geom.Point(ol.proj.fromLonLat([108.94716751861571+i*0.003, 34.26993638433956+i*0.003])),
             //给feature添加信息。。。绑定点的信息
             	 data: {
             	 		SGDD:i,
       	   		 }  
    		});
    	 point.setStyle(new ol.style.Style({
          	 image:new ol.style.Icon({
             src:'static/img/redpoint.png',
            })
          })
       ); 
      source = new ol.source.Vector({
    		features:[point]
    		
	      });
	 layer = new ol.layer.Vector({
       source: source
    	});
	map.addLayer(layer);

为地图上每一个事故点添加弹出框：

 map.on('click',function(e){
   //在点击时获取像素区域 
   var pixel = map.getEventPixel(e.originalEvent); 
   map.forEachFeatureAtPixel(pixel,function(feature){ 
   console.log(feature);
   content.innerHTML = "SGDD:"+feature.H.data.SGDD;
   //coodinate存放了点击时的坐标信息
    var coodinate = e.coordinate; 
    //设置弹出框内容，可以HTML自定义 
     //设置overlay的显示位置 
     overlay.setPosition(coodinate); 
     //显示overlay 
     map.addOverlay(overlay); 
     });

全部代码：

<html>
<head>
	<title>demo</title>
	<link rel="stylesheet" type="text/css" href="static/ol/ol.css">
	<script type="text/javascript" src="static/ol/ol.js" charset="UTF-8"></script>
	<style type="text/css">
		  
        .ol-popup {
            position: absolute;
            background-color: white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 12px;
            left: -50px;
        }
        .ol-popup:after, .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }
        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }
        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
        }
        .ol-popup-closer:after {
            content: "x";
        }
	</style>
</head>
 
<body onload="init()">
<div style="width:100%;">
	<div id="map" style="width:100%;"></div>
</div>
<div id="popup" class="ol-popup"> 
	<a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div> 
</div>
	<script type="text/javascript">
		function init(){
		//中心坐标
		var center = ol.proj.transform([108.94716751861571, 34.26993638433956], 'EPSG:4326', 'EPSG:3857');
	 //创建地图
    var map = new ol.Map({
        view: new ol.View({ 
            center: center,
            zoom: 12
        }),
        target: 'map'
    });

    // 添加一个使用离线瓦片地图的层
    var offlineMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            // 设置本地离线瓦片所在路径，由于例子里面只有一张瓦片，页面显示时就只看得到一张瓦片。
            url: '/maps/{z}/{x}/{y}.png'
        })
    });
    map.addLayer(offlineMapLayer);
    var source =null;
    var layer =null;
    
    var overlay =null;
    var container = document.getElementById("popup");
    var content = document.getElementById("popup-content"); 
    var closer = document.getElementById("popup-closer");
    
    for(var i=0;i<4;i++){
       var  point = new ol.Feature({
             geometry:new ol.geom.Point(ol.proj.fromLonLat([108.94716751861571+i*0.003, 34.26993638433956+i*0.003])),
             //给feature添加信息
             	 data: {
             	 		SGDD:i,
       	   		 }  
    		});
    	 point.setStyle(new ol.style.Style({
          	 image:new ol.style.Icon({
             src:'static/img/redpoint.png',
            })
          })
       ); 
      source = new ol.source.Vector({
    		features:[point]
    		
	      });
	 layer = new ol.layer.Vector({
       source: source
    	});
	map.addLayer(layer);
  }
      overlay = new ol.Overlay({ 
	   //设置弹出框的容器 
	   element: container, 
	   //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
	    autoPan: true });
	    //点击关闭按钮  关闭弹窗 
	    closer.onclick = function () { 
	    //不显示弹出框 
	    overlay.setPosition(undefined); 
	    closer.blur(); 
	    return false; 
	    };
   map.on('click',function(e){
   //在点击时获取像素区域 
   var pixel = map.getEventPixel(e.originalEvent); 
   map.forEachFeatureAtPixel(pixel,function(feature){ 
   console.log(feature);
   content.innerHTML = "SGDD:"+feature.H.data.SGDD;
   //coodinate存放了点击时的坐标信息
    var coodinate = e.coordinate; 
    //设置弹出框内容，可以HTML自定义 
     //设置overlay的显示位置 
     overlay.setPosition(coodinate); 
     //显示overlay 
     map.addOverlay(overlay); 
     });
  });
  }
</script>
</body>
</html>