Skip to content

Commit a12943f

Browse files
songyumengsongyumeng
committed
【feature】ol mvt 支持设置多个要素高亮 & UT review by liqian
1 parent c282389 commit a12943f

File tree

8 files changed

+6834
-1894
lines changed

8 files changed

+6834
-1894
lines changed

‎dist/openlayers/iclient9-openlayers-es6.js

Lines changed: 2726 additions & 274 deletions
Large diffs are not rendered by default.

‎dist/openlayers/iclient9-openlayers-es6.min.js

Lines changed: 397 additions & 397 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/openlayers/iclient9-openlayers.js

Lines changed: 3393 additions & 997 deletions
Large diffs are not rendered by default.

‎dist/openlayers/iclient9-openlayers.min.js

Lines changed: 79 additions & 79 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@
120120
"fetch-jsonp": "1.0.6",
121121
"jsonsql": "0.2.5",
122122
"leaflet": "1.3.1",
123+
"lodash.remove": "^4.7.0",
123124
"lodash.topairs": "4.3.0",
124125
"mapbox-gl": "0.45.0",
125126
"mapv": "2.0.20",

‎src/openlayers/overlay/vectortile/MapboxStyles.js

Lines changed: 131 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
11
/* Copyright© 2000 - 2019 SuperMap Software Co.Ltd. All rights reserved.
22
* This program are made available under the terms of the Apache License, Version 2.0
33
* which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
4-
import ol from 'openlayers';
5-
import {
6-
FetchRequest,
7-
CommonUtil
8-
} from "@supermap/iclient-common";
9-
import {
10-
olExtends
11-
} from './olExtends'
12-
4+
import ol from "openlayers";
5+
import { FetchRequest, CommonUtil } from "@supermap/iclient-common";
6+
import { olExtends } from "./olExtends";
7+
import remove from "lodash.remove";
138

149
/**
1510
* @class ol.supermap.MapboxStyles
@@ -58,41 +53,42 @@ export class MapboxStyles extends ol.Observable {
5853
super();
5954
options = options || {};
6055
this.spriteRegEx = /^(.*)(\?.*)$/;
61-
this.defaultFont = ["DIN Offc Pro Medium",
62-
"Arial Unicode MS Regular"
63-
];
56+
this.defaultFont = ["DIN Offc Pro Medium", "Arial Unicode MS Regular"];
6457
this.map = options.map;
6558
this.source = options.source;
66-
this.styleTarget = options.style || options.url + '/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true';
59+
this.styleTarget =
60+
options.style || options.url + "/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true";
6761
this.resolutions = options.resolutions;
68-
this.selectedStyle = options.selectedStyle || function () {
69-
return new ol.style.Style({
70-
fill: new ol.style.Fill({
71-
color: 'rgba(255, 0, 0, 1)'
72-
}),
73-
stroke: new ol.style.Stroke({
74-
color: 'rgba(255, 0, 0, 1)',
75-
width: 10
76-
}),
77-
text: new ol.style.Text({
78-
font: 'normal 400 11.19px "Microsoft YaHei"',
79-
placement: 'point',
80-
fill: new ol.style.Fill({
81-
color: 'blue'
82-
})
83-
}),
84-
image: new ol.style.Circle({
85-
radius: 5,
62+
this.selectedObjects = [];
63+
this.selectedStyle =
64+
options.selectedStyle ||
65+
function() {
66+
return new ol.style.Style({
8667
fill: new ol.style.Fill({
87-
color: 'blue'
68+
color: "rgba(255, 0, 0, 1)"
69+
}),
70+
stroke: new ol.style.Stroke({
71+
color: "rgba(255, 0, 0, 1)",
72+
width: 10
73+
}),
74+
text: new ol.style.Text({
75+
font: 'normal 400 11.19px "Microsoft YaHei"',
76+
placement: "point",
77+
fill: new ol.style.Fill({
78+
color: "blue"
79+
})
80+
}),
81+
image: new ol.style.Circle({
82+
radius: 5,
83+
fill: new ol.style.Fill({
84+
color: "blue"
85+
})
8886
})
89-
})
90-
})
91-
}
87+
});
88+
};
9289
this.layersBySourceLayer = {};
9390
olExtends(this.map);
9491
this._loadStyle(this.styleTarget);
95-
9692
}
9793
/**
9894
* @function ol.supermap.MapboxStyles.prototype.getStyleFunction
@@ -114,34 +110,89 @@ export class MapboxStyles extends ol.Observable {
114110
const layers = [];
115111
for (let index = 0; index < this._mbStyle.layers.length; index++) {
116112
const layer = this._mbStyle.layers[index];
117-
if (layer['source-layer'] !== sourceLayer) {
113+
if (layer["source-layer"] !== sourceLayer) {
118114
continue;
119115
}
120116
layers.push(layer);
121-
122117
}
123118
this.layersBySourceLayer[sourceLayer] = layers;
124119
return layers;
125120
}
126121
/**
127122
* @function ol.supermap.MapboxStyles.prototype.setSelectedId
128-
* @description 设置选中要素，该要素将会用 `selectedStyle` 样式绘制。
123+
* @description 设置选中要素，该要素将会用 `selectedStyle` 样式绘制。调用该方法后需要调用 `ol.layer.VectorTile` 的 `changed`,才能生效。
129124
* @param {number} selectedId - 要素ID。
130125
* @param {string} sourceLayer - 要素所在图层名称。
131126
*/
132127
setSelectedId(selectedId, sourceLayer) {
133-
this.selectedObject = {
134-
selectedId: selectedId,
128+
this.selectedObjects = [];
129+
this.selectedObjects.push({
130+
id: selectedId,
135131
sourceLayer: sourceLayer
136-
};
132+
});
133+
}
134+
/**
135+
* @typedef {Object} ol.supermap.MapboxStyles.selectedObject
136+
* @description 要选择的要素对象。
137+
* @property {number} selectedId - 要素ID。
138+
* @property {string} sourceLayer - 要素所在图层名称。
139+
*/
140+
141+
/**
142+
* @function ol.supermap.MapboxStyles.prototype.setSelectedObjects
143+
* @version 10.x.x
144+
* @description 设置选中要素或要素数组，该要素将会用 `selectedStyle` 样式绘制。调用该方法后需要调用 `ol.layer.VectorTile` 的 `changed`,才能生效。
145+
* @param {ol.supermap.MapboxStyles.selectedObject|Array.<ol.supermap.MapboxStyles.selectedObject>} addSelectedObjects - 选择的要素或要素数组。
146+
*/
147+
setSelectedObjects(selectedObjects) {
148+
if (!Array.isArray(selectedObjects)) {
149+
selectedObjects = [selectedObjects];
150+
}
151+
this.selectedObjects = [];
152+
this.selectedObjects = selectedObjects;
153+
}
154+
/**
155+
* @function ol.supermap.MapboxStyles.prototype.addSelectedObjects
156+
* @version 10.x.x
157+
* @description 增加选中的要素或要素数组，该要素将会用 `selectedStyle` 样式绘制。调用该方法后需要调用 `ol.layer.VectorTile` 的 `changed`,才能生效。
158+
* @param {ol.supermap.MapboxStyles.selectedObject|Array.<ol.supermap.MapboxStyles.selectedObject>} addSelectedObjects - 选择的要素或要素数组。
159+
*/
160+
addSelectedObjects(selectedObjects) {
161+
if (!Array.isArray(selectedObjects)) {
162+
selectedObjects = [selectedObjects];
163+
}
164+
this.selectedObjects.push(...selectedObjects);
165+
}
166+
/**
167+
* @function ol.supermap.MapboxStyles.prototype.clearSelectedObjects
168+
* @version 10.x.x
169+
* @description 清空选中状态。调用该方法后需要调用 `ol.layer.VectorTile` 的 `changed`,才能生效。
170+
*/
171+
removeSelectedObjects(selectedObjects) {
172+
if (!Array.isArray(selectedObjects)) {
173+
selectedObjects = [selectedObjects];
174+
}
175+
selectedObjects.forEach(element => {
176+
remove(this.selectedObjects, obj => {
177+
return element.id === obj.id && element.sourceLayer === obj.sourceLayer;
178+
});
179+
});
180+
}
181+
/**
182+
* @function ol.supermap.MapboxStyles.prototype.clearSelectedObjects
183+
* @version 10.x.x
184+
* @description 清空选中状态。调用该方法后需要调用 `ol.layer.VectorTile` 的 `changed`,才能生效。
185+
*/
186+
clearSelectedObjects() {
187+
this.selectedObjects = [];
137188
}
138189
/**
139190
* @function ol.supermap.MapboxStyles.prototype.updateStyles
140191
* @description 更新图层样式。
141192
* @param {Object} layerStyles - 图层样式或图层样式数组。
142193
*/
143194
updateStyles(layerStyles) {
144-
if (Object.prototype.toString.call(layerStyles) !== '[object Array]') {
195+
if (Object.prototype.toString.call(layerStyles) !== "[object Array]") {
145196
layerStyles = [layerStyles];
146197
}
147198
const layerObj = {};
@@ -155,7 +206,7 @@ export class MapboxStyles extends ol.Observable {
155206
if (count >= layerStyles.length) {
156207
break;
157208
}
158-
const newLayerStyle = layerObj[oldLayerStyle.id]
209+
const newLayerStyle = layerObj[oldLayerStyle.id];
159210
if (!newLayerStyle) {
160211
continue;
161212
}
@@ -179,38 +230,38 @@ export class MapboxStyles extends ol.Observable {
179230
this._mbStyle = style;
180231
this._resolve();
181232
} else {
182-
FetchRequest.get(style).then(response =>
183-
response.json()).then(mbStyle => {
184-
this._mbStyle = mbStyle;
185-
this._resolve()
186-
});
233+
FetchRequest.get(style)
234+
.then(response => response.json())
235+
.then(mbStyle => {
236+
this._mbStyle = mbStyle;
237+
this._resolve();
238+
});
187239
}
188240
}
189241
_resolve() {
190-
if(!this.source){
242+
if (!this.source) {
191243
this.source = Object.keys(this._mbStyle.sources)[0];
192244
}
193245
if (this._mbStyle.sprite) {
194246
const spriteScale = window.devicePixelRatio >= 1.5 ? 0.5 : 1;
195-
const sizeFactor = spriteScale == 0.5 ? '@2x' : '';
247+
const sizeFactor = spriteScale == 0.5 ? "@2x" : "";
196248
//兼容一下iServer 等iServer修改
197-
this._mbStyle.sprite = this._mbStyle.sprite.replace('@2x', "");
198-
const spriteUrl = this._toSpriteUrl(this._mbStyle.sprite, this.path, sizeFactor + '.json');
249+
this._mbStyle.sprite = this._mbStyle.sprite.replace("@2x", "");
250+
const spriteUrl = this._toSpriteUrl(this._mbStyle.sprite, this.path, sizeFactor + ".json");
199251
FetchRequest.get(spriteUrl)
200-
.then(response =>
201-
response.json()).then(spritesJson => {
252+
.then(response => response.json())
253+
.then(spritesJson => {
202254
this._spriteData = spritesJson;
203-
this._spriteImageUrl = this._toSpriteUrl(this._mbStyle.sprite, this.path, sizeFactor + '.png');
255+
this._spriteImageUrl = this._toSpriteUrl(this._mbStyle.sprite, this.path, sizeFactor + ".png");
204256
this._spriteImage = null;
205257
const img = new Image();
206-
img.crossOrigin = 'anonymous';
258+
img.crossOrigin = "anonymous";
207259
img.onload = () => {
208260
this._spriteImage = img;
209261
this._initStyleFunction();
210262
};
211263
img.src = this._spriteImageUrl;
212-
213-
})
264+
});
214265
} else {
215266
this._initStyleFunction();
216267
}
@@ -230,7 +281,7 @@ export class MapboxStyles extends ol.Observable {
230281
* @event ol.supermap.MapboxStyles#styleloaded
231282
* @description 样式加载成功后触发。
232283
*/
233-
this.dispatchEvent('styleloaded');
284+
this.dispatchEvent("styleloaded");
234285
}
235286
_createStyleFunction() {
236287
if (this.map) {
@@ -239,22 +290,31 @@ export class MapboxStyles extends ol.Observable {
239290
this.featureStyleFuntion = this._getStyleFunction();
240291
}
241292
_getStyleFunction() {
242-
this.fun = window.olms.stylefunction({
243-
setStyle: function () {},
244-
set: function () {},
245-
changed: function () {}
246-
}, this._mbStyle, this.source, this.resolutions, this._spriteData, "", this._spriteImage);
293+
this.fun = window.olms.stylefunction(
294+
{ setStyle: function() {}, set: function() {}, changed: function() {} },
295+
this._mbStyle,
296+
this.source,
297+
this.resolutions,
298+
this._spriteData,
299+
"",
300+
this._spriteImage
301+
);
247302
return (feature, resolution) => {
248303
const style = this.fun(feature, resolution);
249-
if (this.selectedObject && this.selectedObject.selectedId === feature.getId() && this.selectedObject.sourceLayer === feature.get('layer')) {
304+
if (
305+
this.selectedObjects.length > 0 &&
306+
this.selectedObjects.find(element => {
307+
return element.id === feature.getId() && element.sourceLayer === feature.get("layer");
308+
})
309+
) {
250310
const styleIndex = style && style[0] ? style[0].getZIndex() : 99999;
251311
let selectStyles = this.selectedStyle(feature, resolution);
252312
if (!Array.isArray(selectStyles)) {
253313
selectStyles = [selectStyles];
254314
}
255315
for (let index = 0; index < selectStyles.length; index++) {
256316
const selectStyle = selectStyles[index];
257-
if (feature.getGeometry().getType() === 'Point' && style[0].getText() && selectStyle.getText()) {
317+
if (feature.getGeometry().getType() === "Point" && style[0].getText() && selectStyle.getText()) {
258318
selectStyle.setFill(null);
259319
selectStyle.setStroke(null);
260320
selectStyle.setImage();
@@ -263,14 +323,12 @@ export class MapboxStyles extends ol.Observable {
263323
selectStyle.setZIndex(styleIndex);
264324
}
265325
return selectStyles;
266-
267326
}
268327
return style;
269-
}
270-
328+
};
271329
}
272330
_withPath(url, path) {
273-
if (path && url.indexOf('http') != 0) {
331+
if (path && url.indexOf("http") != 0) {
274332
url = path + url;
275333
}
276334
return url;
@@ -279,9 +337,7 @@ export class MapboxStyles extends ol.Observable {
279337
_toSpriteUrl(url, path, extension) {
280338
url = this._withPath(url, path);
281339
const parts = url.match(this.spriteRegEx);
282-
return parts ?
283-
parts[1] + extension + (parts.length > 2 ? parts[2] : '') :
284-
url + extension;
340+
return parts ? parts[1] + extension + (parts.length > 2 ? parts[2] : "") : url + extension;
285341
}
286342
}
287-
ol.supermap.MapboxStyles = MapboxStyles;
343+
ol.supermap.MapboxStyles = MapboxStyles;

‎src/openlayers/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"proj4": "2.3.15",
2323
"jsonsql": "0.2.5",
2424
"xlsx": "0.12.13",
25-
"canvg": "1.5.3"
25+
"canvg": "1.5.3",
26+
"lodash.remove": "^4.7.0"
2627
}
2728
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy