帶你剖析WebGis的世界奧祕----瓦片式加載地圖

• 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的後續精準操做