logo头像

学如逆水行舟,不进则退!!!

文章目录

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

本文于546天之前发表,文中内容可能已经过时。

WebGIS应用程序的页面能够通过HTML、JSP、ASP或任何任何类型的Web页文件构成

  • WebGIS应用程序的页面能够通过HTML、JSP、ASP或任何任何类型的Web页文件构成,其特殊之处在于,它的请求提交的方法并不是通过常用的 “超链接”形式,而是使用鼠标与Web浏览器上地图进行的,因此,我们开发WebGIS应用程序的过程,就是考虑如何向一台Web服务器发送地图请求或其 它类型请求,并将响应进行解释显示的过程
  • 加载瓦片最后我们是呈现出地图的形式,所以我们需要一个div带装在这个map,这个在前端很容易实现
<div id="rcp2_map" class="smallmap" style="width: 100%; height: 100%;"></div>
  • 有了这个我们的地图就有了安身之所,下面我们就开始我们的加载步骤,具体步骤我放在脚本里面,在定义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);

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

  • 滚动鼠标滚动键放大地图显示
    这里写图片描述

  • 在地图显示方面我们可以设置的,比如说以什么地方中心显示呢,以多打的比例显示呢,设置中心点在上面的代码已经提到了,下面我贴个比例显示的代码

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的时候有了不同
var raster = new ol.layer.Tile({
          source: new ol.source.OSM()
      });

      var vector = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: './source/china.json',
          format: new ol.format.GeoJSON()
        })
      });

      var view = new ol.View({
          // the view's initial state
          center: search,
          zoom: 5
        });

var map = new ol.Map({
        layers: [raster, vector],
        target: 'map',
        view: view
      });
  • 看看效果
    这里写图片描述

  • 双击放大地图显示
    这里写图片描述

  • 这里的定位和点击就草草说说了

点击
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

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

上一篇
坚持原创技术分享,您的支持将鼓励我继续创作!