zoukankan      html  css  js  c++  java
  • OpenLayers项目分析(六)数据渲染分析

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

    实际上,OpenLayers的整个表现过程是这样的:通过调用获取数据,然后各种格式的解析器解析数据,在用所谓的渲染器渲染后加到图层上,最后再结合相应的控件表现出来,成为一幅我们看到的“动态”地图。
      这里主要讨论OpenLayers.
    Renderer这个类及其子类。
      Renderer类提供了一些虚方法,以供其子类继承,像setExtent、drawFeature、drawGeometry、eraseFeatures、eraseGeometry等。
      Elements继承Renderer,具体实现渲染的类又继承Renderer类。之所以这样设计,是因为不同的矢量格式数据需要共享相应的函数,在Elements这个类中封装一下。这个类的核心是drawGeometry和drawGeometryNode两个函数。其中drawGeometry调用了drawGeometryNode,创建出基本的地理对象。

    drawGeometry: function(geometry, style, featureId) {
          var className = geometry.CLASS_NAME;
          if ((className == "OpenLayers.Geometry.Collection") ||
              (className == "OpenLayers.Geometry.MultiPoint") ||
              (className == "OpenLayers.Geometry.MultiLineString") ||
              (className == "OpenLayers.Geometry.MultiPolygon")) {
              for (var i = 0; i < geometry.components.length; i++) {
                  this.drawGeometry(geometry.components[i], style, featureId);
              }
              return;
          };
          //first we create the basic node and add it to the root
          var nodeType = this.getNodeType(geometry);
          var node = this.nodeFactory(geometry.id, nodeType, geometry);
          node._featureId = featureId;
          node._geometryClass = geometry.CLASS_NAME;
          node._style = style;
          this.root.appendChild(node);
          
          //now actually draw the node, and style it
          this.drawGeometryNode(node, geometry);
      }
    渲染器的继承关系这样的:

      具体实现渲染的方法在OpenLayers. Renderer.SVG和OpenLayers.
    Renderer.VML两个类中实现的,就是实现Elements提供的虚方法,比如drawPoint、drawCircle、drawLineString、drawLinearRing、drawLine、drawPolygon、drawSurface等。以drawCircle为例看看具体的实现过程:
    drawCircle: function(node, geometry, radius) {
        if(!isNaN(geometry.x)&& !isNaN(geometry.y)) {
            var resolution = this.getResolution();
        
            node.style.left = (geometry.x /resolution).toFixed() - radius;
            node.style.top = (geometry.y /resolution).toFixed() - radius;
    
            var diameter = radius * 2;
            
            node.style.width = diameter;
            node.style.height = diameter;
        }
    }
  • 相关阅读:
    关于this指向思考
    (转) 那些无用的人----《人类简史》读后感
    常见数组&字符串API及其应用场景总结
    每当十一过了,总让我想起新年快了
    JavaScript笔记之数组 keyword(存储和释放&堆栈 & 按值 引用)
    关于Switch结构利用
    ios GCD同步异步
    IOS 实现TXT文本自动识别编码的方法
    iOS开发网络篇之文件下载、大文件下载、断点下载
    ios 自定义NSError
  • 原文地址:https://www.cnblogs.com/LCGIS/p/3048331.html
Copyright © 2011-2022 走看看