如何正確組合開放圖層繪圖圖層與必應地圖圖層

Question

如何在由 Bing 地圖圖塊制作的地圖上顯示 Open Layers 中的繪制圖層？ 我讓它與顯示的繪圖層一起工作，但在繪圖完成后，繪圖消失了。

我相信我的語法一定是不正確的，因為我可以生成帶有繪圖層的簡單版本的開放地圖就好了，但是當我與 Bing 結合時，一切都崩潰了。

<!DOCTYPE html>
<html>

  <head>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }

      #map {
        width: 100%;
        height: 800px;
      }

      textarea {
        width: 300px;
        height: 100px;
      }

    </style>
    <title>Testing</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
  </head>

  <body>
    <div id="map" class="map"></div>
    <div id="demo"></div>
    <select id="layer-select">
       <option value="Aerial">Aerial</option>
       <option value="AerialWithLabels" selected>Aerial with labels</option>
       <option value="Road">Road (static)</option>
       <option value="RoadOnDemand">Road (dynamic)</option>
     </select>
    <script>
      var styles = [
        'Road',
        'RoadOnDemand',
        'Aerial',
        'AerialWithLabels',
        'collinsBart',
        'ordnanceSurvey'
      ];
      var layers = [];
      var i, ii;
      for (i = 0, ii = styles.length; i < ii; ++i) {
        layers.push(new ol.layer.Tile({
          visible: false,
          preload: Infinity,
          source: new ol.source.BingMaps({
            key: 'MY_BING_MAPS_KEY',
            imagerySet: styles[i]
            // use maxZoom 19 to see stretched tiles instead of the BingMaps
            // "no photos at this zoom level" tiles
            // maxZoom: 19
          })
        }));
      }


      var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
      });



      var source = new ol.source.Vector({
        wrapX: false
      });

      var vector = new ol.layer.Vector({
        source: source
      });


      var map = new ol.Map({
        layers: layers,
        loadTilesWhileInteracting: true,
        target: 'map',
        view: new ol.View({
          center: ol.proj.transform([-95.5, 38.5], 'EPSG:4326', 'EPSG:3857'),
          zoom: 5
        })
      });

      var select = document.getElementById('layer-select');

      function onChange() {
        var style = select.value;
        for (var i = 0, ii = layers.length; i < ii; ++i) {
          layers[i].setVisible(styles[i] === style);
        }
      }




      select.addEventListener('change', onChange);
      onChange();

      source.on('addfeature', function(evt) {
        var feature = evt.feature;
        var coords = feature.getGeometry().getCoordinates();
        document.getElementById('demo').innerHTML = coords + "<br>";
      });
      var draw; // global so we can remove it later
      function addInteraction() {
        draw = new ol.interaction.Draw({
          source: source,
          type: 'Polygon',
          freehand: true
        });
        layers.push(draw);
        map.addInteraction(draw);
      }

      layers.push(draw);
      addInteraction();

    </script>
  </body>

</html>

Answer 1

如果您將矢量圖層作為參數傳遞， map.addLayer()可能會解決這個特定問題。

Answer 2

您應將要繪制的圖層（矢量）添加到地圖中。

  var vector = new ol.layer.Vector({
    source: source
  });
  layers.push(vector);

您也可以刪除這些行

layers.push(draw);

如何正確組合開放圖層繪圖圖層與必應地圖圖層

問題描述

2 個解決方案

解決方案1
1 2020-09-06 12:56:51

解決方案2
0 2018-03-05 09:13:39

如何正確組合開放圖層繪圖圖層與必應地圖圖層

問題描述

2 個解決方案

解決方案1 1 2020-09-06 12:56:51

解決方案2 0 2018-03-05 09:13:39

解決方案1
1 2020-09-06 12:56:51

解決方案2
0 2018-03-05 09:13:39