当前位置：首页 > wzjs >正文

泉州网站建设方案外包沈阳优化网站公司

wzjs 2025/7/22 4:20:54

泉州网站建设方案外包,沈阳优化网站公司,网站建设优化多少钱,武汉制作企业网站在前端 GIS（地理信息系统）开发中，OpenLayers 是一个强大的开源地图库，可以帮助开发者快速构建 Web 地图应用。本文将详细介绍如何在 Vue3 项目中，使用 OpenLayers 并结合 marker-feature 插件来添加 Marker。 1. 项目初…

在前端 GIS（地理信息系统）开发中，OpenLayers 是一个强大的开源地图库，可以帮助开发者快速构建 Web 地图应用。本文将详细介绍如何在 Vue3 项目中，使用 OpenLayers 并结合 marker-feature 插件来添加 Marker。

1. 项目初始化

如果你的 Vue3 项目还没有创建，可以使用 Vite 进行快速搭建：

npm create vite@latest vue-openlayers-demo --template 
vue cd vue-openlayers-demo npm install

然后安装 OpenLayers 和 marker-feature 插件：

npm install ol ol-marker-feature ol-popup

2. 创建 `MarkerFeature.vue` 组件

在 components 目录下新建 MarkerFeature.vue，然后使用 setup 语法来封装 OpenLayers 地图，并添加 marker-feature。

<!--* @Author: 彭麒* @Date: 2025/3/12* @Email: 1062470959@qq.com* @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。-->  
<template><div class="container"><div class="w-full flex justify-center"><div class="font-bold text-[24px]">在Vue3 + OpenLayers使用 marker-feature 来添加 marker</div></div><div id="vue-openlayers"></div></div>
</template><script setup>
import { onMounted } from "vue";
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import Marker from "ol-marker-feature";
import Popup from "ol-popup";let map; // map 作为普通变量，不使用 refconst initMap = () => {if (map) return; // 避免重复初始化const OSMlayer = new Tile({ source: new OSM() });map = new Map({target: "vue-openlayers",layers: [OSMlayer],view: new View({center: [113.448, 23.986],zoom: 7,projection: "EPSG:4326",}),});const marker = new Marker([113.448, 23.986]);marker.set("info",`<div style="background:#fff; padding:20px;"><h3>我的 Marker 标题</h3><h4>vue-openlayers 的信息内容</h4></div>`);marker.setMap(map);const popup = new Popup({ offset: [0, -32] });map.addOverlay(popup);marker.on("click", () => {popup.show(marker.getLocation(), marker.get("info"));});
};onMounted(initMap);
</script><style scoped>
.container {width: 840px;height: 590px;margin: 50px auto;border: 1px solid #42B983;
}
#vue-openlayers {width: 800px;height: 470px;margin: 0 auto;border: 1px solid #42B983;position: relative;
}
</style>

3. 组件解析

3.1 OpenLayers 地图初始化

我们创建了一个 OSM（OpenStreetMap）底图，并在 div#vue-openlayers 内渲染 Map 实例：

map = new Map({ target: "vue-openlayers", layers: [OSMlayer], view: new View({ center: [113.448, 23.986], zoom: 7, projection: "EPSG:4326", }), 
});

注意：OpenLayers 默认使用 EPSG:3857 投影，因此如果你的坐标是 EPSG:4326，请确保所有数据一致。

3.2 添加 Marker

ol-marker-feature 允许我们直接创建 Marker 并绑定到 Map：

const marker = new Marker([113.448, 23.986]); 
marker.set("info", "<div>Vue3 OpenLayers Marker</div>"); 
marker.setMap(map);

这样，我们的 Marker 就会出现在指定经纬度的位置。

3.3 绑定 Popup 信息框

为了让 Marker 可以在点击时弹出 Popup，我们使用 ol-popup 插件：

const popup = new Popup({ offset: [0, -32] }); 
map.addOverlay(popup); 
marker.on("click", () => { popup.show(marker.getLocation(), marker.get("info")); 
});

这样，点击 Marker 时就能弹出对应的 HTML 内容。

4. 在 `App.vue` 引用组件

在 App.vue 中引入 MarkerFeature.vue 并使用：

<template> <MarkerFeature /> 
</template> 
<script setup> import MarkerFeature from "./components/MarkerFeature.vue"; 
</script>

5. 运行项目

npm run dev

打开浏览器，访问 http://localhost:5173（默认 Vite 端口），你应该可以看到地图，以及点击 Marker 后弹出的 Popup 信息框。

6. 常见问题

❓ `Uncaught TypeError: Class constructor _Feature cannot be invoked without 'new'`

如果 ol-marker-feature 发生此错误，可以使用 Feature + Point 方式替代：

import Feature from "ol/Feature"; 
import Point from "ol/geom/Point"; 
import VectorLayer from "ol/layer/Vector"; 
import VectorSource from "ol/source/Vector"; 
import { Icon, Style } from "ol/style"; 
import { fromLonLat } from "ol/proj"; // 使用 Feature + Point 方式创建 Marker 
const markerFeature = new Feature({ geometry: new Point(fromLonLat([113.448, 23.986])), 
}); 
markerFeature.setStyle( new Style({ image: new Icon({ anchor: [0.5, 1], src: "https://openlayers.org/en/latest/examples/data/icon.png", // 自定义图标 }), 
}) ); // 创建矢量图层 
const vectorLayer = new VectorLayer({ source: new VectorSource({ features: [markerFeature], }), 
}); 
map.addLayer(vectorLayer);