openlayers3自定义事件

最新推荐文章于 2024-09-28 13:04:07 发布

L.傲骨雄风

最新推荐文章于 2024-09-28 13:04:07 发布

阅读量1.5k

点赞数

分类专栏： openlayer

本文链接：https://blog.csdn.net/xlp789/article/details/83544571

版权

openlayer 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Ol3 popup</title>
	<link rel="stylesheet" type="text/css" href="./css/ol.css"/>
	<style type="text/css">
		body, #map {
			border: 0px;
			margin: 0px;
			padding: 0px;
			padding: 0px;
			padding: 0px;
			width: 100%;
			height: 100%;
			font-size: 13px;
		}
	
	</style>
	<script type="text/javascript" src="./js/ol.js"></script>
	<script type="text/javascript" src="./js/jquery.js"></script>
	<script type="text/javascript">
		function init(){
			var format = 'image/png';
			var bounds = [73.4510046356223, 18.1632471876417,
				134.976797646506, 53.5319431522236];
			// 创建新的图层来加载wfs的要素
			var wfsVectorLayer = new ol.layer.Vector({
				source: new ol.source.Vector({
				format: new ol.format.GeoJSON({
				geometryName: 'the_geom'
				}),
				url: 'http://localhost:8081/geoserver/map/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=map:capital&maxFeatures=50&outputFormat=application/json'
			   })
			   });	
			
			// 在原点处创建一个feature
			var feature1 = new ol.Feature({
					geometry: new ol.geom.Point([117, 38])
			});

			// 并设置为半径为100像素的圆，用红色填充
			feature1.setStyle(new ol.style.Style({
				image: new ol.style.Circle({
                radius: 30,
                fill: new ol.style.Fill({
                    color: 'red'
                })
				})
			}));
     		var map = new ol.Map({
				controls: ol.control.defaults({
					attribution: false
				}),
				target: 'map',
				layers: [ new ol.layer.Tile({
							source: new ol.source.OSM({
							projection:ol.proj.getTransform('EPSG:3857','EPSG:4326')
							})
						}),
						wfsVectorLayer,
						new ol.layer.Vector({source: new ol.source.Vector({
							features: [feature1]
				})})],
				
				view: new ol.View({
					projection: 'EPSG:4326',
					center:[117,42],
					zoom:6
				})
			});
			map.getView().fit(bounds, map.getSize());
			
			map.on('pointermove', function(event){
			  if(map.hasFeatureAtPixel(event.pixel)){
					map.forEachFeatureAtPixel(event.pixel, function(feature){
					// 为移动到的feature发送自定义的mousemove消息
					feature.dispatchEvent({type: 'mousein'});
					});
				}
				else
				{
					feature1.setStyle(new ol.style.Style({
						image: new ol.style.Circle({
							radius: 30,
							fill: new ol.style.Fill({
							color: 'red'
							})
						})
					}));
				}	
			});
	         // 为feature1注册自定义事件mousemove的监听
			feature1.on('mousein', function(){
			// 修改feature的样式为半径100像素的园，用蓝色填充
				this.setStyle(new ol.style.Style({
					image: new ol.style.Circle({
						radius: 30,
						fill: new ol.style.Fill({
                        color: 'blue'
						})
					})
				}));
			});
		}
	</script>
</head>
<body onLoad="init()">

<div id="map"></div>

</body>
</html>