本篇介绍一下使用openlayers点击多边形弹框，高亮多边形，自定义属性传递，鼠标悬浮多边形上动态修改鼠标样式
1 需求
- 加载天地图,polygon
- 传递自定义属性
- 标悬浮在polygon上，根据自定义属性，动态修改鼠标样式为pointer
- 点击polygon，根据自定义属性，高亮,弹框
2 分析
主要是 openlayers 中 地图事件，overlay等功能的使用
-
为vectorSource填充features，有两种方法:
- features: [new Feature()]
- features: new GeoJSON().readFeatures(geoJSON)
-
为vectorLayer填充style，有两种写法:
- style:new Style()
- style:{‘stroke-color’: ‘rgba(255, 128, 100, 1)’}
-
获取鼠标点击活悬浮时的features，有两种写法:
- map.value.forEachFeatureAtPixel()
- map.value.getFeaturesAtPixel()
3 实现
没有录上鼠标样式改变，复制代码查看
<template><div id="map" class="map"></div><div id="popup" class="ol-popup" ref="container"><a href="#" id="popup-closer" class="ol-popup-closer" ref="closer"></a><div id="popup-content" ref="content"></div></div>
</template><script setup lang="ts">
import { Feature, Map, Overlay, View } from 'ol';
import { GeoJSON } from 'ol/format';
import { Polygon } from 'ol/geom';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import { get, toLonLat } from 'ol/proj';
import { Vector, XYZ } from 'ol/source';
import { Fill, Stroke, Style } from 'ol/style';
import { toStringHDMS } from 'ol/coordinate.js';const projection = get('EPSG:4326');const layerTypeMap = {vector: ['vec', 'cva'], // [矢量底图, 矢量注记]image: ['img', 'cia'], // [影像底图, 影像注记]terrain: ['ter', 'cta'] // [地形晕渲, 地形注记]
};const map = ref();
const container = ref();
const content = ref();
const closer = ref();
const overlay = shallowRef();
const feature = ref();
const geoJSON = {type: 'FeatureCollection',crs: {type: 'name',properties: {name: 'EPSG:4326'}},features: [{type: 'Feature',geometry: {type: 'Polygon',coordinates: [[[112, 31],[113, 32.2],[114, 30.5],[112, 31]]]},properties: {//自定义属性pointer: true}}]
};onMounted(() => {initMap('image');
});const initMap = (layerType = 'image') => {const key = '替换为天地图key';overlay.value = new Overlay({element: container.value,autoPan: {animation: {duration: 250}}});// c: 经纬度投影 w: 墨卡托投影const matrixSet = 'c';map.value = new Map({target: 'map',layers: [// 底图new TileLayer({source: new XYZ({url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap[layerType][0]}_${matrixSet}&tk=${key}&x={x}&y={y}&l={z}`,projection})}),// 注记new TileLayer({source: new XYZ({url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap[layerType][1]}_${matrixSet}&tk=${key}&x={x}&y={y}&l={z}`,projection})}),new VectorLayer({source: new Vector({features: [new Feature({geometry: new Polygon([[[116, 31],[118, 32.2],[119, 30.5],[116, 31]]]),pointer: true //自定义属性，可用于修改鼠标样式、单击轮廓弹框，改变feature样式})]}),style: new Style({fill: new Fill({color: 'rgba(228, 147, 87, 0.4)'}),stroke: new Stroke({color: 'rgba(228, 147, 87, 1)',width: 3})})}),new VectorLayer({source: new Vector({features: [new Feature({geometry: new Polygon([[[114, 31],[115, 32.2],[116, 30.5],[114, 31]]])})]}),style: {//layer样式可以这样写'stroke-color': 'rgba(255, 255, 100, 1)','stroke-width': 1.5,'fill-color': 'rgba(255, 255, 100, 0.5)','circle-radius': 6,'circle-fill-color': 'rgba(255, 255, 100, 1)'}}),new VectorLayer({source: new Vector({features: new GeoJSON().readFeatures(geoJSON) //读取geojson格式数据}),style: {//layer样式可以这样写'stroke-color': 'rgba(255, 128, 100, 1)','stroke-width': 1.5,'fill-color': 'rgba(255, 128, 100, 0.5)','circle-radius': 6,'circle-fill-color': 'rgba(255, 128, 100, 1)'}})],overlays: [overlay.value],view: new View({center: [116.406393, 39.909006],projection: projection,zoom: 5,maxZoom: 17,minZoom: 1})});map.value.on('pointermove', (e: any) => {// 根据自定义属性改变鼠标样式// 方法一// map.value.getTargetElement().style.cursor = 'auto';// let pixel = map.value.getEventPixel(e.originalEvent);// map.value.forEachFeatureAtPixel(pixel, (feature: any) => {// const property = feature.getProperties();// if (property.pointer) {// map.value.getTargetElement().style.cursor = 'pointer'; //设置鼠标样式// } else {// map.value.getTargetElement().style.cursor = 'auto';// }// });// 方法二map.value.getTargetElement().style.cursor = 'auto';const features = map.value.getFeaturesAtPixel(e.pixel);features.forEach(feature => {const property = feature.getProperties();if (property.pointer) {map.value.getTargetElement().style.cursor = 'pointer'; //设置鼠标样式} else {map.value.getTargetElement().style.cursor = 'auto';}});});map.value.on('click', e => {// 根据自定义属性改变轮廓样式，也可以进行弹框if (feature.value) {feature.value.setStyle();closer.value.onclick();}const features = map.value.getFeaturesAtPixel(e.pixel);const f = features.find(f => f.getProperties().pointer);if (f) {feature.value = f;f.setStyle(new Style({fill: new Fill({color: 'rgba(255, 255, 100, 0.5)'}),stroke: new Stroke({color: 'rgba(255, 255, 100, 1)',width: 3})}));const coordinate = e.coordinate;const hdms = toStringHDMS(toLonLat(coordinate));content.value.innerHTML = '<p>当前经纬度:</p><code>' + hdms + '</code>';overlay.value.setPosition(coordinate);}});closer.value.onclick = function () {overlay.value.setPosition(undefined);closer.value.blur();if (feature.value) {feature.value.setStyle();}return false;};
};
</script>
<style scoped lang="scss">
.map {width: 100%;height: 100%;
}
.ol-popup {position: absolute;background-color: rgba(255, 255, 255, 0.7);box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);padding: 15px;border-radius: 10px;border: 1px solid #cccccc;bottom: 12px;left: -50px;min-width: 280px;
}
.ol-popup:after,
.ol-popup:before {top: 100%;border: solid transparent;content: ' ';height: 0;width: 0;position: absolute;pointer-events: none;
}
.ol-popup:after {border-top-color: rgba(255, 255, 255, 0.7);border-width: 10px;left: 48px;margin-left: -10px;
}
.ol-popup:before {border-top-color: #cccccc;border-width: 11px;left: 48px;margin-left: -11px;
}
.ol-popup-closer {text-decoration: none;position: absolute;top: 2px;right: 8px;
}
.ol-popup-closer:after {content: '✖';
}
</style>
