|
@@ -102,8 +102,9 @@ export class olMap {
|
|
|
private anyLine;
|
|
|
private scale;
|
|
|
// 标绘图层
|
|
|
- private plotLayers = [];
|
|
|
+ private plotLayers = {};
|
|
|
private addressMarker;
|
|
|
+ private addPoints = [];
|
|
|
|
|
|
constructor(options) {
|
|
|
this.options = options;
|
|
@@ -150,8 +151,8 @@ export class olMap {
|
|
|
condition: click,
|
|
|
style: null,
|
|
|
filter: (feature, layer) => {
|
|
|
- // 只有vectorLayer图层可选择
|
|
|
- return layer === this.vectorLayer;
|
|
|
+ // 检查当前图层是否在 plotLayers 中
|
|
|
+ return Object.values(this.plotLayers).includes(layer);
|
|
|
}
|
|
|
});
|
|
|
this.map.addInteraction(this.select);
|
|
@@ -161,7 +162,7 @@ export class olMap {
|
|
|
const extData = feature.get('extData');
|
|
|
if (!!feature) {
|
|
|
this.clickMarker = feature;
|
|
|
- if (['1', '2'].includes(extData.type)) {
|
|
|
+ if (['1', '2'].includes(extData.type)) {
|
|
|
// 多点位 单点
|
|
|
if (this.selectedFeature !== feature) {
|
|
|
if (this.selectedFeature) {
|
|
@@ -665,6 +666,32 @@ export class olMap {
|
|
|
}
|
|
|
return style;
|
|
|
}
|
|
|
+ // 添加搜索的标记的
|
|
|
+ addSearchMarker(item) {
|
|
|
+ const view = this.map.getView();
|
|
|
+ view.setZoom(18);
|
|
|
+ view.setCenter([Number(item.longitude), Number(item.latitude)]);
|
|
|
+ // 获取到上一次的搜索标记并移除
|
|
|
+ const index = this.markers.findIndex((m) => {
|
|
|
+ return m.dataType === 'search';
|
|
|
+ });
|
|
|
+ if (index > -1) {
|
|
|
+ this.markers.splice(index, 1);
|
|
|
+ }
|
|
|
+ if (!this.plotLayers['search']) {
|
|
|
+ this.plotLayers['search'] = new VectorLayer({
|
|
|
+ source: new VectorSource({
|
|
|
+ features: []
|
|
|
+ })
|
|
|
+ });
|
|
|
+ this.map.addLayer(this.plotLayers['search']);
|
|
|
+ } else {
|
|
|
+ this.plotLayers['search'].getSource().clear();
|
|
|
+ }
|
|
|
+ this.addMarker2({'search': item});
|
|
|
+ this.clickMarker = item;
|
|
|
+ this.options.onMarkerClick(item);
|
|
|
+ }
|
|
|
addMarker(points) {
|
|
|
this.clearMarker();
|
|
|
const vectorSource = new VectorSource({
|
|
@@ -706,13 +733,16 @@ export class olMap {
|
|
|
this.vectorLayer.setSource(clusterSource);
|
|
|
}
|
|
|
addMarker2(obj) {
|
|
|
- this.clearMarker2('point2');
|
|
|
+ this.clearMarker2('point');
|
|
|
+ if (!!this.plotLayers['point']) {
|
|
|
+ this.markers = [];
|
|
|
+ }
|
|
|
let hideInfoFlag = true;
|
|
|
Object.keys(obj).forEach((key: string) => {
|
|
|
const data = obj[key];
|
|
|
+ const name = key === 'search' ? 'search' : 'point';
|
|
|
if (this.clickMarker) {
|
|
|
const extData = this.clickMarker.get('extData');
|
|
|
- console.log(extData.id, data.id);
|
|
|
if (data.id === extData.id) {
|
|
|
hideInfoFlag = false;
|
|
|
data.isHover = true;
|
|
@@ -749,11 +779,11 @@ export class olMap {
|
|
|
})
|
|
|
})
|
|
|
);
|
|
|
- this.vectorLayer.getSource().addFeature(feature);
|
|
|
+ this.plotLayers[name].getSource().addFeature(feature);
|
|
|
this.markers.push(data);
|
|
|
} else {
|
|
|
// 单个点
|
|
|
- const iconConfig = iconList[data.dataType] || iconList.common;
|
|
|
+ const iconConfig = iconList[data.dataType] || (name === 'search' ? iconList.common2 : iconList.common);
|
|
|
data.image = iconConfig.image;
|
|
|
data.imageHover = iconConfig.imageHover;
|
|
|
data.size = iconConfig.size;
|
|
@@ -792,7 +822,7 @@ export class olMap {
|
|
|
})
|
|
|
})
|
|
|
);
|
|
|
- this.vectorLayer.getSource().addFeature(feature);
|
|
|
+ this.plotLayers[name].getSource().addFeature(feature);
|
|
|
};
|
|
|
img.src = data.image; // 设置图片的 URL,触发加载
|
|
|
this.markers.push(data);
|
|
@@ -821,7 +851,7 @@ export class olMap {
|
|
|
});
|
|
|
this.map.addLayer(this.plotLayers[name]);
|
|
|
} else {
|
|
|
- this.vectorLayer.getSource().clear();
|
|
|
+ this.plotLayers[name].getSource().clear();
|
|
|
this.clickMarker = null;
|
|
|
this.hideInfo();
|
|
|
}
|