Openlayers使用

1.Map类：

    map是ol中的核心组件。初始化一幅地图（map）时，至少需要一个可视化区域（view），一个或多个图层（layer）和一个地图加载的目标（HTML的tag标签）。

    map -> view -> layers -> div

区别以下两段等效代码：

2.View类：

view对象代表map的2D view，view的三种状态：center、resolution(zoom)、rotation,此外view还有投影信息。

案例：同一个view可以为两个map对象所调用，呈现联动效果：

  <div class="mapview">
      <div id="map1" class="map"></div>
      <div id="map2" class="map"></div>
  </div>

  <script src="./ol/ol.js"></script>
  <script src="./ol/jquery.min.js"></script>
  <script>
      var view = new ol.View({
          center: ol.proj.transform([110, 39], "EPSG:4326", "EPSG:3857"),
          zoom: 4,
      });

      var map1 = new ol.Map({
          controls: new ol.control.defaults({
              attribute: false
          }).extend([]),
          target: "map1",
          layers: [
              getTdtLayer('vec_w'),
              getTdtLayer('cva_w'),
          ],
          view: view
      });

      var map2 = new ol.Map({
          controls: new ol.control.defaults({
              attribute: false
          }).extend([]),
          target: "map2",
          layers: [
              getTdtLayer('img_w'),
          ],
          view: view
      });

      function getTdtLayer(lyr) {
          var tiandituTk = "518e1a4a17bf485d6b8adf9a50e3abfa";
          var url = 'http://t0.tianditu.com/DataServer?T=' + lyr + '&X={x}&Y={y}&L={z}' + '&tk=' + tiandituTk;
          var layer = new ol.layer.Tile({
              source: new ol.source.XYZ({
                  url: url
              })
          });
          return layer;
      }
  </script>

3.Layer类及其继承关系

4.Source类及其继承关系