<template>
<div
class="my-road-text-popup"
ref="popup"
>{{roadText}}</div>
</template>
<script>
import Select from 'ol/interaction/Select';
import VectorLayer from 'ol/layer/Vector';
import { Vector as VectorSource } from 'ol/source';
import {
readEncWkt,
createOtherPolygonStyle,
createCircelStyle,
createTextStyle,
} from '@/utils/geoUtil';
import { Style } from 'ol/style';
import { pointerMove } from 'ol/events/condition';
import Overlay from 'ol/Overlay';
import { darkGrayColor, grayColor, lightBLueColor } from '@/api/mapConfig';
export default {
name: 'ReferenceLayer',
props: {
map: Object,
refDateList: {},
codeList: {},
},
data() {
return {
roadText: undefined,
layerList: [],
overlay: undefined,
};
},
mounted() {
this.initOverlay();
},
methods: {
//移除图层
removeLayers() {
if (this.layerList.length > 0) {
for (let layer of this.layerList) {
this.map.removeLayer(layer);
}
}
this.layerList = [];
this.roadText = '';
},
initLayer(arr) {
for (let item of arr) {
let layer = new VectorLayer({
code: 'con_' + item.id,
name: item.layerName,
groupName: '参考数据',
style: function (feature) {
return feature.get('style');
},
source: new VectorSource({ wrapX: false }),
});
switch (item.layoutLayerType) {
case 'plane':
layer.setZIndex(1);
break;
case 'line':
layer.setZIndex(2);
break;
case 'point':
layer.setZIndex(3);
break;
}
this.layerList.push(layer);
this.map.addLayer(layer);
}
this.initHoverSelected();
},
initHoverSelected() {
let selectPointerMove = new Select({
condition: pointerMove,
layers: this.layerList,
style: (feature) => {
const pro = feature.getProperties();
if (pro.type === 'point') {
return this.pointStyle(pro.name, lightBLueColor);
} else if (pro.type === 'plane') {
return createOtherPolygonStyle(lightBLueColor, 2);
} else {
return createOtherPolygonStyle(lightBLueColor, 10);
}
},
});
this.map.addInteraction(selectPointerMove);
selectPointerMove.on(['select', 'remove', 'add'], (e) => {
this.overlay.setPosition(undefined);
let features = e.target.getFeatures().getArray();
if (features.length == 0) {
return;
}
let feature = features[0];
let pro = feature.getProperties();
//清除选中的样式
// selectPointerMove.getFeatures().clear();
if (pro.type === 'point') {
return;
}
this.roadText = pro.name;
this.overlay.setPosition(e.mapBrowserEvent.coordinate);
});
},
pointStyle(name, color) {
const dom = {
textAlign: 'center',
color: darkGrayColor,
font: '12px sans-serif',
offsetY: -10,
};
return new Style({
image: createCircelStyle(color, 4),
text: createTextStyle(name, dom),
});
},
initOverlay() {
let dom = this.$refs.popup;
this.overlay = new Overlay({
element: dom,
autoPan: false,
// offset: [10, 10],
});
this.map.addOverlay(this.overlay);
},
addFeatures(arr) {
if (arr && arr.length > 0) {
arr.forEach((polygon) => {
let feature = readEncWkt(polygon.theGeom);
let pro = {
name: polygon.name,
type: polygon.layoutLayerType,
layerCode: 'con_' + polygon.collectLayoutLayerId,
};
if (pro.type === 'point') {
feature.set('style', this.pointStyle(pro.name, darkGrayColor));
}
if (pro.type === 'line') {
feature.set('style', createOtherPolygonStyle(darkGrayColor, 10));
}
if (pro.type === 'plane') {
feature.set('style', createOtherPolygonStyle(darkGrayColor, 1));
}
feature.setProperties(pro);
this.layerList
.find((layer) => layer.getProperties().code === pro.layerCode)
.getSource()
.addFeature(feature);
});
}
},
clearFeatures() {
this.roadText = '';
if (this.layerList.length > 0) {
for (let layer of this.layerList) {
layer.getSource().clear();
}
}
},
},
};
</script>
<style lang="scss" scoped>
.my-road-text-popup {
font-size: 14px;
}
</style>
openlayers之鼠标浮动显示feature的名称并高亮显示
于 2022-07-07 16:06:30 首次发布
关键词由CSDN通过智能技术生成