下面是一个简单的
示例代码，演示如何使用
Vue3和
OpenLayers来增加和
删除矢量
图层。
```html
<template>
<div id="map"></div>
</template>
<script>
import { onMounted, ref } from '
vue';
import Map from 'ol/Map';
import View from 'ol/View';
import { fromLonLat } from 'ol/proj';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
export default {
setup() {
const mapRef = ref(null);
let mapInstance = null;
let vectorLayer = null;
const addLayer = () => {
const source = new VectorSource({
features: [
new Feature({
geometry: new Point(fromLonLat([120.1551, 30.2741])),
}),
],
});
const style = new Style({
image: new CircleStyle({
radius: 10,
fill: new Fill({ color: 'red' }),
stroke: new Stroke({ color: 'white', width: 2 }),
}),
});
vectorLayer = new VectorLayer({
source,
style,
});
mapInstance.addLayer(vectorLayer);
};
const removeLayer = () => {
mapInstance.removeLayer(vectorLayer);
};
onMounted(() => {
mapInstance = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM(),
}),
],
view: new View({
center: fromLonLat([120.1551, 30.2741]),
zoom: 15,
}),
});
});
return {
mapRef,
addLayer,
removeLayer,
};
},
};
</script>
<style>
#map {
width:
100%;
height: 400px;
}
</style>
```
在这个
示例中，我们首先引入了所需的
OpenLayers库和
Vue3的相关函数。在`setup()`函数中，我们创建了一个`mapRef`引用，用于将地图容器元素绑定到
Vue的模板中。然后我们定义了`mapInstance`和`vectorLayer`两个变量，分别用于跟踪地图实例和矢量
图层。
接下来，我们定义了`addLayer()`和`removeLayer()`两个函数，分别用于
添加和
删除矢量
图层。在`addLayer()`函数中，我们首先创建了一个`VectorSource`对象，并向其
添加了一个包含一个点要素的`Feature`对象。接着，我们定义了一个样式对象`style`，用于渲染矢量
图层中的要素。最后，我们创建了一个`VectorLayer`对象，并将其
添加到地图实例中。
在`removeLayer()`函数中，我们使用`mapInstance`对象的`removeLayer()`方法，将矢量
图层从地图中
删除。
在`onMounted()`函数中，我们初始化了地图实例，并将其绑定到`mapRef`引用上。我们还设置了一个初始的地图视图，并
添加了一个瓷砖
图层。
最后，在模板中，我们使用`id="map"`来创建一个地图容器元素，并在创建地图实例后将其绑定到`mapRef`引用上。我们还
添加了两个按钮，用于触发
添加和
删除矢量
图层的函数。
该专栏为热销专栏榜 第5名
订阅专栏 解锁全文
1919
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
