my-openlayer 0.1.5 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/core/MeasureHandler.d.ts +58 -0
- package/dist/core/MeasureHandler.js +296 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/types.d.ts +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import Map from "ol/Map";
|
|
2
|
+
import { MeasureHandlerType } from "../types";
|
|
3
|
+
/**
|
|
4
|
+
* @classdesc MeausreHandler
|
|
5
|
+
*/
|
|
6
|
+
export default class MeasureHandler {
|
|
7
|
+
private readonly source;
|
|
8
|
+
private readonly vector;
|
|
9
|
+
private sketch;
|
|
10
|
+
private helpTooltipElement;
|
|
11
|
+
private helpTooltip;
|
|
12
|
+
private _map;
|
|
13
|
+
private measureTooltipElement;
|
|
14
|
+
private measureTooltip;
|
|
15
|
+
private continuePolygonMsg;
|
|
16
|
+
private continueLineMsg;
|
|
17
|
+
private _tipsCollection;
|
|
18
|
+
private _mouseListener;
|
|
19
|
+
private _draw;
|
|
20
|
+
constructor(map: Map);
|
|
21
|
+
/**
|
|
22
|
+
* destory the object
|
|
23
|
+
*/
|
|
24
|
+
destory(): void;
|
|
25
|
+
/**
|
|
26
|
+
* Format length output.
|
|
27
|
+
* @param {LineString} line The line.
|
|
28
|
+
* @return {string} The formatted length.
|
|
29
|
+
*/
|
|
30
|
+
formatLength(line: any): string;
|
|
31
|
+
/**
|
|
32
|
+
* Format area output.
|
|
33
|
+
* @param {Polygon} polygon The polygon.
|
|
34
|
+
* @return {string} Formatted area.
|
|
35
|
+
*/
|
|
36
|
+
formatArea(polygon: any): string;
|
|
37
|
+
/**
|
|
38
|
+
*
|
|
39
|
+
* @param {String} type the values such as 'Polygon','LineString'
|
|
40
|
+
*/
|
|
41
|
+
start(type: MeasureHandlerType): void;
|
|
42
|
+
/**
|
|
43
|
+
* end the measure drawing
|
|
44
|
+
*/
|
|
45
|
+
end(): void;
|
|
46
|
+
/**
|
|
47
|
+
* Creates a new help tooltip
|
|
48
|
+
*/
|
|
49
|
+
createHelpTooltip(): void;
|
|
50
|
+
/**
|
|
51
|
+
* Creates a new measure tooltip
|
|
52
|
+
*/
|
|
53
|
+
createMeasureTooltip(): void;
|
|
54
|
+
/**
|
|
55
|
+
* clean the all result of measure
|
|
56
|
+
*/
|
|
57
|
+
clean(): void;
|
|
58
|
+
}
|
|
@@ -0,0 +1,296 @@
|
|
|
1
|
+
import Draw from 'ol/interaction/Draw.js';
|
|
2
|
+
import Overlay from 'ol/Overlay.js';
|
|
3
|
+
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style.js';
|
|
4
|
+
import { LineString, Polygon } from 'ol/geom.js';
|
|
5
|
+
import { Vector as VectorSource } from 'ol/source.js';
|
|
6
|
+
import { Vector as VectorLayer } from 'ol/layer.js';
|
|
7
|
+
import { getArea, getLength } from 'ol/sphere.js';
|
|
8
|
+
import { unByKey } from 'ol/Observable.js';
|
|
9
|
+
/**
|
|
10
|
+
* @classdesc MeausreHandler
|
|
11
|
+
*/
|
|
12
|
+
export default class MeasureHandler {
|
|
13
|
+
constructor(map) {
|
|
14
|
+
this._map = null;
|
|
15
|
+
this._draw = null;
|
|
16
|
+
this.source = new VectorSource();
|
|
17
|
+
this.vector = new VectorLayer({
|
|
18
|
+
source: this.source,
|
|
19
|
+
style: new Style({
|
|
20
|
+
fill: new Fill({
|
|
21
|
+
color: 'rgba(255, 255, 255, 0.2)',
|
|
22
|
+
}),
|
|
23
|
+
stroke: new Stroke({
|
|
24
|
+
color: 'rgba(0, 255, 0, 0.8)',
|
|
25
|
+
lineDash: [10, 10],
|
|
26
|
+
width: 2,
|
|
27
|
+
}),
|
|
28
|
+
image: new CircleStyle({
|
|
29
|
+
radius: 5,
|
|
30
|
+
stroke: new Stroke({
|
|
31
|
+
color: 'rgba(0, 255, 0, 0.8)'
|
|
32
|
+
}),
|
|
33
|
+
fill: new Fill({
|
|
34
|
+
color: 'rgba(255, 255, 255, 0.2)',
|
|
35
|
+
}),
|
|
36
|
+
}),
|
|
37
|
+
}),
|
|
38
|
+
zIndex: 999,
|
|
39
|
+
});
|
|
40
|
+
this._map = map;
|
|
41
|
+
/**
|
|
42
|
+
* Currently drawn feature.
|
|
43
|
+
* @type {import("ol/Feature.js").default}
|
|
44
|
+
*/
|
|
45
|
+
this.sketch = null;
|
|
46
|
+
/**
|
|
47
|
+
* The help tooltip element.
|
|
48
|
+
* @type {HTMLElement}
|
|
49
|
+
*/
|
|
50
|
+
this.helpTooltipElement = null;
|
|
51
|
+
/**
|
|
52
|
+
* Overlay to show the help messages.
|
|
53
|
+
* @type {Overlay}
|
|
54
|
+
*/
|
|
55
|
+
this.helpTooltip = null;
|
|
56
|
+
/**
|
|
57
|
+
* The measure tooltip element.
|
|
58
|
+
* @type {HTMLElement}
|
|
59
|
+
*/
|
|
60
|
+
this.measureTooltipElement = null;
|
|
61
|
+
/**
|
|
62
|
+
* Overlay to show the measurement.
|
|
63
|
+
* @type {Overlay}
|
|
64
|
+
*/
|
|
65
|
+
this.measureTooltip = null;
|
|
66
|
+
/**
|
|
67
|
+
* Message to show when the user is drawing a polygon.
|
|
68
|
+
* @type {string}
|
|
69
|
+
*/
|
|
70
|
+
this.continuePolygonMsg = '双击结束绘制';
|
|
71
|
+
/**
|
|
72
|
+
* Message to show when the user is drawing a line.
|
|
73
|
+
* @type {string}
|
|
74
|
+
*/
|
|
75
|
+
this.continueLineMsg = '双击结束绘制';
|
|
76
|
+
/**
|
|
77
|
+
* contain the the overlays of tips
|
|
78
|
+
* @type {Array}
|
|
79
|
+
*/
|
|
80
|
+
this._tipsCollection = [];
|
|
81
|
+
/**
|
|
82
|
+
*
|
|
83
|
+
* @param evt
|
|
84
|
+
* @private
|
|
85
|
+
*/
|
|
86
|
+
this._mouseListener = (evt) => {
|
|
87
|
+
if (evt.dragging) {
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
90
|
+
/** @type {string} */
|
|
91
|
+
let helpMsg = '单击开始绘制';
|
|
92
|
+
if (this.sketch) {
|
|
93
|
+
const geom = this.sketch.getGeometry();
|
|
94
|
+
if (geom instanceof Polygon) {
|
|
95
|
+
helpMsg = this.continuePolygonMsg;
|
|
96
|
+
}
|
|
97
|
+
else if (geom instanceof LineString) {
|
|
98
|
+
helpMsg = this.continueLineMsg;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
if (this.helpTooltipElement) {
|
|
102
|
+
this.helpTooltipElement.innerHTML = helpMsg;
|
|
103
|
+
}
|
|
104
|
+
this.helpTooltip?.setPosition(evt.coordinate);
|
|
105
|
+
this._map?.addLayer(this.vector);
|
|
106
|
+
};
|
|
107
|
+
}
|
|
108
|
+
/**
|
|
109
|
+
* destory the object
|
|
110
|
+
*/
|
|
111
|
+
destory() {
|
|
112
|
+
this.clean();
|
|
113
|
+
this._map?.removeLayer(this.vector);
|
|
114
|
+
}
|
|
115
|
+
/**
|
|
116
|
+
* Format length output.
|
|
117
|
+
* @param {LineString} line The line.
|
|
118
|
+
* @return {string} The formatted length.
|
|
119
|
+
*/
|
|
120
|
+
formatLength(line) {
|
|
121
|
+
const length = getLength(line, {
|
|
122
|
+
projection: "EPSG:4326"
|
|
123
|
+
});
|
|
124
|
+
let output;
|
|
125
|
+
if (length > 100) {
|
|
126
|
+
output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
|
|
127
|
+
}
|
|
128
|
+
else {
|
|
129
|
+
output = Math.round(length * 100) / 100 + ' ' + 'm';
|
|
130
|
+
}
|
|
131
|
+
return output;
|
|
132
|
+
}
|
|
133
|
+
/**
|
|
134
|
+
* Format area output.
|
|
135
|
+
* @param {Polygon} polygon The polygon.
|
|
136
|
+
* @return {string} Formatted area.
|
|
137
|
+
*/
|
|
138
|
+
formatArea(polygon) {
|
|
139
|
+
const area = getArea(polygon, {
|
|
140
|
+
projection: "EPSG:4326"
|
|
141
|
+
});
|
|
142
|
+
let output;
|
|
143
|
+
if (area > 10000) {
|
|
144
|
+
output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>';
|
|
145
|
+
}
|
|
146
|
+
else {
|
|
147
|
+
output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>';
|
|
148
|
+
}
|
|
149
|
+
return output;
|
|
150
|
+
}
|
|
151
|
+
/**
|
|
152
|
+
*
|
|
153
|
+
* @param {String} type the values such as 'Polygon','LineString'
|
|
154
|
+
*/
|
|
155
|
+
start(type) {
|
|
156
|
+
if (!this._map) {
|
|
157
|
+
throw new Error("MeasureHandler has not been register to the map");
|
|
158
|
+
}
|
|
159
|
+
this.createMeasureTooltip();
|
|
160
|
+
this.createHelpTooltip();
|
|
161
|
+
if (this._draw) {
|
|
162
|
+
this._map.removeInteraction(this._draw);
|
|
163
|
+
}
|
|
164
|
+
this._draw = new Draw({
|
|
165
|
+
source: this.source,
|
|
166
|
+
type: type,
|
|
167
|
+
style: (feature) => {
|
|
168
|
+
const geometryType = feature.getGeometry()?.getType();
|
|
169
|
+
if (geometryType === type || geometryType === 'Point') {
|
|
170
|
+
return new Style({
|
|
171
|
+
fill: new Fill({
|
|
172
|
+
color: 'rgba(220, 255, 255, 0.2)',
|
|
173
|
+
}),
|
|
174
|
+
stroke: new Stroke({
|
|
175
|
+
color: 'rgba(255, 0, 0, 0.7)',
|
|
176
|
+
lineDash: [10, 10],
|
|
177
|
+
width: 2,
|
|
178
|
+
}),
|
|
179
|
+
image: new CircleStyle({
|
|
180
|
+
radius: 5,
|
|
181
|
+
stroke: new Stroke({
|
|
182
|
+
color: 'rgba(255, 0, 0, 0.7)',
|
|
183
|
+
}),
|
|
184
|
+
fill: new Fill({
|
|
185
|
+
color: 'rgba(255, 255, 255, 0.2)',
|
|
186
|
+
}),
|
|
187
|
+
}),
|
|
188
|
+
});
|
|
189
|
+
}
|
|
190
|
+
},
|
|
191
|
+
});
|
|
192
|
+
this._map.addInteraction(this._draw);
|
|
193
|
+
let listener;
|
|
194
|
+
this._draw.on('drawstart', (evt) => {
|
|
195
|
+
// set sketch
|
|
196
|
+
this.sketch = evt.feature;
|
|
197
|
+
/** @type {import("ol/coordinate.js").Coordinate|undefined} */
|
|
198
|
+
let tooltipCoord = evt?.coordinate;
|
|
199
|
+
listener = this.sketch.getGeometry().on('change', (evt) => {
|
|
200
|
+
const geom = evt.target;
|
|
201
|
+
let output;
|
|
202
|
+
if (geom instanceof Polygon) {
|
|
203
|
+
output = this.formatArea(geom);
|
|
204
|
+
tooltipCoord = geom.getInteriorPoint().getCoordinates();
|
|
205
|
+
}
|
|
206
|
+
else if (geom instanceof LineString) {
|
|
207
|
+
output = this.formatLength(geom);
|
|
208
|
+
tooltipCoord = geom.getLastCoordinate();
|
|
209
|
+
}
|
|
210
|
+
if (this.measureTooltipElement) {
|
|
211
|
+
this.measureTooltipElement.innerHTML = output;
|
|
212
|
+
}
|
|
213
|
+
this.measureTooltip?.setPosition(tooltipCoord);
|
|
214
|
+
});
|
|
215
|
+
});
|
|
216
|
+
this._draw.on('drawend', () => {
|
|
217
|
+
if (this.measureTooltipElement) {
|
|
218
|
+
this.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
|
|
219
|
+
}
|
|
220
|
+
this.measureTooltip?.setOffset([0, -7]);
|
|
221
|
+
// unset sketch
|
|
222
|
+
this.sketch = null;
|
|
223
|
+
// unset tooltip so that a new one can be created
|
|
224
|
+
this.measureTooltipElement = null;
|
|
225
|
+
this.createMeasureTooltip();
|
|
226
|
+
unByKey(listener);
|
|
227
|
+
});
|
|
228
|
+
this._map.on('pointermove', this._mouseListener);
|
|
229
|
+
}
|
|
230
|
+
/**
|
|
231
|
+
* end the measure drawing
|
|
232
|
+
*/
|
|
233
|
+
end() {
|
|
234
|
+
if (this._draw) {
|
|
235
|
+
this._map?.removeInteraction(this._draw);
|
|
236
|
+
}
|
|
237
|
+
if (this.helpTooltipElement) {
|
|
238
|
+
this.helpTooltipElement.parentNode?.removeChild(this.helpTooltipElement);
|
|
239
|
+
this.helpTooltipElement = null;
|
|
240
|
+
}
|
|
241
|
+
if (this.measureTooltipElement) {
|
|
242
|
+
this.measureTooltipElement.parentNode?.removeChild(this.measureTooltipElement);
|
|
243
|
+
this.measureTooltipElement = null;
|
|
244
|
+
}
|
|
245
|
+
this._map?.un("pointermove", this._mouseListener);
|
|
246
|
+
}
|
|
247
|
+
/**
|
|
248
|
+
* Creates a new help tooltip
|
|
249
|
+
*/
|
|
250
|
+
createHelpTooltip() {
|
|
251
|
+
if (this.helpTooltipElement) {
|
|
252
|
+
this.helpTooltipElement.parentNode?.removeChild(this.helpTooltipElement);
|
|
253
|
+
}
|
|
254
|
+
this.helpTooltipElement = document.createElement('div');
|
|
255
|
+
this.helpTooltipElement.className = 'ol-tooltip';
|
|
256
|
+
this.helpTooltip = new Overlay({
|
|
257
|
+
element: this.helpTooltipElement,
|
|
258
|
+
offset: [15, 0],
|
|
259
|
+
positioning: 'center-left',
|
|
260
|
+
});
|
|
261
|
+
this._map?.addOverlay(this.helpTooltip);
|
|
262
|
+
this._tipsCollection.push(this.helpTooltip);
|
|
263
|
+
}
|
|
264
|
+
/**
|
|
265
|
+
* Creates a new measure tooltip
|
|
266
|
+
*/
|
|
267
|
+
createMeasureTooltip() {
|
|
268
|
+
if (this.measureTooltipElement) {
|
|
269
|
+
this.measureTooltipElement.parentNode?.removeChild(this.measureTooltipElement);
|
|
270
|
+
}
|
|
271
|
+
this.measureTooltipElement = document.createElement('div');
|
|
272
|
+
this.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
|
|
273
|
+
this.measureTooltip = new Overlay({
|
|
274
|
+
element: this.measureTooltipElement,
|
|
275
|
+
offset: [0, -15],
|
|
276
|
+
positioning: 'bottom-center',
|
|
277
|
+
stopEvent: false,
|
|
278
|
+
insertFirst: false,
|
|
279
|
+
});
|
|
280
|
+
this._tipsCollection.push(this.measureTooltip);
|
|
281
|
+
this._map?.addOverlay(this.measureTooltip);
|
|
282
|
+
}
|
|
283
|
+
/**
|
|
284
|
+
* clean the all result of measure
|
|
285
|
+
*/
|
|
286
|
+
clean() {
|
|
287
|
+
this._tipsCollection.forEach((item) => {
|
|
288
|
+
this._map?.removeOverlay(item);
|
|
289
|
+
});
|
|
290
|
+
this.source.clear(true);
|
|
291
|
+
if (this._draw) {
|
|
292
|
+
this._map?.removeInteraction(this._draw);
|
|
293
|
+
}
|
|
294
|
+
this._tipsCollection = [];
|
|
295
|
+
}
|
|
296
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -5,5 +5,6 @@ import MapTools from "./core/MapTools";
|
|
|
5
5
|
import Polygon from "./core/Polygon";
|
|
6
6
|
import MapBaseLayers from "./core/MapBaseLayers";
|
|
7
7
|
import DomPoint from "./core/DomPoint";
|
|
8
|
-
|
|
8
|
+
import MeasureHandler from "./core/MeasureHandler";
|
|
9
|
+
export { Line, Point, MapTools, Polygon, MapBaseLayers, DomPoint, MeasureHandler };
|
|
9
10
|
export default MyOl;
|
package/dist/index.js
CHANGED
|
@@ -5,5 +5,6 @@ import MapTools from "./core/MapTools";
|
|
|
5
5
|
import Polygon from "./core/Polygon";
|
|
6
6
|
import MapBaseLayers from "./core/MapBaseLayers";
|
|
7
7
|
import DomPoint from "./core/DomPoint";
|
|
8
|
-
|
|
8
|
+
import MeasureHandler from "./core/MeasureHandler";
|
|
9
|
+
export { Line, Point, MapTools, Polygon, MapBaseLayers, DomPoint, MeasureHandler };
|
|
9
10
|
export default MyOl;
|
package/dist/types.d.ts
CHANGED