openlayers3中实现WMS点图层的事件相应
2017-10-11 本文已影响58人
牛老师讲GIS
概述
本文讲述如何在Openlayers3中实现WMS点图层的展示，并实现鼠标移动经过该点时展示相关信息，并可点击。
效果
LZUGIS
实现代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ol3 draw</title>
<link rel="stylesheet" type="text/css" href="../../../plugin/ol4/ol.css"/>
<style type="text/css">
body, #map {
border: 0px;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-size: 13px;
overflow: hidden;
}
.city-name{
z-index: 9;
background: #ffffff;
border: 1px solid #1bcbb4;
border-radius: 3px;
padding: 2px;
position: absolute;
}
</style>
<script type="text/javascript" src="../../../plugin/ol4/ol.js"></script>
<script type="text/javascript" src="../../../plugin/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
var map;
function init(){
var untiled = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://localhost:6080/geoserver/bj_grid/wms',
params: {'FORMAT': 'image/png',
VERSION: '1.1.1',
LAYERS: 'bj_grid:capital'
},
serverType: 'geoserver'
})
});
var center = ol.proj.transform([103.847, 36.0473],'EPSG:4326','EPSG:3857');
map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}),
target: 'map',
layers: [untiled],
view: new ol.View({
projection: new ol.proj.Projection({
code: 'EPSG:3857',
units: 'm'
}),
center: center,
zoom: 5
})
});
map.on('pointermove', function(evt) {
var view = map.getView();
var viewResolution = view.getResolution();
var _data = [...];
var _coord = evt.coordinate;
var _c = new ol.geom.Circle(_coord, viewResolution*6);
for(var i=0;i<_data.length;i++){
var _d = _data[i];
var _lonlat = [_d.properties.x, _d.properties.y];
coord = ol.proj.transform(_lonlat,'EPSG:4326','EPSG:3857');
if(_c.intersectsCoordinate(coord)){
map.getViewport().style.cursor="pointer";
addCityName(_d);
break;
}else{
flag = false;
$(".city-name").remove();
map.getViewport().style.cursor="default";
}
}
});
function addCityName(d){
$(".city-name").remove();
var _scrPt = map.getPixelFromCoordinate(coord);
var _label = $("<div/>").addClass("city-name").css({
"top":_scrPt[1]+"px",
"left":_scrPt[0]+16+"px"
}).html(d.properties.x.toFixed(3));
map.getViewport().appendChild(_label[0]);
}
}
</script>
</head>
<body onLoad="init()">
<div id="map">
</div>
</body>
</html>
| 类型 | 内容 |
|---|---|
| 1004740957 | |
| 公众号 | lzugis15 |
| niujp08@qq.com | |
| webgis群 | 1004740957 |
| Android群 | 337469080 |
| GIS数据可视化群 | 458292378 |
技术博客
CSDN：http://blog.csdn.NET/gisshixisheng
博客园：http://www.cnblogs.com/lzugis/
在线教程
http://edu.csdn.Net/course/detail/799
Github
https://github.com/lzugis/
联系方式
| 类型 | 内容 |
|---|---|
| 1004740957 | |
| 公众号 | lzugis15 |
| niujp08@qq.com | |
| webgis群 | 1004740957 |
| Android群 | 337469080 |
| GIS数据可视化群 | 458292378 |
