<template>
<div class="container"></div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { api } from '@/axios/api.ts'
import { MapObj } from '@/components/openlayer_map/index.js'
let vectorLayer = null
const addLayer = () => {
api.map_cesium.getCommonData(null, '/data/wuhan_bounds.geojson').then(res => {
let geojsonObject = res.data
const vectorSource = new ol.source.Vector({
features: new ol.format.GeoJSON().readFeatures(geojsonObject)
})
vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: MapObj.getVectorStyle
})
MapObj.currentMap.addLayer(vectorLayer)
// MapObj.currentMap.on('pointermove', (e) => {
// console.log(e)
// })
//交互时高亮
let selected = {
fill: new ol.style.Fill({ //填充样式
color: 'rgba(255, 255, 255, 0.5'
}),
stroke: new ol.style.Stroke({ //线样式
color: '#ffcc33',
width: 5
}),
image: new ol.style.Circle({ //点样式
radius: 10,
fill: new ol.style.Fill({
color: '#e67e22'
})
})
}
const selectStyle = (feature) => {
selected.text = new ol.style.Text({
font: '16px sans-serif',
text: feature.values_.name,
fill: new ol.style.Fill({
color: [255, 255, 255, 1],
}),
backgroundFill: new ol.style.Fill({
color: [168, 50, 153, 0.6],
}),
padding: [2, 2, 2, 2],
})
let result = new ol.style.Style(selected)
return result;
}
var select_move = new ol.interaction.Select({
// ol.events.condition.鼠标交互方式
condition: ol.events.condition.pointerMove,//设置监听事件
style: selectStyle
})
MapObj.currentMap.addInteraction(select_move)
})
}
const removeLayer = () => {
if (vectorLayer) {
MapObj.currentMap.removeLayer(vectorLayer)
}
}
onMounted(() => {
addLayer()
})
onUnmounted(() => {
removeLayer()
})
</script>
<style scoped></style>
openlayers 添加geojson并设置鼠标悬浮高亮
最新推荐文章于 2024-06-18 18:15:17 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)