how can i zoom to specific geometry in openlayers , selected from drop down-CodePudding

<!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 >
         <div id="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'';
         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 ''');
          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>

This is my whole code , i want to zoom to geometry as per values selected from drop down plz check , i am trying so hard but cant find way to do this.

CodePudding user response：

You can use map.getView().fit(geometry, map.getSize(), {duration: 1000}) for do this. This is my code:

    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});

CodePudding user response：

You will need to wait for the url to load and features to be read before the extent changes. If you are using the latest version you can use the featuresloadend event

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