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)