my-openlayer 0.0.16 → 0.0.18
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/MyOl.d.ts +96 -0
- package/dist/MyOl.js +248 -0
- package/dist/core/Line.js +1 -1
- package/dist/core/Point.js +2 -2
- package/dist/core/Polygon.js +5 -5
- package/dist/index.d.ts +7 -94
- package/dist/index.js +6 -242
- package/dist/types.d.ts +2 -2
- package/package.json +1 -1
package/dist/MyOl.d.ts
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import View from "ol/View";
|
|
2
|
+
import Map from "ol/Map";
|
|
3
|
+
import Polygon from "./core/Polygon";
|
|
4
|
+
import Point from "./core/Point";
|
|
5
|
+
import Line from "./core/Line";
|
|
6
|
+
import MapTools from "./core/MapTools";
|
|
7
|
+
import { OptionsType, MapInitType, MapbaseType } from './types';
|
|
8
|
+
export default class MyOl {
|
|
9
|
+
map: Map;
|
|
10
|
+
private baseLayers;
|
|
11
|
+
private polygon;
|
|
12
|
+
private mapTools;
|
|
13
|
+
private point;
|
|
14
|
+
private line;
|
|
15
|
+
private readonly options;
|
|
16
|
+
static DefaultOptions: MapInitType;
|
|
17
|
+
constructor(id: string, options: MapInitType);
|
|
18
|
+
/**
|
|
19
|
+
* 获取视图
|
|
20
|
+
* @param options 视图配置
|
|
21
|
+
* @param options.center 中心点
|
|
22
|
+
* @param options.zoom 缩放级别
|
|
23
|
+
* @param options.minZoom 最小缩放级别
|
|
24
|
+
* @param options.maxZoom 最大缩放级别
|
|
25
|
+
* @param options.extent 视图范围
|
|
26
|
+
* @returns View
|
|
27
|
+
*/
|
|
28
|
+
static getView(options?: MapInitType): View;
|
|
29
|
+
/**
|
|
30
|
+
* 获取 地图 面 操作
|
|
31
|
+
* @returns Polygon
|
|
32
|
+
*/
|
|
33
|
+
getPolygon(): Polygon;
|
|
34
|
+
getMapBaseLayers(): any;
|
|
35
|
+
/**
|
|
36
|
+
* 设置底图
|
|
37
|
+
*/
|
|
38
|
+
setMapLayer(type?: MapbaseType): void;
|
|
39
|
+
setZhujiMapLayer(show: boolean): void;
|
|
40
|
+
/**
|
|
41
|
+
* 设置地图边界
|
|
42
|
+
*/
|
|
43
|
+
addPolygonToMap(data: any, type: string | undefined, options: OptionsType): void;
|
|
44
|
+
/**
|
|
45
|
+
* 设置 图片致地图
|
|
46
|
+
* @param layerName 图层名称
|
|
47
|
+
* @param img 图片地址
|
|
48
|
+
* @param extent 图片范围
|
|
49
|
+
* @param options 图片配置
|
|
50
|
+
*/
|
|
51
|
+
setImgLayer(layerName: string, img: string, extent: number[], options?: {}): void;
|
|
52
|
+
/**
|
|
53
|
+
* 隐藏&展示图层
|
|
54
|
+
* @param layerName 图层名称
|
|
55
|
+
* @param show 是否显示
|
|
56
|
+
*/
|
|
57
|
+
showMapLayer(layerName: string, show?: boolean): boolean;
|
|
58
|
+
/**
|
|
59
|
+
* 获取 地图 点 操作
|
|
60
|
+
* @returns Point
|
|
61
|
+
*/
|
|
62
|
+
getPoint(): Point;
|
|
63
|
+
/**
|
|
64
|
+
* 获取 地图 线 操作
|
|
65
|
+
* @returns Line
|
|
66
|
+
*/
|
|
67
|
+
getLine(): Line;
|
|
68
|
+
/**
|
|
69
|
+
* 设置闪烁点
|
|
70
|
+
* @param twinkleList 闪烁点数据
|
|
71
|
+
* @param className 闪烁点样式
|
|
72
|
+
* @param key 闪烁点索引
|
|
73
|
+
*/
|
|
74
|
+
setFlashWarnPoint(twinkleList: any[], className: string, key: string): void;
|
|
75
|
+
/**
|
|
76
|
+
* 获取 地图 工具 操作
|
|
77
|
+
* @returns MapTools
|
|
78
|
+
*/
|
|
79
|
+
getTools(): MapTools;
|
|
80
|
+
restPosition(duration?: number): void;
|
|
81
|
+
/**
|
|
82
|
+
* 地图定位
|
|
83
|
+
* @param lgtd 经度
|
|
84
|
+
* @param lttd 纬度
|
|
85
|
+
* @param zoom 缩放级别
|
|
86
|
+
* @param duration 动画时间
|
|
87
|
+
*/
|
|
88
|
+
locationAction(lgtd: number, lttd: number, zoom?: number, duration?: number): void;
|
|
89
|
+
/**
|
|
90
|
+
* 地图监听事件
|
|
91
|
+
* @param eventType 事件类型
|
|
92
|
+
* @param clickType 点击类型
|
|
93
|
+
* @param callback 回调函数
|
|
94
|
+
*/
|
|
95
|
+
mapOnEvent(eventType: string | undefined, callback: (feature?: any, e?: any) => void, clickType?: 'point' | 'line' | 'polygon' | undefined): void;
|
|
96
|
+
}
|
package/dist/MyOl.js
ADDED
|
@@ -0,0 +1,248 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { register as olProj4Register } from 'ol/proj/proj4';
|
|
3
|
+
import { Projection as olProjProjection, addProjection as olProjAddProjection, fromLonLat as olProjFromLonLat } from 'ol/proj';
|
|
4
|
+
import View from "ol/View";
|
|
5
|
+
import Map from "ol/Map";
|
|
6
|
+
import Polygon from "./core/Polygon";
|
|
7
|
+
import Point from "./core/Point";
|
|
8
|
+
import Line from "./core/Line";
|
|
9
|
+
import MapBaseLayers from "./core/MapBaseLayers";
|
|
10
|
+
import proj4 from "proj4";
|
|
11
|
+
import MapTools from "./core/MapTools";
|
|
12
|
+
import { defaults as defaultControls } from 'ol/control';
|
|
13
|
+
// import { Pixel } from "ol/pixel";
|
|
14
|
+
// import { FeatureLike } from "ol/Feature";
|
|
15
|
+
// import { MapBrowserEvent } from "ol";
|
|
16
|
+
class MyOl {
|
|
17
|
+
constructor(id, options) {
|
|
18
|
+
options.center = options.center || MyOl.DefaultOptions.center;
|
|
19
|
+
this.options = { ...MyOl.DefaultOptions, ...options };
|
|
20
|
+
this.map = new Map({
|
|
21
|
+
target: id, // 地图容器
|
|
22
|
+
view: MyOl.getView(this.options), // 视图
|
|
23
|
+
layers: this.options.layers || [],
|
|
24
|
+
controls: defaultControls({
|
|
25
|
+
zoom: false,
|
|
26
|
+
rotate: false,
|
|
27
|
+
attribution: false
|
|
28
|
+
}).extend([])
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* 获取视图
|
|
33
|
+
* @param options 视图配置
|
|
34
|
+
* @param options.center 中心点
|
|
35
|
+
* @param options.zoom 缩放级别
|
|
36
|
+
* @param options.minZoom 最小缩放级别
|
|
37
|
+
* @param options.maxZoom 最大缩放级别
|
|
38
|
+
* @param options.extent 视图范围
|
|
39
|
+
* @returns View
|
|
40
|
+
*/
|
|
41
|
+
static getView(options = MyOl.DefaultOptions) {
|
|
42
|
+
proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs");
|
|
43
|
+
proj4.defs("EPSG:4549", "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs");
|
|
44
|
+
olProj4Register(proj4);
|
|
45
|
+
const cgsc2000 = new olProjProjection({
|
|
46
|
+
code: "EPSG:4490",
|
|
47
|
+
extent: [-180, -90, 180, 90],
|
|
48
|
+
worldExtent: [-180, -90, 180, 90],
|
|
49
|
+
units: "degrees"
|
|
50
|
+
});
|
|
51
|
+
olProjAddProjection(cgsc2000);
|
|
52
|
+
// debugger
|
|
53
|
+
// 视图配置
|
|
54
|
+
const viewOptions = {
|
|
55
|
+
projection: cgsc2000, // 坐标系
|
|
56
|
+
center: olProjFromLonLat(options.center, cgsc2000), // 中心点
|
|
57
|
+
zoom: options.zoom || 10, // 缩放级别
|
|
58
|
+
minZoom: options.minZoom || 8,
|
|
59
|
+
maxZoom: options.maxZoom || 20
|
|
60
|
+
};
|
|
61
|
+
if (options.extent)
|
|
62
|
+
viewOptions.extent = options.extent;
|
|
63
|
+
return new View(viewOptions);
|
|
64
|
+
}
|
|
65
|
+
// ╔══════════╗
|
|
66
|
+
// ║ 地图 面 ║
|
|
67
|
+
// ╚══════════╝
|
|
68
|
+
/**
|
|
69
|
+
* 获取 地图 面 操作
|
|
70
|
+
* @returns Polygon
|
|
71
|
+
*/
|
|
72
|
+
getPolygon() {
|
|
73
|
+
if (!this.polygon)
|
|
74
|
+
this.polygon = new Polygon(this.map);
|
|
75
|
+
return this.polygon;
|
|
76
|
+
}
|
|
77
|
+
getMapBaseLayers() {
|
|
78
|
+
if (!this.baseLayers)
|
|
79
|
+
this.baseLayers = new MapBaseLayers(this.map, {
|
|
80
|
+
zIndex: 1,
|
|
81
|
+
mapClip: !!this.options.mapClipData,
|
|
82
|
+
mapClipData: this.options.mapClipData,
|
|
83
|
+
token: this.options.token || ''
|
|
84
|
+
});
|
|
85
|
+
return this.baseLayers;
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* 设置底图
|
|
89
|
+
*/
|
|
90
|
+
setMapLayer(type = 'tianditu') {
|
|
91
|
+
// 添加影像底图
|
|
92
|
+
this.getMapBaseLayers().addMapLayer(type);
|
|
93
|
+
}
|
|
94
|
+
setZhujiMapLayer(show) {
|
|
95
|
+
this.getMapBaseLayers().addZhujiLayer(show);
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* 设置地图边界
|
|
99
|
+
*/
|
|
100
|
+
addPolygonToMap(data, type = 'fuyangqu', options) {
|
|
101
|
+
this.getPolygon().addPolygonMapLayer(data, type, options);
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* 设置 图片致地图
|
|
105
|
+
* @param layerName 图层名称
|
|
106
|
+
* @param img 图片地址
|
|
107
|
+
* @param extent 图片范围
|
|
108
|
+
* @param options 图片配置
|
|
109
|
+
*/
|
|
110
|
+
setImgLayer(layerName, img, extent, options = {}) {
|
|
111
|
+
this.getPolygon().addImgLayer(layerName, img, extent, options);
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* 隐藏&展示图层
|
|
115
|
+
* @param layerName 图层名称
|
|
116
|
+
* @param show 是否显示
|
|
117
|
+
*/
|
|
118
|
+
showMapLayer(layerName, show = true) {
|
|
119
|
+
if (!layerName) {
|
|
120
|
+
console.error("缺少图层名称");
|
|
121
|
+
return false;
|
|
122
|
+
}
|
|
123
|
+
let layers = this.getTools().getLayerByLayerName(layerName);
|
|
124
|
+
if (!Array.isArray(layers))
|
|
125
|
+
layers = [layers];
|
|
126
|
+
// 无图层返回不继续操作
|
|
127
|
+
if (layers.length === 0)
|
|
128
|
+
return false;
|
|
129
|
+
const zoom = this.map.getView().getZoom();
|
|
130
|
+
for (const layer of layers) {
|
|
131
|
+
if (layer) {
|
|
132
|
+
if (layer.getVisible() === show)
|
|
133
|
+
return false; // 相同则不处理
|
|
134
|
+
const layerName = layer.values_.layerName;
|
|
135
|
+
let isMoreLayer = false;
|
|
136
|
+
// 若为打开，查找是否按层级显示的图层
|
|
137
|
+
if (show) {
|
|
138
|
+
for (let i = 2; i <= 5; i++) {
|
|
139
|
+
if (["reservoir_frgrd_" + i, "city_frgrd_" + i, "rain_frgrd_" + i].includes(layerName)) {
|
|
140
|
+
let minZoom = 10;
|
|
141
|
+
switch (i) {
|
|
142
|
+
case 2:
|
|
143
|
+
minZoom = 10;
|
|
144
|
+
break;
|
|
145
|
+
case 3:
|
|
146
|
+
minZoom = 11;
|
|
147
|
+
break;
|
|
148
|
+
case 4:
|
|
149
|
+
minZoom = 12;
|
|
150
|
+
break;
|
|
151
|
+
case 5:
|
|
152
|
+
minZoom = 13;
|
|
153
|
+
break;
|
|
154
|
+
}
|
|
155
|
+
isMoreLayer = true; // 有进入，单下面未进入则代表不显示与下面的continue使用
|
|
156
|
+
if (zoom && (zoom > minZoom && zoom < 20)) {
|
|
157
|
+
layer.setVisible(true);
|
|
158
|
+
break;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
if (!isMoreLayer) {
|
|
164
|
+
layer.setVisible(show);
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
return true;
|
|
169
|
+
}
|
|
170
|
+
// ╔══════════╗
|
|
171
|
+
// ║ 地图 点 ║
|
|
172
|
+
// ╚══════════╝
|
|
173
|
+
/**
|
|
174
|
+
* 获取 地图 点 操作
|
|
175
|
+
* @returns Point
|
|
176
|
+
*/
|
|
177
|
+
getPoint() {
|
|
178
|
+
if (!this.point)
|
|
179
|
+
this.point = new Point(this.map);
|
|
180
|
+
return this.point;
|
|
181
|
+
}
|
|
182
|
+
// ╔══════════╗
|
|
183
|
+
// ║ 地图 线 ║
|
|
184
|
+
// ╚══════════╝
|
|
185
|
+
/**
|
|
186
|
+
* 获取 地图 线 操作
|
|
187
|
+
* @returns Line
|
|
188
|
+
*/
|
|
189
|
+
getLine() {
|
|
190
|
+
if (!this.line)
|
|
191
|
+
this.line = new Line(this.map);
|
|
192
|
+
return this.line;
|
|
193
|
+
}
|
|
194
|
+
/**
|
|
195
|
+
* 设置闪烁点
|
|
196
|
+
* @param twinkleList 闪烁点数据
|
|
197
|
+
* @param className 闪烁点样式
|
|
198
|
+
* @param key 闪烁点索引
|
|
199
|
+
*/
|
|
200
|
+
setFlashWarnPoint(twinkleList, className, key) {
|
|
201
|
+
this.getPoint().setTwinkleLayer(twinkleList, className, key);
|
|
202
|
+
}
|
|
203
|
+
// ╔════════════╗
|
|
204
|
+
// ║ 地图 工具 ║
|
|
205
|
+
// ╚════════════╝
|
|
206
|
+
/**
|
|
207
|
+
* 获取 地图 工具 操作
|
|
208
|
+
* @returns MapTools
|
|
209
|
+
*/
|
|
210
|
+
getTools() {
|
|
211
|
+
if (!this.mapTools)
|
|
212
|
+
this.mapTools = new MapTools(this.map);
|
|
213
|
+
return this.mapTools;
|
|
214
|
+
}
|
|
215
|
+
restPosition(duration = 3000) {
|
|
216
|
+
if (!this.options.center)
|
|
217
|
+
return console.error('未设置中心点');
|
|
218
|
+
this.locationAction(this.options.center[0], this.options.center[1], this.options.zoom, duration);
|
|
219
|
+
}
|
|
220
|
+
/**
|
|
221
|
+
* 地图定位
|
|
222
|
+
* @param lgtd 经度
|
|
223
|
+
* @param lttd 纬度
|
|
224
|
+
* @param zoom 缩放级别
|
|
225
|
+
* @param duration 动画时间
|
|
226
|
+
*/
|
|
227
|
+
locationAction(lgtd, lttd, zoom = 20, duration = 3000) {
|
|
228
|
+
this.getPoint().locationAction(lgtd, lttd, zoom, duration);
|
|
229
|
+
}
|
|
230
|
+
/**
|
|
231
|
+
* 地图监听事件
|
|
232
|
+
* @param eventType 事件类型
|
|
233
|
+
* @param clickType 点击类型
|
|
234
|
+
* @param callback 回调函数
|
|
235
|
+
*/
|
|
236
|
+
mapOnEvent(eventType = "def", callback, clickType) {
|
|
237
|
+
MapTools.mapOnEvent(this.map, eventType, callback, clickType);
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
MyOl.DefaultOptions = {
|
|
241
|
+
layers: undefined,
|
|
242
|
+
zoom: 10,
|
|
243
|
+
center: [119.81, 29.969],
|
|
244
|
+
minZoom: 8,
|
|
245
|
+
maxZoom: 20,
|
|
246
|
+
extent: undefined
|
|
247
|
+
};
|
|
248
|
+
export default MyOl;
|
package/dist/core/Line.js
CHANGED
|
@@ -34,7 +34,7 @@ export default class Line {
|
|
|
34
34
|
}
|
|
35
35
|
// 添加水系并按照zoom显示不同级别
|
|
36
36
|
addRiverLayersByZoom(fyRiverJson, options = { type: 'river' }) {
|
|
37
|
-
this.riverLayerShow = !!options.
|
|
37
|
+
this.riverLayerShow = !!options.visible;
|
|
38
38
|
this.riverLayerList = [];
|
|
39
39
|
for (let i = 1; i <= 5; i++) {
|
|
40
40
|
const vectorSource = new VectorSource({
|
package/dist/core/Point.js
CHANGED
|
@@ -70,7 +70,7 @@ export default class Point {
|
|
|
70
70
|
}),
|
|
71
71
|
zIndex: options.zIndex || 4,
|
|
72
72
|
});
|
|
73
|
-
PointVectorLayer.setVisible(options.
|
|
73
|
+
PointVectorLayer.setVisible(options.visible === undefined ? true : options.visible);
|
|
74
74
|
this.map.addLayer(PointVectorLayer);
|
|
75
75
|
return PointVectorLayer;
|
|
76
76
|
}
|
|
@@ -115,7 +115,7 @@ export default class Point {
|
|
|
115
115
|
},
|
|
116
116
|
zIndex: options.zIndex || 4,
|
|
117
117
|
});
|
|
118
|
-
clusterLayer.setVisible(options.
|
|
118
|
+
clusterLayer.setVisible(options.visible === undefined ? true : options.visible);
|
|
119
119
|
this.map.addLayer(clusterLayer);
|
|
120
120
|
}
|
|
121
121
|
/**
|
package/dist/core/Polygon.js
CHANGED
|
@@ -61,7 +61,7 @@ export default class Polygon {
|
|
|
61
61
|
},
|
|
62
62
|
zIndex: options.zIndex ?? 2
|
|
63
63
|
});
|
|
64
|
-
borderLayer.setVisible(options.
|
|
64
|
+
borderLayer.setVisible(options.visible === undefined ? true : options.visible);
|
|
65
65
|
this.map.addLayer(borderLayer);
|
|
66
66
|
if (options.mask)
|
|
67
67
|
this.setOutLayer(data);
|
|
@@ -102,7 +102,7 @@ export default class Polygon {
|
|
|
102
102
|
},
|
|
103
103
|
zIndex: options.zIndex ?? 2
|
|
104
104
|
});
|
|
105
|
-
layer.setVisible(options.
|
|
105
|
+
layer.setVisible(options.visible === undefined ? true : options.visible);
|
|
106
106
|
this.map.addLayer(layer);
|
|
107
107
|
if (options.fitView) {
|
|
108
108
|
// 获取面的范围
|
|
@@ -140,7 +140,7 @@ export default class Polygon {
|
|
|
140
140
|
}),
|
|
141
141
|
fill: new Fill({ color: newColor }),
|
|
142
142
|
text: new Text({
|
|
143
|
-
text: options.
|
|
143
|
+
text: options.textVisible === false ? "" : name,
|
|
144
144
|
font: options.textFont ?? '14px Calibri,sans-serif',
|
|
145
145
|
fill: new Fill({ color: options.textFillColor || '#FFF' }),
|
|
146
146
|
stroke: new Stroke({
|
|
@@ -267,8 +267,8 @@ export default class Polygon {
|
|
|
267
267
|
imageLayer.setSource(source);
|
|
268
268
|
imageLayer.setZIndex(options.zIndex ?? 3);
|
|
269
269
|
imageLayer.setOpacity(options.opacity ?? 1);
|
|
270
|
-
if (options.
|
|
271
|
-
imageLayer.setVisible(options.
|
|
270
|
+
if (options.visible !== undefined)
|
|
271
|
+
imageLayer.setVisible(options.visible);
|
|
272
272
|
if (options.mapClip && options.mapClipData) {
|
|
273
273
|
imageLayer = MapTools.setMapClip(imageLayer, options.mapClipData);
|
|
274
274
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,96 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
import Map from "ol/Map";
|
|
3
|
-
import Polygon from "./core/Polygon";
|
|
4
|
-
import Point from "./core/Point";
|
|
1
|
+
import MyOl from "./MyOl";
|
|
5
2
|
import Line from "./core/Line";
|
|
3
|
+
import Point from "./core/Point";
|
|
6
4
|
import MapTools from "./core/MapTools";
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
private mapTools;
|
|
13
|
-
private point;
|
|
14
|
-
private line;
|
|
15
|
-
private readonly options;
|
|
16
|
-
static DefaultOptions: MapInitType;
|
|
17
|
-
constructor(id: string, options: MapInitType);
|
|
18
|
-
/**
|
|
19
|
-
* 获取视图
|
|
20
|
-
* @param options 视图配置
|
|
21
|
-
* @param options.center 中心点
|
|
22
|
-
* @param options.zoom 缩放级别
|
|
23
|
-
* @param options.minZoom 最小缩放级别
|
|
24
|
-
* @param options.maxZoom 最大缩放级别
|
|
25
|
-
* @param options.extent 视图范围
|
|
26
|
-
* @returns View
|
|
27
|
-
*/
|
|
28
|
-
static getView(options?: MapInitType): View;
|
|
29
|
-
/**
|
|
30
|
-
* 获取 地图 面 操作
|
|
31
|
-
* @returns Polygon
|
|
32
|
-
*/
|
|
33
|
-
getPolygon(): Polygon;
|
|
34
|
-
getMapBaseLayers(): any;
|
|
35
|
-
/**
|
|
36
|
-
* 设置底图
|
|
37
|
-
*/
|
|
38
|
-
setMapLayer(type?: MapbaseType): void;
|
|
39
|
-
setZhujiMapLayer(show: boolean): void;
|
|
40
|
-
/**
|
|
41
|
-
* 设置地图边界
|
|
42
|
-
*/
|
|
43
|
-
addPolygonToMap(data: any, type: string | undefined, options: OptionsType): void;
|
|
44
|
-
/**
|
|
45
|
-
* 设置 图片致地图
|
|
46
|
-
* @param layerName 图层名称
|
|
47
|
-
* @param img 图片地址
|
|
48
|
-
* @param extent 图片范围
|
|
49
|
-
* @param options 图片配置
|
|
50
|
-
*/
|
|
51
|
-
setImgLayer(layerName: string, img: string, extent: number[], options?: {}): void;
|
|
52
|
-
/**
|
|
53
|
-
* 隐藏&展示图层
|
|
54
|
-
* @param layerName 图层名称
|
|
55
|
-
* @param show 是否显示
|
|
56
|
-
*/
|
|
57
|
-
showMapLayer(layerName: string, show?: boolean): boolean;
|
|
58
|
-
/**
|
|
59
|
-
* 获取 地图 点 操作
|
|
60
|
-
* @returns Point
|
|
61
|
-
*/
|
|
62
|
-
getPoint(): Point;
|
|
63
|
-
/**
|
|
64
|
-
* 获取 地图 线 操作
|
|
65
|
-
* @returns Line
|
|
66
|
-
*/
|
|
67
|
-
getLine(): Line;
|
|
68
|
-
/**
|
|
69
|
-
* 设置闪烁点
|
|
70
|
-
* @param twinkleList 闪烁点数据
|
|
71
|
-
* @param className 闪烁点样式
|
|
72
|
-
* @param key 闪烁点索引
|
|
73
|
-
*/
|
|
74
|
-
setFlashWarnPoint(twinkleList: any[], className: string, key: string): void;
|
|
75
|
-
/**
|
|
76
|
-
* 获取 地图 工具 操作
|
|
77
|
-
* @returns MapTools
|
|
78
|
-
*/
|
|
79
|
-
getTools(): MapTools;
|
|
80
|
-
restPosition(duration?: number): void;
|
|
81
|
-
/**
|
|
82
|
-
* 地图定位
|
|
83
|
-
* @param lgtd 经度
|
|
84
|
-
* @param lttd 纬度
|
|
85
|
-
* @param zoom 缩放级别
|
|
86
|
-
* @param duration 动画时间
|
|
87
|
-
*/
|
|
88
|
-
locationAction(lgtd: number, lttd: number, zoom?: number, duration?: number): void;
|
|
89
|
-
/**
|
|
90
|
-
* 地图监听事件
|
|
91
|
-
* @param eventType 事件类型
|
|
92
|
-
* @param clickType 点击类型
|
|
93
|
-
* @param callback 回调函数
|
|
94
|
-
*/
|
|
95
|
-
mapOnEvent(eventType: string | undefined, callback: (feature?: any, e?: any) => void, clickType?: 'point' | 'line' | 'polygon' | undefined): void;
|
|
96
|
-
}
|
|
5
|
+
import Polygon from "./core/Polygon";
|
|
6
|
+
import MapBaseLayers from "./core/MapBaseLayers";
|
|
7
|
+
import DomPoint from "./core/DomPoint";
|
|
8
|
+
export { Line, Point, MapTools, Polygon, MapBaseLayers, DomPoint };
|
|
9
|
+
export default MyOl;
|
package/dist/index.js
CHANGED
|
@@ -1,245 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
import { register as olProj4Register } from 'ol/proj/proj4';
|
|
3
|
-
import { Projection as olProjProjection, addProjection as olProjAddProjection, fromLonLat as olProjFromLonLat } from 'ol/proj';
|
|
4
|
-
import View from "ol/View";
|
|
5
|
-
import Map from "ol/Map";
|
|
6
|
-
import Polygon from "./core/Polygon";
|
|
7
|
-
import Point from "./core/Point";
|
|
1
|
+
import MyOl from "./MyOl";
|
|
8
2
|
import Line from "./core/Line";
|
|
9
|
-
import
|
|
10
|
-
import proj4 from "proj4";
|
|
3
|
+
import Point from "./core/Point";
|
|
11
4
|
import MapTools from "./core/MapTools";
|
|
12
|
-
import
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
this.options = { ...MyOl.DefaultOptions, ...options };
|
|
17
|
-
this.map = new Map({
|
|
18
|
-
target: id, // 地图容器
|
|
19
|
-
view: MyOl.getView(this.options), // 视图
|
|
20
|
-
layers: this.options.layers || [],
|
|
21
|
-
controls: defaultControls({
|
|
22
|
-
zoom: false,
|
|
23
|
-
rotate: false,
|
|
24
|
-
attribution: false
|
|
25
|
-
}).extend([])
|
|
26
|
-
});
|
|
27
|
-
}
|
|
28
|
-
/**
|
|
29
|
-
* 获取视图
|
|
30
|
-
* @param options 视图配置
|
|
31
|
-
* @param options.center 中心点
|
|
32
|
-
* @param options.zoom 缩放级别
|
|
33
|
-
* @param options.minZoom 最小缩放级别
|
|
34
|
-
* @param options.maxZoom 最大缩放级别
|
|
35
|
-
* @param options.extent 视图范围
|
|
36
|
-
* @returns View
|
|
37
|
-
*/
|
|
38
|
-
static getView(options = MyOl.DefaultOptions) {
|
|
39
|
-
proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs");
|
|
40
|
-
proj4.defs("EPSG:4549", "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs");
|
|
41
|
-
olProj4Register(proj4);
|
|
42
|
-
const cgsc2000 = new olProjProjection({
|
|
43
|
-
code: "EPSG:4490",
|
|
44
|
-
extent: [-180, -90, 180, 90],
|
|
45
|
-
worldExtent: [-180, -90, 180, 90],
|
|
46
|
-
units: "degrees"
|
|
47
|
-
});
|
|
48
|
-
olProjAddProjection(cgsc2000);
|
|
49
|
-
// debugger
|
|
50
|
-
// 视图配置
|
|
51
|
-
const viewOptions = {
|
|
52
|
-
projection: cgsc2000, // 坐标系
|
|
53
|
-
center: olProjFromLonLat(options.center, cgsc2000), // 中心点
|
|
54
|
-
zoom: options.zoom || 10, // 缩放级别
|
|
55
|
-
minZoom: options.minZoom || 8,
|
|
56
|
-
maxZoom: options.maxZoom || 20
|
|
57
|
-
};
|
|
58
|
-
if (options.extent)
|
|
59
|
-
viewOptions.extent = options.extent;
|
|
60
|
-
return new View(viewOptions);
|
|
61
|
-
}
|
|
62
|
-
// ╔══════════╗
|
|
63
|
-
// ║ 地图 面 ║
|
|
64
|
-
// ╚══════════╝
|
|
65
|
-
/**
|
|
66
|
-
* 获取 地图 面 操作
|
|
67
|
-
* @returns Polygon
|
|
68
|
-
*/
|
|
69
|
-
getPolygon() {
|
|
70
|
-
if (!this.polygon)
|
|
71
|
-
this.polygon = new Polygon(this.map);
|
|
72
|
-
return this.polygon;
|
|
73
|
-
}
|
|
74
|
-
getMapBaseLayers() {
|
|
75
|
-
if (!this.baseLayers)
|
|
76
|
-
this.baseLayers = new MapBaseLayers(this.map, {
|
|
77
|
-
zIndex: 1,
|
|
78
|
-
mapClip: !!this.options.mapClipData,
|
|
79
|
-
mapClipData: this.options.mapClipData,
|
|
80
|
-
token: this.options.token || ''
|
|
81
|
-
});
|
|
82
|
-
return this.baseLayers;
|
|
83
|
-
}
|
|
84
|
-
/**
|
|
85
|
-
* 设置底图
|
|
86
|
-
*/
|
|
87
|
-
setMapLayer(type = 'tianditu') {
|
|
88
|
-
// 添加影像底图
|
|
89
|
-
this.getMapBaseLayers().addMapLayer(type);
|
|
90
|
-
}
|
|
91
|
-
setZhujiMapLayer(show) {
|
|
92
|
-
this.getMapBaseLayers().addZhujiLayer(show);
|
|
93
|
-
}
|
|
94
|
-
/**
|
|
95
|
-
* 设置地图边界
|
|
96
|
-
*/
|
|
97
|
-
addPolygonToMap(data, type = 'fuyangqu', options) {
|
|
98
|
-
this.getPolygon().addPolygonMapLayer(data, type, options);
|
|
99
|
-
}
|
|
100
|
-
/**
|
|
101
|
-
* 设置 图片致地图
|
|
102
|
-
* @param layerName 图层名称
|
|
103
|
-
* @param img 图片地址
|
|
104
|
-
* @param extent 图片范围
|
|
105
|
-
* @param options 图片配置
|
|
106
|
-
*/
|
|
107
|
-
setImgLayer(layerName, img, extent, options = {}) {
|
|
108
|
-
this.getPolygon().addImgLayer(layerName, img, extent, options);
|
|
109
|
-
}
|
|
110
|
-
/**
|
|
111
|
-
* 隐藏&展示图层
|
|
112
|
-
* @param layerName 图层名称
|
|
113
|
-
* @param show 是否显示
|
|
114
|
-
*/
|
|
115
|
-
showMapLayer(layerName, show = true) {
|
|
116
|
-
if (!layerName) {
|
|
117
|
-
console.error("缺少图层名称");
|
|
118
|
-
return false;
|
|
119
|
-
}
|
|
120
|
-
let layers = this.getTools().getLayerByLayerName(layerName);
|
|
121
|
-
if (!Array.isArray(layers))
|
|
122
|
-
layers = [layers];
|
|
123
|
-
// 无图层返回不继续操作
|
|
124
|
-
if (layers.length === 0)
|
|
125
|
-
return false;
|
|
126
|
-
const zoom = this.map.getView().getZoom();
|
|
127
|
-
for (const layer of layers) {
|
|
128
|
-
if (layer) {
|
|
129
|
-
if (layer.getVisible() === show)
|
|
130
|
-
return false; // 相同则不处理
|
|
131
|
-
const layerName = layer.values_.layerName;
|
|
132
|
-
let isMoreLayer = false;
|
|
133
|
-
// 若为打开，查找是否按层级显示的图层
|
|
134
|
-
if (show) {
|
|
135
|
-
for (let i = 2; i <= 5; i++) {
|
|
136
|
-
if (["reservoir_frgrd_" + i, "city_frgrd_" + i, "rain_frgrd_" + i].includes(layerName)) {
|
|
137
|
-
let minZoom = 10;
|
|
138
|
-
switch (i) {
|
|
139
|
-
case 2:
|
|
140
|
-
minZoom = 10;
|
|
141
|
-
break;
|
|
142
|
-
case 3:
|
|
143
|
-
minZoom = 11;
|
|
144
|
-
break;
|
|
145
|
-
case 4:
|
|
146
|
-
minZoom = 12;
|
|
147
|
-
break;
|
|
148
|
-
case 5:
|
|
149
|
-
minZoom = 13;
|
|
150
|
-
break;
|
|
151
|
-
}
|
|
152
|
-
isMoreLayer = true; // 有进入，单下面未进入则代表不显示与下面的continue使用
|
|
153
|
-
if (zoom && (zoom > minZoom && zoom < 20)) {
|
|
154
|
-
layer.setVisible(true);
|
|
155
|
-
break;
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
if (!isMoreLayer) {
|
|
161
|
-
layer.setVisible(show);
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
return true;
|
|
166
|
-
}
|
|
167
|
-
// ╔══════════╗
|
|
168
|
-
// ║ 地图 点 ║
|
|
169
|
-
// ╚══════════╝
|
|
170
|
-
/**
|
|
171
|
-
* 获取 地图 点 操作
|
|
172
|
-
* @returns Point
|
|
173
|
-
*/
|
|
174
|
-
getPoint() {
|
|
175
|
-
if (!this.point)
|
|
176
|
-
this.point = new Point(this.map);
|
|
177
|
-
return this.point;
|
|
178
|
-
}
|
|
179
|
-
// ╔══════════╗
|
|
180
|
-
// ║ 地图 线 ║
|
|
181
|
-
// ╚══════════╝
|
|
182
|
-
/**
|
|
183
|
-
* 获取 地图 线 操作
|
|
184
|
-
* @returns Line
|
|
185
|
-
*/
|
|
186
|
-
getLine() {
|
|
187
|
-
if (!this.line)
|
|
188
|
-
this.line = new Line(this.map);
|
|
189
|
-
return this.line;
|
|
190
|
-
}
|
|
191
|
-
/**
|
|
192
|
-
* 设置闪烁点
|
|
193
|
-
* @param twinkleList 闪烁点数据
|
|
194
|
-
* @param className 闪烁点样式
|
|
195
|
-
* @param key 闪烁点索引
|
|
196
|
-
*/
|
|
197
|
-
setFlashWarnPoint(twinkleList, className, key) {
|
|
198
|
-
this.getPoint().setTwinkleLayer(twinkleList, className, key);
|
|
199
|
-
}
|
|
200
|
-
// ╔════════════╗
|
|
201
|
-
// ║ 地图 工具 ║
|
|
202
|
-
// ╚════════════╝
|
|
203
|
-
/**
|
|
204
|
-
* 获取 地图 工具 操作
|
|
205
|
-
* @returns MapTools
|
|
206
|
-
*/
|
|
207
|
-
getTools() {
|
|
208
|
-
if (!this.mapTools)
|
|
209
|
-
this.mapTools = new MapTools(this.map);
|
|
210
|
-
return this.mapTools;
|
|
211
|
-
}
|
|
212
|
-
restPosition(duration = 3000) {
|
|
213
|
-
if (!this.options.center)
|
|
214
|
-
return console.error('未设置中心点');
|
|
215
|
-
this.locationAction(this.options.center[0], this.options.center[1], this.options.zoom, duration);
|
|
216
|
-
}
|
|
217
|
-
/**
|
|
218
|
-
* 地图定位
|
|
219
|
-
* @param lgtd 经度
|
|
220
|
-
* @param lttd 纬度
|
|
221
|
-
* @param zoom 缩放级别
|
|
222
|
-
* @param duration 动画时间
|
|
223
|
-
*/
|
|
224
|
-
locationAction(lgtd, lttd, zoom = 20, duration = 3000) {
|
|
225
|
-
this.getPoint().locationAction(lgtd, lttd, zoom, duration);
|
|
226
|
-
}
|
|
227
|
-
/**
|
|
228
|
-
* 地图监听事件
|
|
229
|
-
* @param eventType 事件类型
|
|
230
|
-
* @param clickType 点击类型
|
|
231
|
-
* @param callback 回调函数
|
|
232
|
-
*/
|
|
233
|
-
mapOnEvent(eventType = "def", callback, clickType) {
|
|
234
|
-
MapTools.mapOnEvent(this.map, eventType, callback, clickType);
|
|
235
|
-
}
|
|
236
|
-
}
|
|
237
|
-
MyOl.DefaultOptions = {
|
|
238
|
-
layers: undefined,
|
|
239
|
-
zoom: 10,
|
|
240
|
-
center: [119.81, 29.969],
|
|
241
|
-
minZoom: 8,
|
|
242
|
-
maxZoom: 20,
|
|
243
|
-
extent: undefined
|
|
244
|
-
};
|
|
5
|
+
import Polygon from "./core/Polygon";
|
|
6
|
+
import MapBaseLayers from "./core/MapBaseLayers";
|
|
7
|
+
import DomPoint from "./core/DomPoint";
|
|
8
|
+
export { Line, Point, MapTools, Polygon, MapBaseLayers, DomPoint };
|
|
245
9
|
export default MyOl;
|
package/dist/types.d.ts
CHANGED
|
@@ -30,14 +30,14 @@ export interface OptionsType {
|
|
|
30
30
|
scale?: number;
|
|
31
31
|
hasImg?: boolean;
|
|
32
32
|
zIndex?: number;
|
|
33
|
-
|
|
33
|
+
visible?: boolean;
|
|
34
34
|
projectionOptOptions?: any;
|
|
35
35
|
strokeColor?: string | number[];
|
|
36
36
|
strokeWidth?: number;
|
|
37
37
|
lineDash?: number[];
|
|
38
38
|
lineDashOffset?: number;
|
|
39
39
|
fillColor?: string;
|
|
40
|
-
|
|
40
|
+
textVisible?: boolean;
|
|
41
41
|
textFont?: string;
|
|
42
42
|
textFillColor?: string;
|
|
43
43
|
textStrokeColor?: string;
|