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

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

<div id="rcp2_map" class="smallmap" style="width: 100%; height: 100%;"></div>
1

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

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

• 有了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:大公鸡"
            });
1
2
3
4
5
6
7

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

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

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

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

到此我们的地图就显示了，我们来看看想过吧，我拿的是我服务的地图，可以不怎么好看，我们只要效果

• 滚动鼠标滚动键放大地图显示
  

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

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

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

// 添加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);
1
2
3
4
5

• 下面我们在看看点击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); //平移到范围的中心点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

• 研究了这个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
      });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

• 看看效果
  

• 双击放大地图显示
  

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

点击
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)]));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

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