openlayers 添加geojson并设置鼠标悬浮高亮

最新推荐文章于 2024-06-18 18:15:17 发布

查查茶茶丸

最新推荐文章于 2024-06-18 18:15:17 发布

阅读量691

点赞数

分类专栏： gis 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/KK_vicent/article/details/129439620

版权

gis 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

该代码段展示了一个在Vue组件中加载GeoJSON数据到OpenLayers地图的过程。它创建了一个矢量图层，设置了样式，并添加了交互功能，特别是选择高亮功能。

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

<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>