【openlayers】移动视角适应所有点

移动视角适应所有点

• 连接

chatgpt

• 代码

// 创建一个地图
var map = new ol.Map({
  target: 'map', // 指定地图容器的ID
  layers: [
    // 添加你的地图图层
    // 例如：new ol.layer.Tile({ source: new ol.source.OSM() })
  ],
  view: new ol.View({
    center: [0, 0], // 地图初始中心点
    zoom: 2 // 地图初始缩放级别
  })
});

// 创建一个矢量数据源
var vectorSource = new ol.source.Vector();

// 创建一个矢量图层
var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

// 将矢量图层添加到地图中
map.addLayer(vectorLayer);

// 生成随机点
var randomPoints = generateRandomPoints(10); // 生成10个随机点的示例

// 在地图上添加点要素
randomPoints.forEach(function(point) {
  var feature = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(point)));
  var pointStyle = new ol.style.Style({
    image: new ol.style.Circle({
      radius: 6,
      fill: new ol.style.Fill({ color: 'red' }),
      stroke: new ol.style.Stroke({ color: 'white', width: 2 })
    })
  });
  feature.setStyle(pointStyle);
  vectorSource.addFeature(feature);
});

// 将地图视图适应所有点
var extent = vectorSource.getExtent();
map.getView().fit(extent, { padding: [20, 20, 20, 20], duration: 1000 });

// 生成随机点的方法
function generateRandomPoints(numPoints) {
  var points = [];
  for (var i = 0; i < numPoints; i++) {
    points.push([Math.random() * 360 - 180, Math.random() * 180 - 90]);
  }
  return points;
}

• 效果