openlayers通过点击地图弹出窗口完成属性查询

最新推荐文章于 2024-05-21 16:00:17 发布

好人就该被人拿枪指着？

最新推荐文章于 2024-05-21 16:00:17 发布

阅读量2.2k

点赞数

文章标签： javascript css3 html arcgis

本文链接：https://blog.csdn.net/qq765331706/article/details/121997548

版权

一、成果展示

再上一篇文章中，已经完成了在geoserver中发布地图并通过openlayres加载到自己的页面中，这一章我们通过openlayer来实现地图的属性查询。（下一篇文章展示高亮的代码，跟空间定位一起写比较好）
OPENLAYERS属性查询

二、代码

需要注意的地方

js代码中【创建矢量图层对象】注释下的代码里url填自己发布的geoJSON数据地址（上一篇文章提到过，不知道在哪找地址的，可以去上一篇文章看看）
js中【ol地图对象】代码里面可以自己定义地图最开始的定位与缩放大小
js中最后的【设置单机处理弹窗】代码中可以设置弹窗中体现的内容（特别注意的是，本人使用的数据是有name这个属性的，如果没有，可以自己改正）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" href="static/ol.css" type="texts"><link>
<script type="text/javascript" src="static/ol.js"></script>
<style>
.ol-popup {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.6) ;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 280px;
}
.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: "";
}

</style>
</head>
<body>
	<div id="popup" class="ol-popup" >
	    <a href="#" id="popup-closer" class="ol-popup-closer">关闭</a>
	    <div id="popup-content"></div>
	</div>
	<div id="map"></div>
	
	
	<script type="text/javascript">
	//获取dom对象
	var container = document.getElementById("popup");
	var content = document.getElementById("popup-content");
	var closer = document.getElementById("popup-closer");
	//创建矢量图层对象
	var YY_layer =  new ol.layer.Vector({
	       title: 'add Layer',
	       source: new ol.source.Vector({
	            projection: 'EPSG:4326',
	            url: "这里填上一篇文章中提到的自己通过geoserver发布的geoJSON数据地址", 
	            format: new ol.format.GeoJSON()
	          })
	       })
	//创建图层对象
    var layers = [
		new ol.layer.Tile({
	           source: new ol.source.OSM()
	        }),
		YY_layer
    ];
	//创建Overlayer叠加层对象
	var overlay = new ol.Overlay({
	    element: container,
	    autoPanAnimation: {
	        duration: 250
	    }
	});

	//弹窗的关闭
	closer.onclick = function() {
	    overlay.setPosition(undefined);
	    return false;
	};
	//ol地图对象
    var map = new ol.Map({
	    target: 'map',
	    layers: layers,
	    overlays:[overlay],
	    view: new ol.View({
	    	//这里的fromLonLat([112.392, 28.546])是位置信息，自己可以修改为需要的地址
	        center: ol.proj.fromLonLat([112.392, 28.546]),
	        zoom: 9
	    	})
	    });

	//设置单机处理弹窗
	map.on("click", function(e) {
	        var pixel = map.getEventPixel(e.originalEvent);

	        //forEachFeatureAtPixel的原理，是遍历操作
	        var feature = map.forEachFeatureAtPixel(pixel,
	            function (feature,) {
	                return feature;
	            });
	        console.log(feature);
	        var coordinate = e.coordinate;
	        content.innerHTML = "<p>地区信息：</p><code>"+'地区名:'+feature.values_.name + "</code>";
	        overlay.setPosition(coordinate);
	    
	});
	</script>
</body>
</html>

好人就该被人拿枪指着？

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
3
评论
openlayers通过点击地图弹出窗口完成属性查询

一、成果展示再上一篇文章中，已经完成了在geoserver中发布地图并通过openlayres加载到自己的页面中，这一章我们通过openlayer来实现地图的属性查询。（下一篇文章展示高亮的代码，跟空间定位一起写比较好）二、代码需要注意的地方js代码中【创建矢量图层对象】注释下的代码里url填自己发布的geoJSON数据地址（上一篇文章提到过，不知道在哪找地址的，可以去上一篇文章看看）js中【ol地图对象】代码里面可以自己定义地图最开始的定位与缩放大小js中最后的【设置单机处理弹窗】代码中可
复制链接

扫一扫