Openlayers 6 地理定位控制

Question

我正在修改這個Openlayers 研討會的地理定位控制功能，但我不知道我做錯了什么。 我收到錯誤消息：未捕獲的類型錯誤：無法讀取屬性“getExtent”。 它應該指向正確的源文件。

  map.getView().fit(ol.interaction.extent.getExtent(), {
  maxZoom: 18,
  duration: 500
  });

完整代碼在這里： https://jsfiddle.net/kaputkid/rnoL032z/19/

Answer 1

你錯過了這部分教程：

const source = new ol.source.Vector();
const layer = new ol.layer.Vector({
  source: source
});
map.addLayer(layer);

你改變了這個：

  map.getView().fit(ol.interaction.extent.getExtent(), {
    maxZoom: 18,
    duration: 500
  });

根據應該是的教程：

  if (!source.isEmpty()) {
    map.getView().fit(source.getExtent(), {
      maxZoom: 18,
      duration: 500
    });
  }

概念證明小提琴

代碼片段：

 //add basemap var BaseMap = new ol.layer.Tile({ title: "Google Satellite", baseLayer: true, visible: true, source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=s&hl=pl&&x={x}&y={y}&z={z}' }) }); var map = new ol.Map({ target: 'map', layers: [BaseMap], loadTilesWhileInteracting: true, view: new ol.View({ center: ol.proj.transform([-76.5, 42.45], 'EPSG:4326', 'EPSG:3857'), zoom: 11 }), }); const source = new ol.source.Vector(); const layer = new ol.layer.Vector({ source: source }); map.addLayer(layer); //add geoloaction navigator.geolocation.watchPosition(function(pos) { const coords = [pos.coords.longitude, pos.coords.latitude]; const accuracy = ol.geom.Polygon.circular(coords, pos.coords.accuracy); source.clear(true); source.addFeatures([ new ol.Feature(accuracy.transform('EPSG:4326', map.getView().getProjection())), new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(coords))) ]); }, function(error) { alert(`ERROR: ${error.message}`); }, { enableHighAccuracy: true }); const locate = document.createElement('div'); locate.className = 'ol-control ol-unselectable locate'; locate.innerHTML = '<button title="Locate me">◎</button>'; locate.addEventListener('click', function() { if (.source.isEmpty()) { map.getView().fit(source,getExtent(): { maxZoom, 18: duration; 500 }); } }). map.addControl(new ol.control:Control({ element; locate }));

 html, body { width: 100%; height: 100%; padding: 0px; margin: 0px; } #map { width: 100%; height: 100%; }.locate { text-align: right; bottom: 0.5em; right: 0.5em; }

 <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css"> <div id="map" class="map"></div>