带你剖析WebGis的世界奥秘----瓦片式加载地图

爱被打了一巴掌 2022-09-25 02:25 264阅读 0赞

*  WebGIS应用程序的页面能够通过HTML、JSP、ASP或任何任何类型的Web页文件构成，其特殊之处在于，它的请求提交的方法并不是通过常用的 “超链接”形式，而是使用鼠标与Web浏览器上地图进行的，因此，我们开发WebGIS应用程序的过程，就是考虑如何向一台Web服务器发送地图请求或其 它类型请求，并将响应进行解释显示的过程
 *  加载瓦片最后我们是呈现出地图的形式，所以我们需要一个div带装在这个map，这个在前端很容易实现

*  有了这个我们的地图就有了安身之所，下面我们就开始我们的加载步骤，具体步骤我放在脚本里面，在定义map的时候我们我们需要两个参数，第一个是div的名称，第二个是map的一些设置

var options = {
    		projection : "EPSG:4326",
    		center : new OpenLayers.LonLat(105.5, 39.5)
    	};
    var map = new OpenLayers.Map('rcp2_map', options);

*  有了map我们继续向map里面加入我们的瓦片也就是所谓的layer(层)关键是我们的层去哪里拿，我先贴个我服务上的数据地图代码

var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
    	// geoserver所在服务器地址
    			// "http://192.168.1.120:8080/geoserver/wms",
    			"http://192.168.1.15:8088/geoserver/china-rail/wms", {
    				layers : "china-rail:大公鸡"
    			});

*  如果你没有在GeoService上发布过，你也不用着急，人家官网给你提供了数据，你可以从官网拿层来用

var wms= new OpenLayers.Layer.OSM();

*  两种方式随便你选择，拿到图层我们只要进入map就行了

// 添加wms图层
    	map.addLayer(wms);

到此我们的地图就显示了，我们来看看想过吧，我拿的是我服务的地图，可以不怎么好看，我们只要效果  
![这里写图片描述][aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA1MTQwMjIxNjcw]

*  滚动鼠标滚动键放大地图显示  
    ![这里写图片描述][aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA1MTQxMDUwOTQx]
 *  在地图显示方面我们可以设置的，比如说以什么地方中心显示呢，以多打的比例显示呢，设置中心点在上面的代码已经提到了，下面我贴个比例显示的代码

map.zoomTo(5); // 以第5级方式显示地图

*  有没有看到我上面地图左右下角的一些功能，相信你们现在是没有的，这些都是控制功能，需要我们手动加入

// 添加control空间
    	map.addControl(new OpenLayers.Control.LayerSwitcher());
    	map.addControl(new OpenLayers.Control.MousePosition());
    	map.addControl(new OpenLayers.Control.ScaleLine());
    	map.addControl(new OpenLayers.Control.Scale);

*  下面我们在看看点击Map事件和定位功能吧。
    
     *  定位说白了就是以某个点中心显示，然后在把这个点给高亮标注出来我们先标注这个点在这支中心点
     *  点击很容易只要我们注册一下事件就好了，我选择在Map控件上面注册这个点击事件，你们根据自己的需要选择控件注

//拿到坐标
    	var jd = Number(document.getElementById('jd').value);
    	var wd = Number(document.getElementById('wd').value);
    	if(document.getElementById('jd').value==""){
    		jd=116.3;
    	}
    	if(document.getElementById('wd').value==""){
    		wd=39.9;
    	}
    	//定义一个box层
    	var boxes = new OpenLayers.Layer.Boxes("Boxes");
    	if (this.box != null) {
    		this.box.display(false); //清除上一次的区域标记
    	}
    	//定义一个Bounds
    	bounds = new OpenLayers.Bounds();
    	//有参数生成两个经纬度
    	var lonlat1 = new OpenLayers.LonLat(jd, wd);
    	var lonlat2 = new OpenLayers.LonLat(jd, wd);
    	bounds.extend(lonlat1);
    	bounds.extend(lonlat2);//生成一个经纬度范围的bounds
    	box = new OpenLayers.Marker.Box(bounds);
    	box.events.register("click", box, function(e) {
    		this.setBorder("blue");
    	});//注册box的点击事件
    	boxes.addMarker(box);
    	map.addLayer(boxes);
    	map.centerLayerContainer(lonlat1,6);
    	map.panTo(lonlat1); //平移到范围的中心点

map.events.register("click", map, function(e) {
    		var t=e;
    		//获取经纬度
    		var lonlat = map.getLonLatFromPixel(e.xy);
    		
    	});

*  研究了这个Openlayers好几天感觉这个显示的地图不好，不好确定具体信息，下面介绍一个升级版本OpenLayers3的技术
 *  前面步骤一样，在注册map的时候有了不同

*  看看效果  
    ![这里写图片描述][aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA1MTQxNjM2MTMw]
 *  双击放大地图显示  
    ![这里写图片描述][aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA1MTQxNzA3NTY4]
 *  这里的定位和点击就草草说说了

点击
    map.on('singleclick',mapClick);
    
          function mapClick(e){
              var pixel = map.getEventPixel(e.originalEvent);
              var featureInfo = map.forEachFeatureAtPixel(pixel,
                      function (feature, layer) {
                          return {feature:feature,layer:layer};
                      });
              var coordinate = e.coordinate;
              var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
            	      coordinate, 'EPSG:3857', 'EPSG:4326'));
              if (featureInfo!==undefined&&featureInfo!==null
              &&featureInfo.layer!==null)
              {
            	  alert(hdms+"\n这里属于"+featureInfo.feature.get("name")+"省");//显示点击区域的
                  console.log('打印选择要素');
                  console.log(featureInfo .feature);
                  console.log('打印选择要素所属Layer');
                  console.log(featureInfo .layer);
              }else{
            	  alert(hdms+"\n这里不属于中国或者这里是大海");//显示点击区域的
              }
          }
    
          定位
    view.setCenter(ol.proj.fromLonLat([Number(document.getElementById('jd').value), Number(document.getElementById('wd').value)]));

里面用到的china.json数据下载地址：[http://download.csdn.net/detail/u013132051/9595986][http_download.csdn.net_detail_u013132051_9595986]

下面本人继续更新WebGis的后续精准操作

![微信公众号][aHR0cDovL295dG14eXVlay5ia3QuY2xvdWRkbi5jb20vd2VpeGluLmpwZWc]

[aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA1MTQwMjIxNjcw]: /images/20220719/03280acd606b4375a5047d710b2ceb8f.png
[aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA1MTQxMDUwOTQx]: /images/20220719/7c70552314dc4cd29026a66392a43712.png
[aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA1MTQxNjM2MTMw]: /images/20220719/25914a4a9bcf42228ac78c65aaf73e92.png
[aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA1MTQxNzA3NTY4]: /images/20220719/5dcd1e8f6cb14872bf620fe6c1ee4fa6.png
[http_download.csdn.net_detail_u013132051_9595986]: http://download.csdn.net/detail/u013132051/9595986
[aHR0cDovL295dG14eXVlay5ia3QuY2xvdWRkbi5jb20vd2VpeGluLmpwZWc]: /images/20220719/63eef95ec8dd4bb788a930aa37c7847c.png