三章-22-控制图层位置关系

2020-04-20 本文已影响0人彩云飘过

本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。

源码见 1022.html ，对应的官网示例 https://openlayers.org/en/latest/apidoc/module-ol_layer_Layer-Layer.html

image.png


<!DOCTYPE html>
<html>

<head>
  <title>控制图层位置关系
  </title>
  <link rel="stylesheet" href="../include/ol.css" type="text/css">
  <script src="../include/ol.js"></script>
  <script src="../include/jquery-3.1.1.min.js"></script>

</head>
<style>
  #layertree li>span {
    cursor: pointer;
  }
</style>

<body>
  <div>
    <label for="idx1">
      <input type="number" id="idx1"></input>
      方块所在图层的 Z-index
    </label></br>

    <label for="idx2">
      <input type="number" id="idx2"></input>
      三角形所在图层的 Z-index
    </label>
  </div>

  <div id="map" class="map"></div>

  <script>
    var stroke = new ol.style.Stroke({ color: 'black', width: 1 });

    //设置图层的样式，三角形 五角星 矩形
    var styles = {
      'square': new ol.style.Style({
        image: new ol.style.RegularShape({
          fill: new ol.style.Fill({ color: 'blue' }),
          stroke: stroke,
          points: 4,
          radius: 80,
          angle: Math.PI / 4
        })
      }),
      'triangle': new ol.style.Style({
        image: new ol.style.RegularShape({
          fill: new ol.style.Fill({ color: 'red' }),
          stroke: stroke,
          points: 3,
          radius: 80,
          rotation: Math.PI / 4,
          angle: 0
        })
      }),
      'star': new ol.style.Style({
        image: new ol.style.RegularShape({
          fill: new ol.style.Fill({ color: 'green' }),
          stroke: stroke,
          points: 5,
          radius: 80,
          radius2: 4,
          angle: 0
        })
      })
    };

    //动态创建图层
    function createLayer(coordinates, style, zIndex) {
      var feature = new ol.Feature(new ol.geom.Point(coordinates));
      feature.setStyle(style);

      var source = new ol.source.Vector({
        features: [feature]
      });

      var vectorLayer = new ol.layer.Vector({
        source: source
      });
      vectorLayer.setZIndex(zIndex);

      return vectorLayer;
    }

    var layer0 = createLayer([40, 40], styles['star'], 0);
    var layer1 = createLayer([0, 0], styles['square'], 1);
    var layer2 = createLayer([0, 40], styles['triangle'], 0);

   //使用动态方法，把图层增加到图层组中
    var layers = [];
    layers.push(layer1);
    layers.push(layer2);
    layers.push(layer0);

    var map = new ol.Map({
      layers: layers,
      target: 'map',
      view: new ol.View({
        center: [0, 0],
        zoom: 18
      })
    });



    //动态改变dom对象的属性ZIndex
    function bindInputs(id, layer) {
      var idxInput = document.getElementById('idx' + id);
      idxInput.onchange = function () {
        layer.setZIndex(parseInt(this.value, 10) || 0); //当输入新的值时，改变图层的属性ZIndex
      };
      idxInput.value = String(layer.getZIndex());
    }
    bindInputs(1, layer1);
    bindInputs(2, layer2);
  </script>
</body>

</html>

三章-22-控制图层位置关系

猜你喜欢

热点阅读