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

shellingford-ly

已于 2023-09-15 17:51:37 修改

阅读量669

点赞数 3

文章标签：前端 vue typescript

于 2023-09-14 14:58:37 首次发布

本文链接：https://blog.csdn.net/qq_41225246/article/details/132876704

版权

本文介绍如何在 Vue3 项目中利用 OpenLayers 构建旅行地图，包括地图创建、图层添加、放大省份图层、主题切换、添加标点、标点事件、航行路线以及飞机转向的实现，最后提供了项目的预览链接和源码地址。

摘要由CSDN通过智能技术生成

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