请写一个Vue3的openLayers增删矢量图层的代码,并且为了方便管理,请把图层放在一个键值对数组中保存,可以通过图层的名称获取该图层
时间: 2024-01-21 13:17:08 浏览: 124
openlayers对矢量图(多边形) 的增删改查
3星 · 编辑精心推荐
以下是一个简单的Vue3组件,用于增删OpenLayers 6中的矢量图层。我们将图层存储在一个键值对数组中,以便能够方便地通过图层名称获取它。
```html
<template>
<div ref="mapContainer" class="map-container"></div>
</template>
<script>
import { ref, onMounted } from 'vue';
import Map from 'ol/Map';
import View from 'ol/View';
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 { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
export default {
name: 'OpenLayersMap',
setup() {
const mapContainer = ref(null);
let map;
const layers = {};
const addLayer = (name, layer) => {
layers[name] = layer;
map.addLayer(layer);
};
const removeLayer = (name) => {
if (layers[name]) {
map.removeLayer(layers[name]);
delete layers[name];
}
};
onMounted(() => {
const rasterLayer = new TileLayer({
source: new OSM(),
});
const vectorSource = new VectorSource();
const style = new Style({
image: new CircleStyle({
radius: 5,
fill: new Fill({ color: 'rgba(255, 0, 0, 0.1)' }),
stroke: new Stroke({ color: 'red', width: 1 }),
}),
});
const vectorLayer = new VectorLayer({
source: vectorSource,
style: style,
});
map = new Map({
target: mapContainer.value,
layers: [rasterLayer, vectorLayer],
view: new View({
center: [0, 0],
zoom: 2,
}),
});
addLayer('vector', vectorLayer);
});
return {
mapContainer,
addLayer,
removeLayer,
getLayers: () => layers,
};
},
};
</script>
<style>
.map-container {
width: 100%;
height: 100%;
}
</style>
```
在这个组件中,我们首先使用`ref`来获取`<div>`元素的引用,这是地图容器。我们还定义了一个`map`变量和一个`layers`对象来存储我们的图层。
在`onMounted`钩子函数中,我们创建了一个OpenLayers地图实例,并添加了一个OSM图层和一个矢量图层。我们还定义了一个`addLayer`函数和一个`removeLayer`函数,用于将图层添加到地图上或从地图上删除。
最后,我们在返回的对象中公开了`addLayer`、`removeLayer`和`getLayers`方法,以便外部组件可以方便地管理图层。
阅读全文