在 vue3 中使用 openlayers 制作旅行地图

由于上半年经常跑出去玩，突然想做一个旅行地图的博客，想起之前接触过 openlayers 的项目，也懒得去调查别的库了，直接用 openlayers 开干。由于github经常构建失败，我部署到vercel上去了，现在能正常访问了，而且感觉速度也稍微比github快一些。

• 链接

  • 项目代码github链接
  • 博客原文链接
  • 旅行地图预览链接

• 效果预览

安装

vue 的项目搭建就不说了，直接安装 ol 就可以开写了

npm i ol

创建地图

const {
    center, zoom, minZoom, maxZoom, extent } = MAP_DEFAULT_OPTIONS;
const map = new Map({
   
  target: "map",
  layers: [],
  controls: [],
});
map.setView(
  new View({
   
    center: fromLonLat(center),
    zoom,
    minZoom,
    maxZoom,
    constrainResolution: true,
    extent: transformExtent(extent, EPSG4326, map.getView().getProjection()),
  })
);

添加图层

创建图层，我这里用的是 geojson 的数据创建的，可以在网上找到你想要创建地图的 geojson 数据。

const layer = new Vector({
   
  source: new SourceVector({
   
    url,
    format: new GeoJSON(),
  }),
});

layer.setStyle(CreateLayerStyle);

创建多个图层添加到组内，比如亚洲图层，中国图层

const layerGroup = new Group({
   
  layers: [asiaLayer, chinaLayer],
});
map.addLayer(layerGroup);

实现放大现在省份图层

由于中国图层的 geojson 就只包含省份的边界线，我想要在放大的时候加载出城市的边界线，就得添加省份的 geojson 数据。

监听地图的 change 事件，判断缩放发生大于某个数的时候，添加对应的省份图层

• LayerCacheMap 省份图层
• currentExtent 当前视图范围
• isCityInView 判断省份是否在当前视图中
• layer.setVisible 设置图层显示隐藏

map.getView().on("change", function (event) {
   
  const mapView = event.target;
  // 获取新的缩放级别
  const zoom = event.target.getZoom();
  // 当前视图范围
  const currentExtent = mapView.calculateExtent(map.getSize());

  const transformedExtent = transformExtent(
    currentExtent,
    mapView.getProjection(),
    EPSG4326
  );

  if (zoom > index) {
   
    // 显示2级涂层
    for (const key in ALL_EXTENT) {
   
      const extent = ALL_EXTENT[key]