专栏首页跟牛老师一起学WEBGIS点图层叠加与事件响应

点图层叠加与事件响应

概述:

用过百度地图的童鞋一定很羡慕百度地图POi的展示,地图切片+事件响应,以前一直在考虑这个问题,今天,将我的思考结果做一个汇报给大家。下面,将我的实现思路说明一下:1、当图层添加完成或者图层添加完毕并地图四至发生变化时候,从后台获取当前视野内的POI点数据;2、注册mousemove事件,根据鼠标的位置生成一个很小的矩形框,判断POI点数据是否落在了该小矩形框内,是,将其高亮。

实现效果:

实现代码:

前台代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>openlayers map</title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8089/lzugis/plugin/OpenLayers-2.13.1/theme/default/style.css"/>
    <style type="text/css">
        html, body, #map{
            padding:0;
            margin:0;
            height:100%;
            width:100%;
            font-size:12px;
        }
        .highlight-label{
		    position: absolute;
		    z-index: 999;
		    padding:3px 5px;
		    background: #fff;
		    border: 1px solid #999;
		    border-radius: 3px;		    
		}
    </style>
    <script type="text/javascript" src="http://localhost:8089/lzugis/plugin/OpenLayers-2.13.1/OpenLayers.js"></script>
    <script src="http://localhost:8089/lzugis/plugin/jquery/jquery-1.8.3.js"></script>
    <script src="http://localhost:8089/lzugis/example/openlayers/ol2/extend/Grid.js"></script>
    <script>
        var map;
        $(window).load(function() {
            var format = 'image/png';
            var bounds = new OpenLayers.Bounds(
                    73.45100463562233, 18.16324718764174,
                    134.97679764650596, 53.531943152223576
            );
            var options = {
                controls: [],
                maxExtent: bounds,
                maxResolution: 0.2403351289487642,
                projection: "EPSG:4326",
                units: 'degrees'
            };
            map = new OpenLayers.Map('map', options);
            var tiled = new OpenLayers.Layer.WMS(
                    "Geoserver layers - Tiled",
                    "http://localhost:8088/geoserver/lzugis/wms",
                    {
                        "LAYERS": 'province',
                        "STYLES": '',
                        format: format
                    },
                    {
                        buffer: 0,
                        displayOutsideMaxExtent: true,
                        isBaseLayer: true,
                        yx : {'EPSG:4326' : true}
                    }
            );
            var wms = new OpenLayers.Layer.WMS("NASA Global Mosaic",
                    "http://localhost:8088/geoserver/lzugis/wms",
                    {
                        layers: "capital",
                        transparent: true
                    }, {
                        opacity: 1,
                        singleTile: true
                    });
            map.addLayers([tiled,wms]);
            map.addControl(new OpenLayers.Control.Zoom());
            map.addControl(new OpenLayers.Control.Navigation());
            map.addControl(new OpenLayers.Control.MousePosition());
            map.zoomToExtent(bounds);            
            addPoiInteraction();
            map.events.register("moveend", map, function(){
            	addPoiInteraction();        	
            });
        });
        function addPoiInteraction(){
        	var bbox = map.getExtent().toBBOX();
        	var url = "http://localhost:8081/lzugis/poi/getdata.do";
        	var para = {
        		bbox:bbox
    		};
        	var poidata=[];
        	$.get(url,para,function(data){
        		data = eval("(" + data + ")");  
        		poidata = data;
        		map.events.register("mousemove", map, function(e){
        			$(".highlight-label").remove();
        			map.layerContainerDiv.style.cursor = "default";
        			var zoom = map.getZoom();
        			var offset = 0.5/(zoom+1);  
        			var mousept = map.getLonLatFromPixel(e.xy);
        			var extent = new OpenLayers.Geometry.Polygon([new OpenLayers.Geometry.LinearRing([
            			    new OpenLayers.Geometry.Point(mousept.lon-offset,mousept.lat-offset),
            			    new OpenLayers.Geometry.Point(mousept.lon+offset,mousept.lat-offset),
            			    new OpenLayers.Geometry.Point(mousept.lon+offset,mousept.lat+offset),
            			    new OpenLayers.Geometry.Point(mousept.lon-offset,mousept.lat+offset),
            			    new OpenLayers.Geometry.Point(mousept.lon-offset,mousept.lat-offset)
        			    ])
        			]);
        			for(var i=0; i<poidata.length;i++){
        				var poid = poidata[i];
        				var poi = new OpenLayers.Geometry.Point(poid.lon, poid.lat);
        				if(extent.containsPoint(poi)){
        					map.layerContainerDiv.style.cursor = "pointer";
                            var lonlat = new OpenLayers.LonLat(poid.lon, poid.lat);
                            var scrPt = map.getLayerPxFromLonLat(lonlat);
                            var labelDiv = $("<div/>").addClass("highlight-label").css("top",(scrPt.y)+"px")
                                .css("left",(scrPt.x+10)+"px").html(poid.name);
                            $(map.div).append(labelDiv)
                            break;
                        }
        			}
        		});
        	}); 
        }
    </script>
</head>
<body>
<div id="map">
</div>
</body>
</html>

后台代码:

    public List getPoiData(String bbox){
    	StringBuffer sb = new StringBuffer();
    	String[] extent = bbox.split(",");
    	double xmin=Double.parseDouble(extent[0]),
    			ymin=Double.parseDouble(extent[1]),
    			xmax=Double.parseDouble(extent[2]),
    			ymax=Double.parseDouble(extent[3]);
    	sb.append("select name,lon,lat from capital where 1=1");
    	sb.append(" and lon>=?");
    	sb.append(" and lon<=?");
    	sb.append(" and lat>=?");
    	sb.append(" and lat<=?");
    	return this.jt.queryForList(sb.toString(),new Object[]{xmin, xmax, ymin, ymax});
    }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • openlayers实现画圆

    通过OpenLayers.Control.DrawFeature和OpenLayers.Handler.Point实现在地图上画圆心。

    lzugis
  • 基于openlayers实现聚类统计展示

    在前面的博文中讲述过基于Arcgis for js如何实现聚类统计展示,在本文中讲述如何基于openlayers实现聚类统计的效果,Arcgis for js聚...

    lzugis
  • Arcgis4js实现链家找房的效果

    买房的各位亲们不知是否留意过链家的"地图找房",这样的功能对于使用者来说,是非常方便的,大家可通过连接(https://bj.lianjia.com/ditu/...

    lzugis
  • 前端语言基础【第二篇:JavaScript】

    在js里面需要获取到input里面的值,如果把script标签放到head 里面会出现问题。

    BWH_Steven
  • 基于openlayers实现聚类统计展示

    在前面的博文中讲述过基于Arcgis for js如何实现聚类统计展示,在本文中讲述如何基于openlayers实现聚类统计的效果,Arcgis for js聚...

    lzugis
  • OpenLayers3基础教程——OL3 介绍control

    相比较Ol2的control,OL3显得特别少,下图分别为Ol2和Ol3的control:

    lzugis
  • 你知道Android Nougat (牛轧糖)有哪些新鲜口味吗?

    Android 7.0 经过5个开发者预览版本的改善,终于在8.22日正式推送,并确定版本名为Nougat(牛轧糖)。结合本人的体验,在此简单的聊聊Andr...

    open
  • Node + Express + Mysql的CMS小结

    因为之前用过上述的组合完成过很多系统,而这一次是为了实现一个帮助系统的静态网页发布。因为很久不写,重点说遇到的几个坑:

    meteoric
  • WPF 跨线程 UI 的方法

    本文告诉大家如何在 WPF 使用多线程的 UI 的方法 在很多的时候都是使用单线程的 UI 但是有时候需要做到一个线程完全处理一个耗时的界面就需要将这个线程作为...

    林德熙
  • 2000字带有详细公式地总结:朴素和半朴素贝叶斯

    贝叶斯决策论是概率框架下实施决策的基本方法,它基于概率和误判误差的最小化来进行判别,是一种分类问题的解法。

    double

扫码关注云+社区

领取腾讯云代金券