zoukankan      html  css  js  c++  java
  • OpenLayers项目分析(七)地图表现

    转自:http://www.openlayers.cn/portal.php?mod=view&aid=17

    一开始看到OpenLayers,就有一个问题。就是它作为WebGIS的前端,通俗地说,是“显示”地图的。那么,它显示的地图是什么,是怎么显示的,又是怎么实现的?——暂且把这个问题叫做地图表现。我觉得最关键的就是Map类,把这个类分析清楚了,问题就解决了一大半了。
      前面第一回里说过怎么实例化一个地图,怎么向地图里加图层加控件。其实,地图是这样的,它就像一个容器,可以盛东西。要分析它光理解这些还不够,我们要知道这个容器是怎么做出来的,及具体都有什么功能。
      Map类有两个常量:Z_INDEX_BASE和EVENT_TYPES,不说了,可顾名而思其意。再看它定义的一些属性:div(The
    element that contains the map)、baseLayer(The currently selected base
    layer)、events(An events object that handles all events on the
    map)。是这样,web页的div通过以id或name的形式获得map对象,然后layers和control在加载到map上,表现为地图。顺便说一句,控件control和事件event是相关联的,这以后会说。
     OpenLayers.Map类提供了两种实例化方式,举例来看:

     // create a map with default options in an element with the id "map1"
         var map = new OpenLayers.Map("map1");
         
         // create a map with non-default options in an element with id "map2"
     //Optional object with properties to tag onto the map.
         var options = {
              maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
              maxResolution: 156543,
              units: 'meters',
              projection: "EPSG:41001"
          };
          var map = new OpenLayers.Map("map2", options);

    OpenLayers.Map类实现的函数APIMethod是分组的,比如Layer Functions、Control Functions、Popup
    Functions、Container Div Functions、Zoom, Center, Pan Functions、Layer
    Options、Baselayer Functions、Zooming Functions、Translation
    Functions。其中,最关键的是Layer Functions和Control
    Functions,因为就是Layer对象和Control对象构成了map的主体。下面从每组函数中挑选出一两个来,看看具体实现过程。
      Layer
    Functions:
    就看addLayer函数吧,下面的addLayers就是调用的它,代码如下:
    addLayer: function (layer) {
            for(var i=0; i < this.layers.length; i++) {
                if (this.layers[i] == layer) {
                    var msg = "You tried to add the layer: " + layer.name + 
                              " to the map, but it has already been added";
                    OpenLayers.Console.warn(msg);
                    return false;
                }
            }            
            layer.div.style.overflow = "";
            this.setLayerZIndex(layer, this.layers.length);
            if (layer.isFixed) {
                this.viewPortDiv.appendChild(layer.div);
            } else {
                this.layerContainerDiv.appendChild(layer.div);
            }
            this.layers.push(layer);
            layer.setMap(this);
            if (layer.isBaseLayer)  {
                if (this.baseLayer == null) {
                    // set the first baselaye we add as the baselayer
                    this.setBaseLayer(layer);
                } else {
                    layer.setVisibility(false);
                }
            } else {
                layer.redraw();
            }
            this.events.triggerEvent("addlayer");
        }
    可以看到其中涉及到layer的一些方法,下一回具体介绍OpenLayers. Layer类。
    Control Functions:
        addControl: function (control, px) {
            this.controls.push(control);
            this.addControlToMap(control, px);
        }
    可以看出,添加控件的过程是由controls.Push()和addControlToMap()两个函数共同完成的。
    addControlToMap: function (control, px) {
        // If a control doesn't have a div at this point, it belongs in the
        // viewport.
        control.outsideViewport = (control.div != null);
        control.setMap(this);
        var div = control.draw(px);
        if (div) {
            if(!control.outsideViewport) {
                div.style.zIndex = this.Z_INDEX_BASE['Control'] +
                                    this.controls.length;
                this.viewPortDiv.appendChild( div );
            }
        }
    }
    Popup Functions:这组函数和上两组函数相似,是在地图上添加或删除Popup 对象。
      Zoom, Center, Pan
    Functions:
       //Allows user to pan by a value of screen pixels
          pan: function(dx, dy) {
            // getCenter
            var centerPx = this.getViewPortPxFromLonLat(this.getCenter());
            // adjust
            var newCenterPx = centerPx.add(dx, dy);
            
            // only call setCenter if there has been a change
            if (!newCenterPx.equals(centerPx)) {
                var newCenterLonLat = this.getLonLatFromViewPortPx(newCenterPx);
                this.setCenter(newCenterLonLat);
            }
       }
    Zooming Functions:
    这里就看看放大缩小函数吧。
        zoomIn: function() {
        
       this.zoomTo(this.getZoom() + 1);
        }
        zoomOut: function() {
     
          this.zoomTo(this.getZoom() - 1);
       
    }
    显然,zoomIn和zoomOut都使用了getZoom方法,放大就是让zoom加1,缩小减1。
  • 相关阅读:
    HDU 3681 Prison Break 越狱(状压DP,变形)
    POJ 2411 Mondriaan's Dream (状压DP,骨牌覆盖,经典)
    ZOJ 3471 Most Powerful (状压DP,经典)
    POJ 2288 Islands and Bridges (状压DP,变形)
    HDU 3001 Travelling (状压DP,3进制)
    POJ 3311 Hie with the Pie (状压DP)
    POJ 1185 炮兵阵地 (状压DP,轮廓线DP)
    FZU 2204 7
    POJ 3254 Corn Fields (状压DP,轮廓线DP)
    ZOJ 3494 BCD Code (数位DP,AC自动机)
  • 原文地址:https://www.cnblogs.com/LCGIS/p/3048332.html
Copyright © 2011-2022 走看看