我如何縮放到 openlayers 中的特定幾何圖形，從下拉列表中選擇

Question

<!DOCTYPE html>
<html>
   <head>
      <title>Advanced View Positioning</title>
      <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/build/ol.js"></script>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/css/ol.css">
      <style>
         .mapcontainer {
         position: relative;
         margin-bottom: 20px;
         }
         .map {
         width: 1000px;
         height: 600px;
         }
      </style>
   </head>
   <body>
      <div class="mapcontainer">
         <div id="map" class="map"></div>
         <br><br><br>
      </div>
      <select id="passValues" onchange="changeURL();">
         <option value="city1">city1</option>
         <option value="city2">city2</option>
         <option value="city3">city3</option>
         <option value="city4">city4</option>
      </select>
      <br><br>
      <button id="zoomtoswitzerlandbest">Zoom</button>
      <script>
         var initUrl ='localhost/geoserver/testing/ows?service=WFS&version=1.1.1&request=GetFeature&outputFormat=application/json&typeName=test1:test&cql_filter=name=%somename%27';
         var getPassedValues;
            function changeURL()
            {
            getPassedValues = document.getElementById('passValues').value;
            console.log(getPassedValues);
         }
         var source = new ol.source.Vector({
            url: initUrl,
            format: new ol.format.GeoJSON()
          });
          var style = new ol.style.Style({
            fill: new ol.style.Fill({
              color: 'rgba(255, 255, 255, 0.6)'
            }),
            stroke: new ol.style.Stroke({
              color: '#319FD3',
              width: 1
            }),
            image: new ol.style.Circle({
              radius: 5,
              fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.6)'
              }),
              stroke: new ol.style.Stroke({
                color: '#319FD3',
                width: 1
              })
            })
          });
          var vectorLayer = new ol.layer.Vector({
            source: source,
            style: style
          });
          var view = new ol.View({
            center: [0, 0],
            zoom: 1
          });
          var map = new ol.Map({
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              }),
              vectorLayer
            ],
            target: 'map',
            controls: ol.control.defaults({
              attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false
              })
            }),
            view: view
          });
         var zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
             zoomtoswitzerlandbest.addEventListener('click', function() {
            console.log("Before Change : " +source.getUrl());
         source.setUrl('localhost/geoserver/testing/ows?service=WFS&version=1.1.1&request=GetFeature&outputFormat=application/json&typeName=test1:test&cql_filter=name=%'+getPassedValues+'%27');
          console.log("After Change : "+source.getUrl());
          var feature = source.getFeatures()[0];
          var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
          console.log(polygon);
          var size = /** @type {ol.Size} */ (map.getSize());
          view.fit(polygon, size, {padding: [170, 50, 30, 150]}, {duration: 1000});
          }, false);
      </script>
   </body>
</html>

這是我的全部代碼，我想根據從下拉列表中選擇的值縮放到幾何圖形，請檢查，我正在努力但無法找到執行此操作的方法。

Answer 1

您可以使用map.getView().fit(geometry, map.getSize(), {duration: 1000})來執行此操作。 這是我的代碼：

    const format = new ol.format.WKT();

    const feature = format.readFeature(wkt, {
        dataProjection: 'EPSG:32639',
        featureProjection: 'EPSG:3857'
    });

    vectorLayerAll.getSource().addFeature(feature);
    vectorLayerAll.getSource().changed();

    const geometry = feature.getGeometry();

    map.getView().fit(geometry, map.getSize(), {duration: 1000});

Answer 2

在范圍更改之前，您需要等待 url 加載並讀取功能。 如果您使用的是最新版本，則可以使用featuresloadend事件

  source.setUrl('localhost/geoserver/testing/ows?service=WFS&version=1.1.1&request=GetFeature&outputFormat=application/json&typeName=test1:test&cql_filter=name=%'+getPassedValues+'%27');
  source.once('featuresloadend' function() {
      console.log("sssss"+source.getExtent()); 
  }

我如何縮放到 openlayers 中的特定幾何圖形，從下拉列表中選擇

問題描述

2 個解決方案

解決方案1
0 2022-02-17 07:56:12

解決方案2
0 2022-02-17 08:48:39

我如何縮放到 openlayers 中的特定幾何圖形，從下拉列表中選擇

問題描述

2 個解決方案

解決方案1 0 2022-02-17 07:56:12

解決方案2 0 2022-02-17 08:48:39

解決方案1
0 2022-02-17 07:56:12

解決方案2
0 2022-02-17 08:48:39