@vtx/map 1.1.48 → 1.1.50
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/lib/VtxMap/AMap/AMap.js +1007 -639
- package/lib/VtxMap/AMap/AMap.js.map +1 -1
- package/lib/VtxMap/BMap/Map.js +1201 -755
- package/lib/VtxMap/BMap/Map.js.map +1 -1
- package/lib/VtxMap/GMap/Map.js +1569 -1053
- package/lib/VtxMap/GMap/Map.js.map +1 -1
- package/lib/VtxMap/Map.js +42 -8
- package/lib/VtxMap/Map.js.map +1 -1
- package/lib/VtxMap/MapToolFunction.js +63 -26
- package/lib/VtxMap/MapToolFunction.js.map +1 -1
- package/lib/VtxMap/OMap/Map.js +1365 -873
- package/lib/VtxMap/OMap/Map.js.map +1 -1
- package/lib/VtxMap/OlMap/Map.js +1280 -760
- package/lib/VtxMap/OlMap/Map.js.map +1 -1
- package/lib/VtxMap/TMap/TMap.js +1063 -658
- package/lib/VtxMap/TMap/TMap.js.map +1 -1
- package/lib/VtxMap/index.js +8 -1
- package/lib/VtxMap/index.js.map +1 -1
- package/lib/VtxMap/mapPlayer.js +123 -67
- package/lib/VtxMap/mapPlayer.js.map +1 -1
- package/lib/VtxMap/optimizingPointMap.js +79 -23
- package/lib/VtxMap/optimizingPointMap.js.map +1 -1
- package/lib/VtxMap/style/css.js +6 -0
- package/lib/VtxMap/style/css.js.map +1 -1
- package/lib/VtxMap/style/index.js +6 -0
- package/lib/VtxMap/style/index.js.map +1 -1
- package/lib/VtxMap/zoomMap.js +43 -14
- package/lib/VtxMap/zoomMap.js.map +1 -1
- package/lib/VtxModal/VtxModal.js +65 -21
- package/lib/VtxModal/VtxModal.js.map +1 -1
- package/lib/VtxModal/draggableModal.js +50 -14
- package/lib/VtxModal/draggableModal.js.map +1 -1
- package/lib/VtxModal/index.js +6 -1
- package/lib/VtxModal/index.js.map +1 -1
- package/lib/VtxModal/style/css.js +6 -0
- package/lib/VtxModal/style/css.js.map +1 -1
- package/lib/VtxModal/style/index.js +6 -0
- package/lib/VtxModal/style/index.js.map +1 -1
- package/lib/VtxSearchCheckMap/VtxSearchCheckMap.js +240 -107
- package/lib/VtxSearchCheckMap/VtxSearchCheckMap.js.map +1 -1
- package/lib/VtxSearchCheckMap/index.js +2 -0
- package/lib/VtxSearchCheckMap/index.js.map +1 -1
- package/lib/VtxSearchCheckMap/mapping.js +2 -1
- package/lib/VtxSearchCheckMap/mapping.js.map +1 -1
- package/lib/VtxSearchCheckMap/style/css.js +19 -0
- package/lib/VtxSearchCheckMap/style/css.js.map +1 -1
- package/lib/VtxSearchCheckMap/style/index.js +19 -0
- package/lib/VtxSearchCheckMap/style/index.js.map +1 -1
- package/lib/VtxSearchMap/VtxSearchMap.js +234 -95
- package/lib/VtxSearchMap/VtxSearchMap.js.map +1 -1
- package/lib/VtxSearchMap/index.js +2 -0
- package/lib/VtxSearchMap/index.js.map +1 -1
- package/lib/VtxSearchMap/mapping.js +2 -1
- package/lib/VtxSearchMap/mapping.js.map +1 -1
- package/lib/VtxSearchMap/style/css.js +19 -0
- package/lib/VtxSearchMap/style/css.js.map +1 -1
- package/lib/VtxSearchMap/style/index.js +19 -0
- package/lib/VtxSearchMap/style/index.js.map +1 -1
- package/lib/default.js +19 -4
- package/lib/default.js.map +1 -1
- package/lib/index.js +3 -0
- package/lib/index.js.map +1 -1
- package/lib/utils/util.js +17 -5
- package/lib/utils/util.js.map +1 -1
- package/package.json +1 -1
package/lib/VtxMap/OlMap/Map.js
CHANGED
|
@@ -1,57 +1,94 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
+
|
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
|
4
6
|
value: true
|
|
5
7
|
});
|
|
6
8
|
exports["default"] = void 0;
|
|
9
|
+
|
|
7
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
8
12
|
var _default2 = _interopRequireDefault(require("../../default"));
|
|
13
|
+
|
|
9
14
|
var _MapToolFunction = require("../MapToolFunction");
|
|
15
|
+
|
|
10
16
|
var _immutable = _interopRequireDefault(require("immutable"));
|
|
17
|
+
|
|
11
18
|
var _lodash = require("lodash");
|
|
19
|
+
|
|
12
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
|
-
|
|
14
|
-
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(
|
|
21
|
+
|
|
22
|
+
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
|
|
23
|
+
|
|
15
24
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
25
|
+
|
|
16
26
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
27
|
+
|
|
17
28
|
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
29
|
+
|
|
18
30
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
31
|
+
|
|
19
32
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
33
|
+
|
|
20
34
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
35
|
+
|
|
21
36
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
22
|
-
|
|
23
|
-
function
|
|
37
|
+
|
|
38
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
39
|
+
|
|
40
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
41
|
+
|
|
24
42
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
25
|
-
|
|
26
|
-
function
|
|
43
|
+
|
|
44
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
45
|
+
|
|
46
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
47
|
+
|
|
27
48
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
28
|
-
|
|
49
|
+
|
|
50
|
+
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
51
|
+
|
|
29
52
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
53
|
+
|
|
30
54
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
55
|
+
|
|
31
56
|
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
57
|
+
|
|
32
58
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
59
|
+
|
|
33
60
|
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
61
|
+
|
|
34
62
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
63
|
+
|
|
35
64
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
65
|
+
|
|
36
66
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
37
|
-
|
|
38
|
-
function
|
|
39
|
-
|
|
67
|
+
|
|
68
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
69
|
+
|
|
40
70
|
var Set = _immutable["default"].Set;
|
|
71
|
+
|
|
41
72
|
var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
42
73
|
_inherits(OlMap, _React$Component);
|
|
74
|
+
|
|
43
75
|
var _super = _createSuper(OlMap);
|
|
76
|
+
|
|
44
77
|
function OlMap(props) {
|
|
45
78
|
var _this;
|
|
79
|
+
|
|
46
80
|
_classCallCheck(this, OlMap);
|
|
81
|
+
|
|
47
82
|
_this = _super.call(this, props);
|
|
48
|
-
|
|
83
|
+
|
|
49
84
|
_defineProperty(_assertThisInitialized(_this), "loadLayers", function () {
|
|
50
85
|
var nextLayers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
51
86
|
var currentLayers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
52
87
|
var first = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
53
|
-
|
|
54
|
-
// 对比图层的变化,找出需要新增和需要删除的。
|
|
88
|
+
|
|
89
|
+
var t = _assertThisInitialized(_this); // 对比图层的变化,找出需要新增和需要删除的。
|
|
90
|
+
|
|
91
|
+
|
|
55
92
|
var addLayers = nextLayers.filter(function (item) {
|
|
56
93
|
return !currentLayers.map(function (e) {
|
|
57
94
|
return e.coverage;
|
|
@@ -62,6 +99,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
62
99
|
return e.coverage;
|
|
63
100
|
}).includes(item.coverage);
|
|
64
101
|
});
|
|
102
|
+
|
|
65
103
|
if (removeLayers.length > 0) {
|
|
66
104
|
removeLayers.forEach(function (item) {
|
|
67
105
|
var exist = t.olLayers.find(function (e) {
|
|
@@ -70,6 +108,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
70
108
|
exist && exist.layer.setVisible(false);
|
|
71
109
|
});
|
|
72
110
|
}
|
|
111
|
+
|
|
73
112
|
if (addLayers.length > 0) {
|
|
74
113
|
addLayers.map(function (item) {
|
|
75
114
|
if (item.coverage.startsWith("http") || item.coverage.startsWith('/')) {
|
|
@@ -78,20 +117,24 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
78
117
|
case 'superMap':
|
|
79
118
|
t.addSuperMapLayer(item.coverage);
|
|
80
119
|
break;
|
|
81
|
-
|
|
120
|
+
|
|
82
121
|
case 'geoServer':
|
|
83
122
|
t.addGeoServerLayer(item.coverage);
|
|
84
|
-
|
|
123
|
+
break;
|
|
124
|
+
|
|
85
125
|
case 'geoServer_image':
|
|
86
126
|
t.addGeoServerImageLayer(item);
|
|
127
|
+
break;
|
|
128
|
+
|
|
87
129
|
default:
|
|
88
130
|
break;
|
|
89
131
|
}
|
|
90
132
|
} else if (item.coverage.indexOf("WMTS") > -1) {
|
|
91
133
|
t.addTileLayer(JSON.parse(item.coverage));
|
|
92
|
-
} else if (
|
|
93
|
-
|
|
94
|
-
|
|
134
|
+
} else if (item.coverage == 'customLayer') {
|
|
135
|
+
var layers = item.initLayer();
|
|
136
|
+
|
|
137
|
+
if (layers) {
|
|
95
138
|
if ((0, _lodash.isArray)(layers)) {
|
|
96
139
|
layers.map(function (layer) {
|
|
97
140
|
t.state.gis.addLayer(layer);
|
|
@@ -100,38 +143,67 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
100
143
|
t.state.gis.addLayer(layers);
|
|
101
144
|
}
|
|
102
145
|
}
|
|
146
|
+
} else if (OL_SCREEN[item.coverage]) {
|
|
147
|
+
if (first) {
|
|
148
|
+
var _layers = eval(OL_SCREEN[item.coverage].initLayer);
|
|
149
|
+
|
|
150
|
+
if ((0, _lodash.isArray)(_layers)) {
|
|
151
|
+
_layers.map(function (layer) {
|
|
152
|
+
t.state.gis.addLayer(layer);
|
|
153
|
+
});
|
|
154
|
+
} else {
|
|
155
|
+
t.state.gis.addLayer(_layers);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
103
158
|
}
|
|
104
159
|
});
|
|
105
160
|
} else {
|
|
106
161
|
if (first) {
|
|
107
162
|
var _layer = eval(OL_SCREEN["default"].initLayer);
|
|
163
|
+
|
|
108
164
|
t.state.gis.addLayer(_layer);
|
|
109
165
|
}
|
|
110
166
|
}
|
|
111
167
|
});
|
|
168
|
+
|
|
112
169
|
_this.zIndexGraphics = []; //需要放在最后的图元,zoom和pan时刷新dom到最后
|
|
170
|
+
|
|
113
171
|
_this.htmlPointsId = 'vtx_gmap_html_points'; //html点位容器id class管理
|
|
172
|
+
|
|
114
173
|
_this.pointCollectionId = 'vtx_gmap_html_pointCollection'; //海量点canvas点位容器id class管理
|
|
174
|
+
|
|
115
175
|
_this.Label = {}; //所有label 集合
|
|
176
|
+
|
|
116
177
|
_this.labelLayer = {
|
|
117
178
|
x: 0,
|
|
118
179
|
y: 0
|
|
119
180
|
}; //label图层 位置管理
|
|
181
|
+
|
|
120
182
|
_this.viewer = null;
|
|
121
183
|
_this.GM = new _MapToolFunction.graphicManage(); //初始化 图元管理方法
|
|
184
|
+
|
|
122
185
|
_this.getPolygonArea = _MapToolFunction.getPolygonArea;
|
|
123
186
|
_this.layer = null; //保存地图图层数据
|
|
187
|
+
|
|
124
188
|
_this.loadTimer = null; //初始化地图 load时延缓数据处理
|
|
189
|
+
|
|
125
190
|
_this.animTimer = {}; //点位跳动动画 定时集合
|
|
191
|
+
|
|
126
192
|
_this.animCount = {}; //点位跳动动画 定时计数
|
|
193
|
+
|
|
127
194
|
_this.moveToTimer = null; //moveTo时间对象
|
|
195
|
+
|
|
128
196
|
_this.drawToolbar = null; //地图绘制对象即interaction
|
|
197
|
+
|
|
129
198
|
_this.drawParam = {}; //缓存 绘制的数据
|
|
199
|
+
|
|
130
200
|
_this.editToolbar = null; //编辑对象
|
|
201
|
+
|
|
131
202
|
_this.editId = ''; //当前编辑的图元id
|
|
203
|
+
|
|
132
204
|
_this.drawSource = null;
|
|
133
|
-
_this.drawVector = null;
|
|
134
|
-
|
|
205
|
+
_this.drawVector = null; // 图元绘制保存
|
|
206
|
+
|
|
135
207
|
_this.drawInfo = {
|
|
136
208
|
sketch: null,
|
|
137
209
|
listener: null
|
|
@@ -146,15 +218,23 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
146
218
|
isCount: false
|
|
147
219
|
};
|
|
148
220
|
_this.heatmap = null; //热力图对象
|
|
221
|
+
|
|
149
222
|
_this.clusterMarkers = []; //聚合点位id数组
|
|
223
|
+
|
|
150
224
|
_this.clusterPs = []; //聚合集合点
|
|
225
|
+
|
|
151
226
|
_this.clusterPt = []; //地图中聚合点集合
|
|
227
|
+
|
|
152
228
|
_this.morepoints = []; //海量点集合
|
|
229
|
+
|
|
153
230
|
_this.areaRestriction = null; //区域限制数据
|
|
231
|
+
|
|
154
232
|
_this.movePoints = [];
|
|
155
233
|
_this.olLayers = []; // ol图层集合 {address:'', layer: ''}
|
|
234
|
+
|
|
156
235
|
_this.baseLayer = null; // 地图图层
|
|
157
236
|
//是否绘制测距
|
|
237
|
+
|
|
158
238
|
_this.rangingTool = {
|
|
159
239
|
isRanging: false,
|
|
160
240
|
//是否开启状态
|
|
@@ -165,8 +245,10 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
165
245
|
distance: 0,
|
|
166
246
|
//测距长度
|
|
167
247
|
mapRangingTool: null //测距回调
|
|
248
|
+
|
|
168
249
|
};
|
|
169
250
|
_this.rangingTools = {}; //测距点线缓存
|
|
251
|
+
|
|
170
252
|
_this.rangingInfo = {
|
|
171
253
|
sketch: null,
|
|
172
254
|
helpTooltipElement: null,
|
|
@@ -192,11 +274,11 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
192
274
|
clusters: null,
|
|
193
275
|
clusterCircles: null
|
|
194
276
|
};
|
|
277
|
+
_this.mapCreated = false;
|
|
195
278
|
_this.state = {
|
|
196
279
|
gis: null,
|
|
197
280
|
//地图对象
|
|
198
281
|
mapId: props.mapId,
|
|
199
|
-
mapCreated: false,
|
|
200
282
|
pointIds: [],
|
|
201
283
|
//地图上点的ids
|
|
202
284
|
lineIds: [],
|
|
@@ -219,10 +301,13 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
219
301
|
}
|
|
220
302
|
};
|
|
221
303
|
_this.frameSelectProps = {};
|
|
304
|
+
|
|
222
305
|
_this.loadMapJs();
|
|
306
|
+
|
|
223
307
|
return _this;
|
|
224
|
-
}
|
|
225
|
-
|
|
308
|
+
} // 引入ol样式
|
|
309
|
+
|
|
310
|
+
|
|
226
311
|
_createClass(OlMap, [{
|
|
227
312
|
key: "loadMapJs",
|
|
228
313
|
value: function loadMapJs() {
|
|
@@ -254,13 +339,15 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
254
339
|
}).appendTo('head');
|
|
255
340
|
}
|
|
256
341
|
});
|
|
257
|
-
}
|
|
258
|
-
|
|
342
|
+
} // 初始化地圖
|
|
343
|
+
|
|
259
344
|
}, {
|
|
260
345
|
key: "init",
|
|
261
346
|
value: function init() {
|
|
262
|
-
var
|
|
263
|
-
|
|
347
|
+
var _this2 = this;
|
|
348
|
+
|
|
349
|
+
var t = this; // 创建地图
|
|
350
|
+
|
|
264
351
|
t.createMap();
|
|
265
352
|
t.drawSource = new ol.source.Vector({
|
|
266
353
|
wrapX: false
|
|
@@ -268,86 +355,101 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
268
355
|
t.drawVector = new ol.layer.Vector({
|
|
269
356
|
source: t.drawSource
|
|
270
357
|
});
|
|
358
|
+
|
|
271
359
|
var initData = function initData() {
|
|
272
360
|
var _t$props = t.props,
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
t.setCenter();
|
|
284
|
-
|
|
361
|
+
mapPoints = _t$props.mapPoints,
|
|
362
|
+
mapLines = _t$props.mapLines,
|
|
363
|
+
mapPolygons = _t$props.mapPolygons,
|
|
364
|
+
mapCircles = _t$props.mapCircles,
|
|
365
|
+
mapVisiblePoints = _t$props.mapVisiblePoints,
|
|
366
|
+
mapCluster = _t$props.mapCluster,
|
|
367
|
+
mapPointCollection = _t$props.mapPointCollection,
|
|
368
|
+
areaRestriction = _t$props.areaRestriction,
|
|
369
|
+
heatMapData = _t$props.heatMapData; // 初始化中心点
|
|
370
|
+
|
|
371
|
+
t.setCenter(); // 添加点
|
|
372
|
+
|
|
285
373
|
if (mapPoints instanceof Array) {
|
|
286
374
|
t.addPoint(mapPoints);
|
|
287
|
-
}
|
|
288
|
-
|
|
375
|
+
} //添加线
|
|
376
|
+
|
|
377
|
+
|
|
289
378
|
if (mapLines instanceof Array) {
|
|
290
379
|
t.addLine(mapLines);
|
|
291
|
-
}
|
|
292
|
-
|
|
380
|
+
} //添加面
|
|
381
|
+
|
|
382
|
+
|
|
293
383
|
if (mapPolygons instanceof Array) {
|
|
294
384
|
t.addPolygon(mapPolygons);
|
|
295
|
-
}
|
|
296
|
-
|
|
385
|
+
} //添加圆
|
|
386
|
+
|
|
387
|
+
|
|
297
388
|
if (mapCircles instanceof Array) {
|
|
298
389
|
t.addCircle(mapCircles);
|
|
299
|
-
}
|
|
300
|
-
|
|
390
|
+
} //是否设置比例尺
|
|
391
|
+
|
|
392
|
+
|
|
301
393
|
if (t.props.showControl) {
|
|
302
394
|
t.showControl(t.props);
|
|
303
|
-
}
|
|
304
|
-
|
|
395
|
+
} // 画热力图
|
|
396
|
+
|
|
397
|
+
|
|
305
398
|
if (heatMapData) {
|
|
306
399
|
t.heatMapOverlay(heatMapData);
|
|
307
|
-
}
|
|
308
|
-
|
|
400
|
+
} //设置点聚合
|
|
401
|
+
|
|
402
|
+
|
|
309
403
|
if (mapCluster instanceof Array) {
|
|
310
404
|
t.cluster(mapCluster);
|
|
311
405
|
}
|
|
312
406
|
/*设置指定图元展示*/
|
|
407
|
+
|
|
408
|
+
|
|
313
409
|
if (mapVisiblePoints) {
|
|
314
410
|
t.setVisiblePoints(mapVisiblePoints);
|
|
315
|
-
}
|
|
316
|
-
|
|
411
|
+
} //添加海量点
|
|
412
|
+
|
|
413
|
+
|
|
317
414
|
if (mapPointCollection instanceof Array) {
|
|
318
415
|
t.addPointCollection(mapPointCollection);
|
|
319
|
-
}
|
|
320
|
-
|
|
416
|
+
} //设置区域限制
|
|
417
|
+
|
|
418
|
+
|
|
321
419
|
if (areaRestriction && !!areaRestriction[0] && !!areaRestriction[1]) {
|
|
322
420
|
t.setAreaRestriction(areaRestriction);
|
|
323
421
|
}
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
});
|
|
422
|
+
|
|
423
|
+
_this2.mapCreated = true;
|
|
327
424
|
};
|
|
425
|
+
|
|
328
426
|
var event = function event(e, status) {
|
|
329
427
|
var gis = t.state.gis;
|
|
330
428
|
var overall_feature = null; //鼠标移入事件时记录当前的feature,为鼠标移出要素时保存操作的要素对象
|
|
429
|
+
|
|
331
430
|
var dragAddMoveFlag = false; //记录地图拖拽和移动事件
|
|
332
431
|
// 地图开始加载时
|
|
432
|
+
|
|
333
433
|
gis.on('loadstart', function () {
|
|
334
434
|
gis.getTargetElement().classList.add('spinner');
|
|
335
|
-
});
|
|
336
|
-
|
|
435
|
+
}); // 地图加载结束时
|
|
436
|
+
|
|
337
437
|
gis.on('loadend', function () {
|
|
338
438
|
gis.getTargetElement().classList.remove('spinner');
|
|
339
|
-
});
|
|
340
|
-
|
|
341
|
-
gis.on('dbclick', function (evt) {});
|
|
342
|
-
|
|
439
|
+
}); // 地图双击事件
|
|
440
|
+
|
|
441
|
+
gis.on('dbclick', function (evt) {}); // 地图点击事件
|
|
442
|
+
|
|
343
443
|
gis.on('singleclick', function (evt) {
|
|
344
444
|
var feature = gis.forEachFeatureAtPixel(evt.pixel, function (feature) {
|
|
345
445
|
return feature;
|
|
346
446
|
});
|
|
447
|
+
|
|
347
448
|
if (feature) {
|
|
348
449
|
var target = feature.getProperties();
|
|
349
450
|
var id = '';
|
|
350
451
|
var elementId = '';
|
|
452
|
+
|
|
351
453
|
if ((0, _lodash.isArray)(target.features)) {
|
|
352
454
|
// 处理聚合点击
|
|
353
455
|
var properties = target.features[0].getProperties();
|
|
@@ -357,23 +459,25 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
357
459
|
} else {
|
|
358
460
|
id = target.id;
|
|
359
461
|
elementId = target.element;
|
|
360
|
-
}
|
|
361
|
-
// top: e.clientY,//当前点所在的位置(屏幕)
|
|
462
|
+
} // top: e.clientY,//当前点所在的位置(屏幕)
|
|
362
463
|
// left: e.clientX,
|
|
464
|
+
|
|
465
|
+
|
|
363
466
|
t.clickGraphic(id || elementId, evt, target);
|
|
364
467
|
} else {
|
|
365
468
|
t.clickMap(evt);
|
|
366
469
|
}
|
|
367
|
-
});
|
|
368
|
-
|
|
470
|
+
}); // 鼠标移动事件 - 当鼠标指向要素时改变光标状态
|
|
471
|
+
|
|
369
472
|
gis.on('pointermove', function (evt) {
|
|
370
473
|
var pixel = gis.getEventPixel(evt.originalEvent);
|
|
371
474
|
var hit = gis.hasFeatureAtPixel(pixel);
|
|
372
|
-
gis.getTargetElement().style.cursor = hit ? 'pointer' : 'default';
|
|
373
|
-
|
|
475
|
+
gis.getTargetElement().style.cursor = hit ? 'pointer' : 'default'; // 获取到当前鼠标移动下的feature
|
|
476
|
+
|
|
374
477
|
var feature = gis.forEachFeatureAtPixel(pixel, function (feature, layer) {
|
|
375
478
|
return feature;
|
|
376
479
|
});
|
|
480
|
+
|
|
377
481
|
if (feature) {
|
|
378
482
|
overall_feature = feature;
|
|
379
483
|
var values = feature.getProperties();
|
|
@@ -384,20 +488,22 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
384
488
|
type: 'mousein',
|
|
385
489
|
event: evt
|
|
386
490
|
});
|
|
491
|
+
|
|
387
492
|
var _values = overall_feature.getProperties();
|
|
493
|
+
|
|
388
494
|
t.mouseOutGraphic(_values.id, evt);
|
|
389
495
|
overall_feature = null;
|
|
390
496
|
}
|
|
391
497
|
}
|
|
392
|
-
});
|
|
393
|
-
|
|
498
|
+
}); // 鼠标拖拽事件 - 拖拽开始即是地图移动开始
|
|
499
|
+
|
|
394
500
|
gis.on('pointerdrag', function (evt) {
|
|
395
501
|
dragAddMoveFlag = true;
|
|
396
502
|
t.dragMapStart(evt);
|
|
397
503
|
t.moveStart(evt);
|
|
398
504
|
});
|
|
399
|
-
var zoom = 0;
|
|
400
|
-
|
|
505
|
+
var zoom = 0; // 地图移动事件 - 移动结束即是拖拽事件结束 也是地图缩放事件(无开始和结束事件)的监听
|
|
506
|
+
|
|
401
507
|
gis.on('moveend', function (evt) {
|
|
402
508
|
t.dragMapEnd(evt);
|
|
403
509
|
t.moveEnd(evt);
|
|
@@ -406,46 +512,51 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
406
512
|
t.zoomEnd(evt);
|
|
407
513
|
}, 300);
|
|
408
514
|
dragAddMoveFlag = false;
|
|
409
|
-
});
|
|
410
|
-
// gis.getViewport().addEventListener('mouseout', function () {
|
|
515
|
+
}); // gis.getViewport().addEventListener('mouseout', function () {
|
|
411
516
|
// helpTooltipElement.classList.add('hidden');
|
|
412
517
|
// });
|
|
413
518
|
};
|
|
519
|
+
|
|
414
520
|
event();
|
|
415
521
|
t.setCenter(t.props.center);
|
|
416
522
|
initData();
|
|
417
|
-
}
|
|
418
|
-
|
|
523
|
+
} // 创建地图
|
|
524
|
+
|
|
419
525
|
}, {
|
|
420
526
|
key: "createMap",
|
|
421
527
|
value: function createMap() {
|
|
422
528
|
var t = this;
|
|
423
529
|
var _t$props2 = t.props,
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
530
|
+
_t$props2$olProps = _t$props2.olProps,
|
|
531
|
+
olProps = _t$props2$olProps === void 0 ? {} : _t$props2$olProps,
|
|
532
|
+
_t$props2$mapCenter = _t$props2.mapCenter,
|
|
533
|
+
mapCenter = _t$props2$mapCenter === void 0 ? [] : _t$props2$mapCenter,
|
|
534
|
+
mapId = _t$props2.mapId,
|
|
535
|
+
mapZoomLevel = _t$props2.mapZoomLevel,
|
|
536
|
+
minZoom = _t$props2.minZoom,
|
|
537
|
+
maxZoom = _t$props2.maxZoom;
|
|
432
538
|
var projection = olProps.projection,
|
|
433
|
-
|
|
539
|
+
olCoverage = olProps.olCoverage;
|
|
540
|
+
|
|
434
541
|
if (window.VtxMap) {
|
|
435
542
|
window.VtxMap[mapId] = null;
|
|
436
543
|
} else {
|
|
437
544
|
window.VtxMap = {};
|
|
438
545
|
}
|
|
546
|
+
|
|
439
547
|
if (!minZoom) {
|
|
440
548
|
minZoom = 2;
|
|
441
549
|
}
|
|
550
|
+
|
|
442
551
|
if (!maxZoom) {
|
|
443
552
|
maxZoom = 19;
|
|
444
553
|
}
|
|
554
|
+
|
|
445
555
|
if (!projection) {
|
|
446
556
|
projection = 'EPSG:4326';
|
|
447
|
-
}
|
|
448
|
-
|
|
557
|
+
} //中心点
|
|
558
|
+
|
|
559
|
+
|
|
449
560
|
var center = mapCenter && mapCenter instanceof Array && mapCenter.length == 2 ? mapCenter : [116.400433, 39.906705];
|
|
450
561
|
center = [parseFloat(center[0]), parseFloat(center[1])];
|
|
451
562
|
window.VtxMap[mapId] = t.state.gis = new ol.Map({
|
|
@@ -462,8 +573,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
462
573
|
rotate: false,
|
|
463
574
|
attribution: false
|
|
464
575
|
})
|
|
465
|
-
});
|
|
466
|
-
|
|
576
|
+
}); // 基本地图视图
|
|
577
|
+
|
|
467
578
|
t.viewer = new ol.View({
|
|
468
579
|
center: center,
|
|
469
580
|
zoom: mapZoomLevel || 10,
|
|
@@ -473,23 +584,20 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
473
584
|
});
|
|
474
585
|
t.loadLayers(olCoverage, [], true);
|
|
475
586
|
t.initPropsForUser();
|
|
476
|
-
}
|
|
587
|
+
} // 加载图层
|
|
588
|
+
|
|
477
589
|
}, {
|
|
478
590
|
key: "getWMTS",
|
|
479
|
-
value:
|
|
480
|
-
// wmts图层资源
|
|
591
|
+
value: // wmts图层资源
|
|
481
592
|
function getWMTS(options) {
|
|
482
593
|
var url = options.url,
|
|
483
|
-
|
|
484
|
-
|
|
594
|
+
params = options.params,
|
|
595
|
+
sourceOptions = options.sourceOptions; //切片名
|
|
485
596
|
|
|
486
|
-
|
|
487
|
-
var matrixIds = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18'];
|
|
597
|
+
var matrixIds = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18']; //分辨率
|
|
488
598
|
|
|
489
|
-
|
|
490
|
-
var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125e-4, 3.4332275390625e-4, 1.71661376953125e-4, 8.58306884765625e-5, 4.291534423828125e-5, 2.1457672119140625e-5, 1.0728836059570312e-5, 5.364418029785156e-6, 2.682209014892578e-6];
|
|
599
|
+
var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125e-4, 3.4332275390625e-4, 1.71661376953125e-4, 8.58306884765625e-5, 4.291534423828125e-5, 2.1457672119140625e-5, 1.0728836059570312e-5, 5.364418029785156e-6, 2.682209014892578e-6]; //切片策略
|
|
491
600
|
|
|
492
|
-
//切片策略
|
|
493
601
|
var tilegrid = new ol.tilegrid.WMTS({
|
|
494
602
|
extent: [-180.0, -90.0, 180.0, 90.0],
|
|
495
603
|
//范围
|
|
@@ -499,9 +607,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
499
607
|
resolutions: resolutions,
|
|
500
608
|
//分辨率
|
|
501
609
|
matrixIds: matrixIds //层级标识列表,与地图级数保持一致
|
|
502
|
-
});
|
|
503
610
|
|
|
504
|
-
//设置地图投影
|
|
611
|
+
}); //设置地图投影
|
|
612
|
+
|
|
505
613
|
var projection = new ol.proj.Projection({
|
|
506
614
|
code: 'EPSG:4326',
|
|
507
615
|
units: 'degrees',
|
|
@@ -515,27 +623,29 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
515
623
|
projection: projection,
|
|
516
624
|
tileGrid: tilegrid
|
|
517
625
|
}, sourceOptions));
|
|
518
|
-
}
|
|
626
|
+
} // 添加普通图层
|
|
519
627
|
|
|
520
|
-
// 添加普通图层
|
|
521
628
|
}, {
|
|
522
629
|
key: "addTileLayer",
|
|
523
630
|
value: function addTileLayer(_ref) {
|
|
524
631
|
var url = _ref.url,
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
632
|
+
_ref$params = _ref.params,
|
|
633
|
+
params = _ref$params === void 0 ? {} : _ref$params,
|
|
634
|
+
_ref$sourceOptions = _ref.sourceOptions,
|
|
635
|
+
sourceOptions = _ref$sourceOptions === void 0 ? {} : _ref$sourceOptions,
|
|
636
|
+
type = _ref.type,
|
|
637
|
+
source = _ref.source;
|
|
638
|
+
|
|
531
639
|
if (url) {
|
|
532
640
|
var exist = this.olLayers.find(function (item) {
|
|
533
641
|
return item.address === url;
|
|
534
642
|
});
|
|
643
|
+
|
|
535
644
|
if (exist) {
|
|
536
645
|
exist.layer.setVisible(true);
|
|
537
646
|
return;
|
|
538
647
|
}
|
|
648
|
+
|
|
539
649
|
var layerSource = source || (type === 'WMTS' ? this.getWMTS({
|
|
540
650
|
url: url,
|
|
541
651
|
params: params,
|
|
@@ -543,54 +653,58 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
543
653
|
}) : new ol.source.XYZ(_objectSpread({
|
|
544
654
|
url: url
|
|
545
655
|
}, sourceOptions)));
|
|
656
|
+
|
|
546
657
|
var _layer2 = new ol.layer.Tile({
|
|
547
658
|
source: layerSource
|
|
548
|
-
});
|
|
659
|
+
}); // 将图层添加到地图上
|
|
660
|
+
|
|
549
661
|
|
|
550
|
-
// 将图层添加到地图上
|
|
551
662
|
this.state.gis.addLayer(_layer2);
|
|
552
663
|
this.olLayers.push({
|
|
553
664
|
address: url,
|
|
554
665
|
layer: _layer2
|
|
555
666
|
});
|
|
556
667
|
}
|
|
557
|
-
}
|
|
558
|
-
|
|
668
|
+
} // 添加超图图层
|
|
669
|
+
|
|
559
670
|
}, {
|
|
560
671
|
key: "addSuperMapLayer",
|
|
561
672
|
value: function addSuperMapLayer(url) {
|
|
562
673
|
var exist = this.olLayers.find(function (item) {
|
|
563
674
|
return item.address === url;
|
|
564
675
|
});
|
|
676
|
+
|
|
565
677
|
if (exist) {
|
|
566
678
|
exist.layer.setVisible(true);
|
|
567
679
|
return;
|
|
568
680
|
}
|
|
681
|
+
|
|
569
682
|
var layer = new ol.layer.Tile({
|
|
570
683
|
source: new ol.source.TileSuperMapRest({
|
|
571
684
|
url: url
|
|
572
685
|
})
|
|
573
|
-
});
|
|
574
|
-
|
|
686
|
+
}); // 将图层添加到地图上
|
|
687
|
+
|
|
575
688
|
this.state.gis.addLayer(layer);
|
|
576
689
|
this.olLayers.push({
|
|
577
690
|
address: url,
|
|
578
691
|
layer: layer
|
|
579
692
|
});
|
|
580
|
-
}
|
|
581
|
-
|
|
693
|
+
} // 添加geoServer_geoJSON图层
|
|
694
|
+
|
|
582
695
|
}, {
|
|
583
696
|
key: "addGeoServerLayer",
|
|
584
697
|
value: function addGeoServerLayer(_url) {
|
|
585
698
|
var exist = this.olLayers.find(function (item) {
|
|
586
699
|
return item.address === _url;
|
|
587
700
|
});
|
|
701
|
+
|
|
588
702
|
if (exist) {
|
|
589
703
|
exist.layer.setVisible(true);
|
|
590
704
|
return;
|
|
591
|
-
}
|
|
705
|
+
} // 矢量数据源
|
|
706
|
+
|
|
592
707
|
|
|
593
|
-
// 矢量数据源
|
|
594
708
|
var vectorSource = new ol.source.Vector({
|
|
595
709
|
// 设置格式化类型
|
|
596
710
|
format: new ol.format.GeoJSON(),
|
|
@@ -599,15 +713,15 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
599
713
|
return "".concat(_url, "&bbox=").concat(extent.join(','));
|
|
600
714
|
},
|
|
601
715
|
strategy: ol.loadingstrategy.bbox
|
|
602
|
-
});
|
|
716
|
+
}); // 矢量图层
|
|
603
717
|
|
|
604
|
-
// 矢量图层
|
|
605
718
|
var layer = new ol.layer.Vector({
|
|
606
719
|
// 设置数据源
|
|
607
720
|
source: vectorSource,
|
|
608
721
|
// 设置图层样式也可以 function (feature) { /** 根据内容动态加载样式 **/ return Style}
|
|
609
722
|
style: function style(feature) {
|
|
610
723
|
var _icon$;
|
|
724
|
+
|
|
611
725
|
var el = feature.A || {};
|
|
612
726
|
var icon = JSON.parse(el.icon || '[]');
|
|
613
727
|
var mapIcon = (_icon$ = icon[0]) !== null && _icon$ !== void 0 && _icon$.id ? "/cloudFile/common/downloadFile?id=".concat(icon[0].id) : require("../images/defaultMarker.png");
|
|
@@ -628,8 +742,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
628
742
|
})
|
|
629
743
|
});
|
|
630
744
|
}
|
|
631
|
-
});
|
|
632
|
-
|
|
745
|
+
}); // 将图层添加到地图上
|
|
746
|
+
|
|
633
747
|
this.state.gis.addLayer(layer);
|
|
634
748
|
this.olLayers.push({
|
|
635
749
|
address: _url,
|
|
@@ -640,7 +754,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
640
754
|
key: "formatUrl",
|
|
641
755
|
value: function formatUrl(url) {
|
|
642
756
|
var param = {},
|
|
643
|
-
|
|
757
|
+
address = url.split("?")[0];
|
|
644
758
|
url.split("?")[1].split("&").map(function (item) {
|
|
645
759
|
var json = item.split("=");
|
|
646
760
|
param[json[0].toUpperCase()] = json[1] ? decodeURIComponent(json[1]) : '';
|
|
@@ -649,8 +763,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
649
763
|
param: param,
|
|
650
764
|
address: address
|
|
651
765
|
};
|
|
652
|
-
}
|
|
653
|
-
|
|
766
|
+
} // 添加geoServer_image图层
|
|
767
|
+
|
|
654
768
|
}, {
|
|
655
769
|
key: "addGeoServerImageLayer",
|
|
656
770
|
value: function addGeoServerImageLayer(item) {
|
|
@@ -658,15 +772,18 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
658
772
|
var exist = this.olLayers.find(function (item) {
|
|
659
773
|
return item.address === url;
|
|
660
774
|
});
|
|
775
|
+
|
|
661
776
|
if (exist) {
|
|
662
777
|
exist.layer.setVisible(true);
|
|
663
778
|
return;
|
|
664
779
|
}
|
|
780
|
+
|
|
665
781
|
var _this$formatUrl = this.formatUrl(url),
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
782
|
+
_this$formatUrl$param = _this$formatUrl.param,
|
|
783
|
+
param = _this$formatUrl$param === void 0 ? {} : _this$formatUrl$param,
|
|
784
|
+
address = _this$formatUrl.address; // 矢量数据源
|
|
785
|
+
|
|
786
|
+
|
|
670
787
|
var vectorSource = new ol.source.ImageWMS({
|
|
671
788
|
url: address,
|
|
672
789
|
serverType: 'geoserver',
|
|
@@ -675,122 +792,140 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
675
792
|
params: _objectSpread(_objectSpread({
|
|
676
793
|
VERSION: '1.1.0'
|
|
677
794
|
}, item.param || {}), param)
|
|
678
|
-
});
|
|
795
|
+
}); // 矢量图层
|
|
679
796
|
|
|
680
|
-
// 矢量图层
|
|
681
797
|
var layer = new ol.layer.Image({
|
|
682
798
|
// 设置数据源
|
|
683
799
|
source: vectorSource
|
|
684
|
-
});
|
|
685
|
-
|
|
800
|
+
}); // 将图层添加到地图上
|
|
801
|
+
|
|
686
802
|
this.state.gis.addLayer(layer);
|
|
687
803
|
this.olLayers.push({
|
|
688
804
|
address: url,
|
|
689
805
|
layer: layer,
|
|
690
806
|
source: vectorSource
|
|
691
807
|
});
|
|
692
|
-
}
|
|
693
|
-
|
|
808
|
+
} // 初始化对外方法
|
|
809
|
+
|
|
694
810
|
}, {
|
|
695
811
|
key: "initPropsForUser",
|
|
696
812
|
value: function initPropsForUser() {
|
|
697
813
|
var t = this;
|
|
814
|
+
|
|
698
815
|
t.state.gis["getCenter"] = function () {
|
|
699
816
|
return t.getCenter();
|
|
700
817
|
};
|
|
818
|
+
|
|
701
819
|
t.state.gis["setCenter"] = function (gt) {
|
|
702
820
|
t.setCenter(gt);
|
|
703
821
|
};
|
|
822
|
+
|
|
704
823
|
t.state.gis["getZoomLevel"] = function () {
|
|
705
824
|
return t.getZoomLevel();
|
|
706
825
|
};
|
|
826
|
+
|
|
707
827
|
t.state.gis["showInfoWindow"] = function (obj) {
|
|
708
828
|
return t.showInfoWindow(obj);
|
|
709
829
|
};
|
|
830
|
+
|
|
710
831
|
t.state.gis["hideInfoWindow"] = function () {
|
|
711
832
|
return t.hideInfoWindow();
|
|
712
833
|
};
|
|
834
|
+
|
|
713
835
|
t.state.gis["frameSelect"] = function () {
|
|
714
836
|
var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
715
837
|
var callback = arguments.length > 1 ? arguments[1] : undefined;
|
|
716
838
|
return t.frameSelect(obj, callback);
|
|
717
839
|
};
|
|
840
|
+
|
|
718
841
|
t.state.gis["clearFrameSelect"] = function () {
|
|
719
842
|
return t.clearFrameSelect();
|
|
720
843
|
};
|
|
844
|
+
|
|
721
845
|
t.state.gis["clearFrameSelectById"] = function (id) {
|
|
722
846
|
return t.clearFrameSelectById(id);
|
|
723
847
|
};
|
|
848
|
+
|
|
724
849
|
t.state.gis["refresh"] = function () {
|
|
725
850
|
t.refresh();
|
|
726
851
|
};
|
|
727
|
-
}
|
|
728
|
-
|
|
852
|
+
} // 设置中心点
|
|
853
|
+
|
|
729
854
|
}, {
|
|
730
855
|
key: "setCenter",
|
|
731
856
|
value: function setCenter(gt) {
|
|
732
857
|
var t = this;
|
|
858
|
+
|
|
733
859
|
if (!t.state.gis) {
|
|
734
860
|
return;
|
|
735
861
|
}
|
|
862
|
+
|
|
736
863
|
if (gt) {
|
|
737
864
|
//经纬度 必须存在 否则不操作
|
|
738
865
|
if (!gt[0] || !gt[1]) {
|
|
739
866
|
return false;
|
|
740
|
-
}
|
|
741
|
-
|
|
867
|
+
} //如果设置的经纬度 与当前中心点一样 不操作
|
|
868
|
+
|
|
869
|
+
|
|
742
870
|
var c = t.getCenter();
|
|
871
|
+
|
|
743
872
|
if (c.lng == gt[0] && c.lat == gt[1]) {
|
|
744
873
|
return false;
|
|
745
874
|
}
|
|
875
|
+
|
|
746
876
|
t.state.gis.getView().setCenter(gt);
|
|
747
877
|
t.viewer.animate({
|
|
748
878
|
center: gt,
|
|
749
879
|
duration: 2000
|
|
750
880
|
});
|
|
751
881
|
}
|
|
752
|
-
}
|
|
753
|
-
|
|
882
|
+
} //设置地图缩放层级
|
|
883
|
+
|
|
754
884
|
}, {
|
|
755
885
|
key: "setZoomLevel",
|
|
756
886
|
value: function setZoomLevel(zoom) {
|
|
757
887
|
var t = this;
|
|
758
888
|
var z = t.state.gis.getView().getZoom();
|
|
889
|
+
|
|
759
890
|
if (z == zoom) {
|
|
760
891
|
return false;
|
|
761
892
|
}
|
|
893
|
+
|
|
762
894
|
t.state.gis.getView().setZoom(zoom);
|
|
763
|
-
}
|
|
764
|
-
|
|
895
|
+
} //获取当前中心点
|
|
896
|
+
|
|
765
897
|
}, {
|
|
766
898
|
key: "getCenter",
|
|
767
899
|
value: function getCenter() {
|
|
768
900
|
var t = this;
|
|
769
901
|
var gis = t.state.gis;
|
|
902
|
+
|
|
770
903
|
var _gis$getView$calculat = gis.getView().calculateExtent(gis.getSize()),
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
904
|
+
_gis$getView$calculat2 = _slicedToArray(_gis$getView$calculat, 4),
|
|
905
|
+
xmin = _gis$getView$calculat2[0],
|
|
906
|
+
ymin = _gis$getView$calculat2[1],
|
|
907
|
+
xmax = _gis$getView$calculat2[2],
|
|
908
|
+
ymax = _gis$getView$calculat2[3];
|
|
909
|
+
|
|
776
910
|
return {
|
|
777
911
|
lng: (xmin + xmax) / 2,
|
|
778
912
|
lat: (ymin + ymax) / 2
|
|
779
913
|
};
|
|
780
|
-
}
|
|
781
|
-
|
|
914
|
+
} //编辑图元
|
|
915
|
+
|
|
782
916
|
}, {
|
|
783
917
|
key: "doEdit",
|
|
784
918
|
value: function doEdit(id) {
|
|
785
|
-
var t = this;
|
|
786
|
-
|
|
919
|
+
var t = this; //获取图元对象
|
|
920
|
+
|
|
787
921
|
var gc = t.GM.getGraphic(id);
|
|
788
922
|
var gp = t.GM.getGraphicParam(id);
|
|
789
|
-
if (!gc) return false;
|
|
790
|
-
|
|
923
|
+
if (!gc) return false; //关闭先前编辑的图元
|
|
924
|
+
|
|
791
925
|
if (!!t.state.editId) {
|
|
792
926
|
t.endEdit();
|
|
793
927
|
}
|
|
928
|
+
|
|
794
929
|
if (!t.editToolbar) {
|
|
795
930
|
t.editToolbar = new ol.interaction.Modify({
|
|
796
931
|
source: gp.source,
|
|
@@ -800,23 +935,26 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
800
935
|
} else {
|
|
801
936
|
t.state.gis.addInteraction(t.editToolbar);
|
|
802
937
|
}
|
|
938
|
+
|
|
803
939
|
t.editToolbar.on('modifyend', function (e) {
|
|
804
940
|
var feature = gc;
|
|
805
941
|
e.features.forEach(function (feature) {
|
|
806
942
|
feature = feature;
|
|
807
|
-
});
|
|
808
|
-
|
|
943
|
+
}); //返回参数
|
|
944
|
+
|
|
809
945
|
var param = {
|
|
810
946
|
id: id,
|
|
811
947
|
e: e
|
|
812
|
-
};
|
|
813
|
-
|
|
948
|
+
}; // 绘制内部管理的图元
|
|
949
|
+
|
|
814
950
|
if (gp.geometry.type == 'point') {
|
|
815
951
|
var cur = feature.getProperties().geometry;
|
|
952
|
+
|
|
816
953
|
var _cur$flatCoordinates = _slicedToArray(cur.flatCoordinates, 2),
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
954
|
+
lng = _cur$flatCoordinates[0],
|
|
955
|
+
lat = _cur$flatCoordinates[1]; //处理点返回参数
|
|
956
|
+
|
|
957
|
+
|
|
820
958
|
param = _objectSpread(_objectSpread({}, param), {}, {
|
|
821
959
|
attributes: _objectSpread(_objectSpread({}, gp.attributes), {}, {
|
|
822
960
|
longitude: lng,
|
|
@@ -845,12 +983,14 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
845
983
|
y: lat
|
|
846
984
|
}
|
|
847
985
|
});
|
|
848
|
-
}
|
|
849
|
-
|
|
986
|
+
} //线
|
|
987
|
+
|
|
988
|
+
|
|
850
989
|
if (gp.geometry.type == 'polyline') {
|
|
851
990
|
var _cur = feature.getProperties().geometry;
|
|
852
991
|
var oddList = [],
|
|
853
|
-
|
|
992
|
+
evenList = [];
|
|
993
|
+
|
|
854
994
|
_cur.flatCoordinates.map(function (item, index) {
|
|
855
995
|
// 判断下标奇偶数
|
|
856
996
|
if (index % 2 === 0) {
|
|
@@ -859,13 +999,15 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
859
999
|
oddList.push(item);
|
|
860
1000
|
}
|
|
861
1001
|
});
|
|
1002
|
+
|
|
862
1003
|
var path = oddList.map(function (item, index) {
|
|
863
1004
|
return [evenList[index], oddList[index]];
|
|
864
|
-
});
|
|
865
|
-
|
|
1005
|
+
}); //处理线返回参数
|
|
1006
|
+
|
|
866
1007
|
var _t$dealData = t.dealData(path),
|
|
867
|
-
|
|
868
|
-
|
|
1008
|
+
lnglatAry = _t$dealData.lnglatAry,
|
|
1009
|
+
_extent = _t$dealData._extent;
|
|
1010
|
+
|
|
869
1011
|
param = _objectSpread(_objectSpread({}, param), {}, {
|
|
870
1012
|
attributes: _objectSpread(_objectSpread({}, gp.attributes), {}, {
|
|
871
1013
|
paths: path,
|
|
@@ -897,12 +1039,14 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
897
1039
|
},
|
|
898
1040
|
distance: t.calculateDistance(path)
|
|
899
1041
|
});
|
|
900
|
-
}
|
|
901
|
-
|
|
1042
|
+
} //面
|
|
1043
|
+
|
|
1044
|
+
|
|
902
1045
|
if (gp.geometry.type == 'polygon') {
|
|
903
1046
|
var _cur2 = feature.getProperties().geometry;
|
|
904
1047
|
var _oddList = [],
|
|
905
|
-
|
|
1048
|
+
_evenList = [];
|
|
1049
|
+
|
|
906
1050
|
_cur2.flatCoordinates.map(function (item, index) {
|
|
907
1051
|
// 判断下标奇偶数
|
|
908
1052
|
if (index % 2 === 0) {
|
|
@@ -911,13 +1055,16 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
911
1055
|
_oddList.push(item);
|
|
912
1056
|
}
|
|
913
1057
|
});
|
|
1058
|
+
|
|
914
1059
|
var _path = _oddList.map(function (item, index) {
|
|
915
1060
|
return [_evenList[index], _oddList[index]];
|
|
916
|
-
});
|
|
917
|
-
|
|
1061
|
+
}); //处理线返回参数
|
|
1062
|
+
|
|
1063
|
+
|
|
918
1064
|
var _t$dealData2 = t.dealData(_path),
|
|
919
|
-
|
|
920
|
-
|
|
1065
|
+
_lnglatAry = _t$dealData2.lnglatAry,
|
|
1066
|
+
_extent2 = _t$dealData2._extent;
|
|
1067
|
+
|
|
921
1068
|
param = _objectSpread(_objectSpread({}, param), {}, {
|
|
922
1069
|
attributes: _objectSpread(_objectSpread({}, gp.attributes), {}, {
|
|
923
1070
|
rings: _path,
|
|
@@ -950,9 +1097,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
950
1097
|
area: (0, _MapToolFunction.getPolygonArea)(_path)
|
|
951
1098
|
});
|
|
952
1099
|
}
|
|
1100
|
+
|
|
953
1101
|
if (gp.geometry.type == 'circle') {
|
|
954
1102
|
var _cur3 = feature.getProperties().geometry;
|
|
1103
|
+
|
|
955
1104
|
var center = _cur3.getCenter();
|
|
1105
|
+
|
|
956
1106
|
var sketchCoords_ = [_cur3.flatCoordinates[0], _cur3.flatCoordinates[1]];
|
|
957
1107
|
var sketchCoords_2 = [_cur3.flatCoordinates[2], _cur3.flatCoordinates[3]];
|
|
958
1108
|
var radius = ol.sphere.getDistance(sketchCoords_, sketchCoords_2);
|
|
@@ -997,27 +1147,31 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
997
1147
|
}
|
|
998
1148
|
});
|
|
999
1149
|
}
|
|
1150
|
+
|
|
1000
1151
|
if ('editGraphicChange' in t.props && typeof t.props.editGraphicChange == 'function') {
|
|
1001
1152
|
t.props.editGraphicChange(param);
|
|
1002
1153
|
}
|
|
1154
|
+
|
|
1003
1155
|
t.GM.setGraphic(id, feature).setGraphicParam(id, _objectSpread(_objectSpread({}, param), {}, {
|
|
1004
1156
|
source: gp.source
|
|
1005
1157
|
}));
|
|
1006
1158
|
});
|
|
1007
1159
|
t.editId = id;
|
|
1008
|
-
}
|
|
1009
|
-
|
|
1160
|
+
} //关闭编辑
|
|
1161
|
+
|
|
1010
1162
|
}, {
|
|
1011
1163
|
key: "endEdit",
|
|
1012
1164
|
value: function endEdit() {
|
|
1013
1165
|
var t = this;
|
|
1166
|
+
|
|
1014
1167
|
if (t.editToolbar) {
|
|
1015
1168
|
t.state.gis.removeInteraction(t.editToolbar);
|
|
1016
1169
|
t.editToolbar = null;
|
|
1017
1170
|
}
|
|
1171
|
+
|
|
1018
1172
|
t.editId = '';
|
|
1019
|
-
}
|
|
1020
|
-
|
|
1173
|
+
} // 绘制图元
|
|
1174
|
+
|
|
1021
1175
|
}, {
|
|
1022
1176
|
key: "draw",
|
|
1023
1177
|
value: function draw(obj) {
|
|
@@ -1025,35 +1179,38 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1025
1179
|
var drawInfo = t.drawInfo;
|
|
1026
1180
|
var gis = t.state.gis;
|
|
1027
1181
|
var drawParam = {},
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1182
|
+
image,
|
|
1183
|
+
stroke,
|
|
1184
|
+
fill; //初始化参数
|
|
1185
|
+
|
|
1032
1186
|
drawParam.geometryType = obj.geometryType || 'point';
|
|
1033
1187
|
drawParam.parameter = obj.parameter ? _objectSpread({}, obj.parameter) : {};
|
|
1034
1188
|
drawParam.data = obj.data ? _objectSpread({}, obj.data) : {};
|
|
1035
|
-
drawParam.data.id = (obj.data || {}).id || "draw".concat(new Date().getTime());
|
|
1036
|
-
|
|
1037
|
-
t.drawParam = drawParam;
|
|
1038
|
-
|
|
1189
|
+
drawParam.data.id = (obj.data || {}).id || "draw".concat(new Date().getTime()); //缓存 绘制的数据
|
|
1190
|
+
|
|
1191
|
+
t.drawParam = drawParam; //判断id是否存在
|
|
1192
|
+
|
|
1039
1193
|
var len = t.state.drawIds[drawParam.geometryType].indexOf(drawParam.data.id);
|
|
1194
|
+
|
|
1040
1195
|
if (len > -1) {
|
|
1041
1196
|
//如果id存在 删除存在的图元,清除drawId中的id数据
|
|
1042
1197
|
t.removeGraphic(drawParam.data.id);
|
|
1043
1198
|
t.state.drawIds[drawParam.geometryType].splice(len, 1);
|
|
1044
1199
|
}
|
|
1200
|
+
|
|
1045
1201
|
var type = 'Point',
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1202
|
+
style = new ol.style.Style({
|
|
1203
|
+
image: new ol.style.Icon({
|
|
1204
|
+
anchor: [-drawParam.parameter.markerContentX || -15, -drawParam.parameter.markerContentY || -15],
|
|
1205
|
+
anchorXUnits: 'pixels',
|
|
1206
|
+
anchorYUnits: 'pixels',
|
|
1207
|
+
src: drawParam.parameter.url || require("../images/defaultMarker.png"),
|
|
1208
|
+
opacity: 1,
|
|
1209
|
+
scale: drawParam.parameter.scale || 1
|
|
1210
|
+
})
|
|
1211
|
+
});
|
|
1056
1212
|
var geometryFunction;
|
|
1213
|
+
|
|
1057
1214
|
switch (drawParam.geometryType) {
|
|
1058
1215
|
case 'point':
|
|
1059
1216
|
type = 'Point';
|
|
@@ -1068,6 +1225,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1068
1225
|
})
|
|
1069
1226
|
});
|
|
1070
1227
|
break;
|
|
1228
|
+
|
|
1071
1229
|
case 'polyline':
|
|
1072
1230
|
type = 'LineString';
|
|
1073
1231
|
style = new ol.style.Style({
|
|
@@ -1078,6 +1236,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1078
1236
|
})
|
|
1079
1237
|
});
|
|
1080
1238
|
break;
|
|
1239
|
+
|
|
1081
1240
|
case 'polygon':
|
|
1082
1241
|
type = 'Polygon';
|
|
1083
1242
|
style = new ol.style.Style({
|
|
@@ -1091,10 +1250,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1091
1250
|
})
|
|
1092
1251
|
});
|
|
1093
1252
|
break;
|
|
1253
|
+
|
|
1094
1254
|
case 'rectangle':
|
|
1095
1255
|
type = 'Circle';
|
|
1096
1256
|
geometryFunction = ol.interaction.Draw.createBox();
|
|
1097
1257
|
break;
|
|
1258
|
+
|
|
1098
1259
|
case 'circle':
|
|
1099
1260
|
type = 'Circle';
|
|
1100
1261
|
style = new ol.style.Style({
|
|
@@ -1109,33 +1270,38 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1109
1270
|
});
|
|
1110
1271
|
break;
|
|
1111
1272
|
}
|
|
1273
|
+
|
|
1112
1274
|
if (!t.drawToolbar) {
|
|
1113
1275
|
t.drawToolbar = new ol.interaction.Draw({
|
|
1114
1276
|
source: t.drawSource,
|
|
1115
1277
|
type: type,
|
|
1116
|
-
geometryFunction: geometryFunction
|
|
1117
|
-
|
|
1278
|
+
geometryFunction: geometryFunction // style: style
|
|
1279
|
+
|
|
1118
1280
|
});
|
|
1119
1281
|
gis.addInteraction(t.drawToolbar);
|
|
1120
1282
|
} else {
|
|
1121
1283
|
gis.addInteraction(t.drawToolbar);
|
|
1122
1284
|
}
|
|
1285
|
+
|
|
1123
1286
|
t.drawToolbar.on('drawend', function (e) {
|
|
1124
1287
|
var _t$frameSelectProps$p;
|
|
1288
|
+
|
|
1125
1289
|
// 关闭绘制事件
|
|
1126
|
-
t.drawToolbar.finishDrawing();
|
|
1127
|
-
|
|
1290
|
+
t.drawToolbar.finishDrawing(); // 移除
|
|
1291
|
+
|
|
1128
1292
|
gis.removeInteraction(t.drawToolbar);
|
|
1129
|
-
var gc = e.feature.getGeometry();
|
|
1130
|
-
|
|
1131
|
-
var param = {};
|
|
1132
|
-
|
|
1293
|
+
var gc = e.feature.getGeometry(); //返回参数
|
|
1294
|
+
|
|
1295
|
+
var param = {}; // 绘制内部管理的图元
|
|
1296
|
+
|
|
1133
1297
|
if (t.drawParam.geometryType == 'point') {
|
|
1134
1298
|
var _gc$flatCoordinates = _slicedToArray(gc.flatCoordinates, 2),
|
|
1135
|
-
|
|
1136
|
-
|
|
1299
|
+
lng = _gc$flatCoordinates[0],
|
|
1300
|
+
lat = _gc$flatCoordinates[1];
|
|
1301
|
+
|
|
1137
1302
|
gc.x = lng;
|
|
1138
1303
|
gc.y = lat;
|
|
1304
|
+
|
|
1139
1305
|
if (t.GM.isRepetition(t.drawParam.data.id)) {
|
|
1140
1306
|
t.updatePoint([{
|
|
1141
1307
|
id: t.drawParam.data.id,
|
|
@@ -1152,9 +1318,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1152
1318
|
url: t.drawParam.parameter.url || require("../images/defaultMarker.png"),
|
|
1153
1319
|
config: _objectSpread({}, t.drawParam.parameter)
|
|
1154
1320
|
}], 'point');
|
|
1155
|
-
}
|
|
1321
|
+
} //处理点返回参数
|
|
1322
|
+
|
|
1156
1323
|
|
|
1157
|
-
//处理点返回参数
|
|
1158
1324
|
param = {
|
|
1159
1325
|
id: t.drawParam.data.id,
|
|
1160
1326
|
attributes: {
|
|
@@ -1169,11 +1335,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1169
1335
|
geometryType: 'point',
|
|
1170
1336
|
mapLayer: t.GM.getGraphic(t.drawParam.data.id)
|
|
1171
1337
|
};
|
|
1172
|
-
}
|
|
1173
|
-
|
|
1338
|
+
} //线
|
|
1339
|
+
|
|
1340
|
+
|
|
1174
1341
|
if (t.drawParam.geometryType == 'polyline') {
|
|
1175
1342
|
var oddList = [],
|
|
1176
|
-
|
|
1343
|
+
evenList = [];
|
|
1177
1344
|
gc.flatCoordinates.map(function (item, index) {
|
|
1178
1345
|
// 判断下标奇偶数
|
|
1179
1346
|
if (index % 2 === 0) {
|
|
@@ -1185,6 +1352,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1185
1352
|
var path = oddList.map(function (item, index) {
|
|
1186
1353
|
return [evenList[index], oddList[index]];
|
|
1187
1354
|
});
|
|
1355
|
+
|
|
1188
1356
|
if (t.GM.isRepetition(t.drawParam.data.id)) {
|
|
1189
1357
|
t.updateLine([{
|
|
1190
1358
|
id: t.drawParam.data.id,
|
|
@@ -1197,11 +1365,13 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1197
1365
|
paths: path,
|
|
1198
1366
|
config: _objectSpread({}, t.drawParam.parameter)
|
|
1199
1367
|
}], 'polyline');
|
|
1200
|
-
}
|
|
1201
|
-
|
|
1368
|
+
} //处理线返回参数
|
|
1369
|
+
|
|
1370
|
+
|
|
1202
1371
|
var _t$dealData3 = t.dealData(path),
|
|
1203
|
-
|
|
1204
|
-
|
|
1372
|
+
lnglatAry = _t$dealData3.lnglatAry,
|
|
1373
|
+
_extent = _t$dealData3._extent;
|
|
1374
|
+
|
|
1205
1375
|
param = {
|
|
1206
1376
|
lnglatAry: lnglatAry,
|
|
1207
1377
|
id: t.drawParam.data.id,
|
|
@@ -1217,11 +1387,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1217
1387
|
geometryType: 'polyline',
|
|
1218
1388
|
mapLayer: t.GM.getGraphic(t.drawParam.data.id)
|
|
1219
1389
|
};
|
|
1220
|
-
}
|
|
1221
|
-
|
|
1390
|
+
} //面
|
|
1391
|
+
|
|
1392
|
+
|
|
1222
1393
|
if (t.drawParam.geometryType == 'polygon') {
|
|
1223
1394
|
var _oddList2 = [],
|
|
1224
|
-
|
|
1395
|
+
_evenList2 = [];
|
|
1225
1396
|
gc.flatCoordinates.map(function (item, index) {
|
|
1226
1397
|
// 判断下标奇偶数
|
|
1227
1398
|
if (index % 2 === 0) {
|
|
@@ -1230,9 +1401,11 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1230
1401
|
_oddList2.push(item);
|
|
1231
1402
|
}
|
|
1232
1403
|
});
|
|
1404
|
+
|
|
1233
1405
|
var _path2 = _oddList2.map(function (item, index) {
|
|
1234
1406
|
return [_evenList2[index], _oddList2[index]];
|
|
1235
1407
|
});
|
|
1408
|
+
|
|
1236
1409
|
if (t.GM.isRepetition(t.drawParam.data.id)) {
|
|
1237
1410
|
t.updatePolygon([{
|
|
1238
1411
|
id: t.drawParam.data.id,
|
|
@@ -1245,11 +1418,13 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1245
1418
|
rings: _path2,
|
|
1246
1419
|
config: _objectSpread({}, t.drawParam.parameter)
|
|
1247
1420
|
}], t.drawParam.geometryType);
|
|
1248
|
-
}
|
|
1249
|
-
|
|
1421
|
+
} //处理线返回参数
|
|
1422
|
+
|
|
1423
|
+
|
|
1250
1424
|
var _t$dealData4 = t.dealData(_path2),
|
|
1251
|
-
|
|
1252
|
-
|
|
1425
|
+
_lnglatAry2 = _t$dealData4.lnglatAry,
|
|
1426
|
+
_extent3 = _t$dealData4._extent;
|
|
1427
|
+
|
|
1253
1428
|
param = {
|
|
1254
1429
|
lnglatAry: _lnglatAry2,
|
|
1255
1430
|
id: t.drawParam.data.id,
|
|
@@ -1267,8 +1442,10 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1267
1442
|
mapLayer: t.GM.getGraphic(t.drawParam.data.id)
|
|
1268
1443
|
};
|
|
1269
1444
|
}
|
|
1445
|
+
|
|
1270
1446
|
if (t.drawParam.geometryType == 'rectangle') {
|
|
1271
1447
|
var _path3 = e.feature.getGeometry().getCoordinates()[0];
|
|
1448
|
+
|
|
1272
1449
|
if (t.GM.isRepetition(t.drawParam.data.id)) {
|
|
1273
1450
|
t.updatePolygon([{
|
|
1274
1451
|
id: t.drawParam.data.id,
|
|
@@ -1281,11 +1458,13 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1281
1458
|
rings: _path3,
|
|
1282
1459
|
config: _objectSpread({}, t.drawParam.parameter)
|
|
1283
1460
|
}], t.drawParam.geometryType);
|
|
1284
|
-
}
|
|
1285
|
-
|
|
1461
|
+
} //处理线返回参数
|
|
1462
|
+
|
|
1463
|
+
|
|
1286
1464
|
var _t$dealData5 = t.dealData(_path3),
|
|
1287
|
-
|
|
1288
|
-
|
|
1465
|
+
_lnglatAry3 = _t$dealData5.lnglatAry,
|
|
1466
|
+
_extent4 = _t$dealData5._extent;
|
|
1467
|
+
|
|
1289
1468
|
param = {
|
|
1290
1469
|
lnglatAry: _lnglatAry3,
|
|
1291
1470
|
id: t.drawParam.data.id,
|
|
@@ -1303,12 +1482,14 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1303
1482
|
mapLayer: t.GM.getGraphic(t.drawParam.data.id)
|
|
1304
1483
|
};
|
|
1305
1484
|
}
|
|
1485
|
+
|
|
1306
1486
|
if (t.drawParam.geometryType == 'circle') {
|
|
1307
1487
|
var center = e.feature.getGeometry().getCenter();
|
|
1308
1488
|
var cur = e.feature.getProperties().geometry;
|
|
1309
1489
|
var sketchCoords_ = [cur.flatCoordinates[0], cur.flatCoordinates[1]];
|
|
1310
1490
|
var sketchCoords_2 = [cur.flatCoordinates[2], cur.flatCoordinates[3]];
|
|
1311
1491
|
var radius = ol.sphere.getDistance(sketchCoords_, sketchCoords_2);
|
|
1492
|
+
|
|
1312
1493
|
if (t.GM.isRepetition(t.drawParam.data.id)) {
|
|
1313
1494
|
t.updateCircle([{
|
|
1314
1495
|
id: t.drawParam.data.id,
|
|
@@ -1326,6 +1507,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1326
1507
|
config: _objectSpread({}, t.drawParam.parameter)
|
|
1327
1508
|
}], t.drawParam.geometryType);
|
|
1328
1509
|
}
|
|
1510
|
+
|
|
1329
1511
|
param = {
|
|
1330
1512
|
area: Math.PI * Math.pow(radius, 2),
|
|
1331
1513
|
attributes: {
|
|
@@ -1342,26 +1524,29 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1342
1524
|
mapLayer: t.GM.getGraphic(t.drawParam.data.id)
|
|
1343
1525
|
};
|
|
1344
1526
|
}
|
|
1527
|
+
|
|
1345
1528
|
if ('drawEnd' in t.props && typeof t.props.drawEnd == 'function') {
|
|
1346
1529
|
t.props.drawEnd(param);
|
|
1347
1530
|
}
|
|
1531
|
+
|
|
1348
1532
|
if (((_t$frameSelectProps$p = t.frameSelectProps[param.attributes.id]) === null || _t$frameSelectProps$p === void 0 ? void 0 : _t$frameSelectProps$p.callback) instanceof Function) {
|
|
1349
1533
|
t.frameSelectProps[param.attributes.id].callback(param);
|
|
1350
1534
|
}
|
|
1351
|
-
});
|
|
1352
|
-
|
|
1535
|
+
}); //保存绘制图元的id便于后期比对
|
|
1536
|
+
|
|
1353
1537
|
t.state.drawIds[drawParam.geometryType].push(drawParam.data.id);
|
|
1354
|
-
}
|
|
1355
|
-
|
|
1538
|
+
} // 关闭绘制
|
|
1539
|
+
|
|
1356
1540
|
}, {
|
|
1357
1541
|
key: "closeDraw",
|
|
1358
1542
|
value: function closeDraw() {
|
|
1359
1543
|
var t = this;
|
|
1360
1544
|
var gis = t.state.gis;
|
|
1545
|
+
|
|
1361
1546
|
if (t.drawToolbar) {
|
|
1362
1547
|
// 关闭绘制事件
|
|
1363
|
-
t.drawToolbar.finishDrawing();
|
|
1364
|
-
|
|
1548
|
+
t.drawToolbar.finishDrawing(); // 移除
|
|
1549
|
+
|
|
1365
1550
|
gis.removeInteraction(t.drawToolbar);
|
|
1366
1551
|
t.drawToolbar = null;
|
|
1367
1552
|
t.drawInfo = {
|
|
@@ -1371,6 +1556,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1371
1556
|
}
|
|
1372
1557
|
}
|
|
1373
1558
|
/*工具方法*/
|
|
1559
|
+
|
|
1374
1560
|
}, {
|
|
1375
1561
|
key: "vtxRangingTool",
|
|
1376
1562
|
value: function vtxRangingTool() {
|
|
@@ -1422,8 +1608,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1422
1608
|
t.createMeasureTooltip();
|
|
1423
1609
|
t.createDeleteTooltip();
|
|
1424
1610
|
t.state.gis.addLayer(t.rangingInfo.drawLayer);
|
|
1425
|
-
t.state.gis.addInteraction(t.rangingInfo.draw);
|
|
1426
|
-
|
|
1611
|
+
t.state.gis.addInteraction(t.rangingInfo.draw); // 开始监听绘制
|
|
1612
|
+
|
|
1427
1613
|
t.rangingInfo.draw.on('drawstart', function (evt) {
|
|
1428
1614
|
t.rangingInfo.feature = evt.feature;
|
|
1429
1615
|
var tooltipCoord = evt.coordinate;
|
|
@@ -1442,29 +1628,32 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1442
1628
|
t.rangingInfo.deleteToolTip.setPosition(tooltipCoord);
|
|
1443
1629
|
t.rangingInfo.deleteToolTip.setOffset([20, 10]);
|
|
1444
1630
|
});
|
|
1445
|
-
});
|
|
1446
|
-
|
|
1631
|
+
}); // 双击绘制完成
|
|
1632
|
+
|
|
1447
1633
|
t.rangingInfo.draw.on('drawend', function () {
|
|
1448
1634
|
t.rangingInfo.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
|
|
1449
1635
|
t.rangingInfo.measureTooltip.setOffset([0, -7]);
|
|
1450
1636
|
t.rangingInfo.feature = null;
|
|
1451
|
-
t.rangingInfo.measureTooltipElement = null;
|
|
1452
|
-
|
|
1637
|
+
t.rangingInfo.measureTooltipElement = null; // t.createMeasureTooltip();
|
|
1638
|
+
|
|
1453
1639
|
new ol.Observable.unByKey(t.rangingInfo.listener);
|
|
1454
1640
|
t.state.gis.removeInteraction(t.rangingInfo.draw);
|
|
1641
|
+
|
|
1455
1642
|
if ('mapRangingTool' in t.props) {
|
|
1456
1643
|
t.props.mapRangingTool(obj);
|
|
1457
1644
|
}
|
|
1458
1645
|
});
|
|
1459
|
-
}
|
|
1460
|
-
|
|
1646
|
+
} // 绘图时创建提示
|
|
1647
|
+
|
|
1461
1648
|
}, {
|
|
1462
1649
|
key: "createHelpTooltip",
|
|
1463
1650
|
value: function createHelpTooltip() {
|
|
1464
1651
|
var t = this;
|
|
1652
|
+
|
|
1465
1653
|
if (t.rangingTool.helpTooltipElement) {
|
|
1466
1654
|
t.rangingTool.helpTooltipElement.parentNode.removeChild(t.rangingTool.helpTooltipElement);
|
|
1467
1655
|
}
|
|
1656
|
+
|
|
1468
1657
|
t.rangingTool.helpTooltipElement = document.createElement('div');
|
|
1469
1658
|
t.rangingTool.helpTooltipElement.className = 'ol-tooltip hidden';
|
|
1470
1659
|
t.rangingTool.helpTooltip = new ol.Overlay({
|
|
@@ -1473,15 +1662,17 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1473
1662
|
positioning: 'center-left'
|
|
1474
1663
|
});
|
|
1475
1664
|
t.state.gis.addOverlay(t.rangingTool.helpTooltip);
|
|
1476
|
-
}
|
|
1477
|
-
|
|
1665
|
+
} // 工具画图提示
|
|
1666
|
+
|
|
1478
1667
|
}, {
|
|
1479
1668
|
key: "createMeasureTooltip",
|
|
1480
1669
|
value: function createMeasureTooltip() {
|
|
1481
1670
|
var t = this;
|
|
1671
|
+
|
|
1482
1672
|
if (t.rangingInfo.measureTooltipElement) {
|
|
1483
1673
|
t.rangingInfo.measureTooltipElement.parentNode.removeChild(t.rangingInfo.measureTooltipElement);
|
|
1484
1674
|
}
|
|
1675
|
+
|
|
1485
1676
|
t.rangingInfo.measureTooltipElement = document.createElement('div');
|
|
1486
1677
|
t.rangingInfo.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
|
|
1487
1678
|
t.rangingInfo.measureTooltip = new ol.Overlay({
|
|
@@ -1492,15 +1683,17 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1492
1683
|
insertFirst: false
|
|
1493
1684
|
});
|
|
1494
1685
|
t.state.gis.addOverlay(t.rangingInfo.measureTooltip);
|
|
1495
|
-
}
|
|
1496
|
-
|
|
1686
|
+
} // 创建删除提示
|
|
1687
|
+
|
|
1497
1688
|
}, {
|
|
1498
1689
|
key: "createDeleteTooltip",
|
|
1499
1690
|
value: function createDeleteTooltip() {
|
|
1500
1691
|
var t = this;
|
|
1692
|
+
|
|
1501
1693
|
if (t.rangingInfo.deleteToolTipElement) {
|
|
1502
1694
|
t.rangingInfo.deleteToolTipElement.parentNode.removeChild(t.rangingInfo.deleteToolTipElement);
|
|
1503
1695
|
}
|
|
1696
|
+
|
|
1504
1697
|
t.rangingInfo.deleteToolTipElement = document.createElement('div');
|
|
1505
1698
|
t.rangingInfo.deleteToolTipElement.className = 'ol-tooltip-delete';
|
|
1506
1699
|
t.rangingInfo.deleteToolTipElement.innerHTML = 'X';
|
|
@@ -1527,12 +1720,14 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1527
1720
|
}, {
|
|
1528
1721
|
key: "formatLength",
|
|
1529
1722
|
value: function formatLength(line) {
|
|
1530
|
-
var flatCoordinates = line.flatCoordinates;
|
|
1531
|
-
|
|
1723
|
+
var flatCoordinates = line.flatCoordinates; // const length = new ol.sphere.getDistance([flatCoordinates[0], flatCoordinates[1]],[flatCoordinates[2], flatCoordinates[3]]);
|
|
1724
|
+
|
|
1532
1725
|
var paths = [];
|
|
1726
|
+
|
|
1533
1727
|
for (var n = 0; n < flatCoordinates.length; n += 2) {
|
|
1534
1728
|
paths.push([flatCoordinates[n], flatCoordinates[n + 1]]);
|
|
1535
1729
|
}
|
|
1730
|
+
|
|
1536
1731
|
var length = 0;
|
|
1537
1732
|
if (paths.length >= 2) paths.map(function (item, index) {
|
|
1538
1733
|
if (index <= paths.length - 2) {
|
|
@@ -1540,21 +1735,23 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1540
1735
|
}
|
|
1541
1736
|
});
|
|
1542
1737
|
var output = '';
|
|
1738
|
+
|
|
1543
1739
|
if (length > 100) {
|
|
1544
1740
|
output = Math.round(length / 1000 * 100) / 100 + ' ' + 'km';
|
|
1545
1741
|
} else {
|
|
1546
1742
|
output = Math.round(length * 100) / 100 + ' ' + 'm';
|
|
1547
1743
|
}
|
|
1744
|
+
|
|
1548
1745
|
return output;
|
|
1549
1746
|
}
|
|
1550
1747
|
}, {
|
|
1551
1748
|
key: "getMapExtent",
|
|
1552
|
-
value:
|
|
1553
|
-
// 获取地图的当前位置状态信息
|
|
1749
|
+
value: // 获取地图的当前位置状态信息
|
|
1554
1750
|
function getMapExtent() {
|
|
1555
1751
|
var t = this;
|
|
1556
1752
|
var gis = t.state.gis;
|
|
1557
1753
|
var obj = {};
|
|
1754
|
+
|
|
1558
1755
|
if (gis) {
|
|
1559
1756
|
var nowBounds = gis.getView().calculateExtent(gis.getSize());
|
|
1560
1757
|
obj.southWest = {
|
|
@@ -1567,10 +1764,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1567
1764
|
};
|
|
1568
1765
|
obj.nowCenter = t.getCenter();
|
|
1569
1766
|
obj.zoom = t.getZoomLevel();
|
|
1767
|
+
|
|
1570
1768
|
var _gis$getSize = gis.getSize(),
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1769
|
+
_gis$getSize2 = _slicedToArray(_gis$getSize, 2),
|
|
1770
|
+
width = _gis$getSize2[0],
|
|
1771
|
+
height = _gis$getSize2[1];
|
|
1772
|
+
|
|
1574
1773
|
obj.mapSize = {
|
|
1575
1774
|
width: width,
|
|
1576
1775
|
height: height
|
|
@@ -1578,13 +1777,14 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1578
1777
|
obj.radius = ol.sphere.getDistance([obj.nowCenter.lng, obj.nowCenter.lat], [obj.northEast.lng, obj.northEast.lat]);
|
|
1579
1778
|
return obj;
|
|
1580
1779
|
}
|
|
1581
|
-
}
|
|
1582
|
-
|
|
1780
|
+
} //将制定图元展示在视野内 (强制改变地图中心位置)
|
|
1781
|
+
|
|
1583
1782
|
/*
|
|
1584
1783
|
参数arg格式如下1,2
|
|
1585
1784
|
1.string 格式如:'1,a,2,3,4'
|
|
1586
1785
|
2.数组 ['1','2']
|
|
1587
1786
|
*/
|
|
1787
|
+
|
|
1588
1788
|
}, {
|
|
1589
1789
|
key: "setVisiblePoints",
|
|
1590
1790
|
value: function setVisiblePoints(mapVisiblePoints) {
|
|
@@ -1593,50 +1793,64 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1593
1793
|
var arg = null;
|
|
1594
1794
|
var type = mapVisiblePoints.type;
|
|
1595
1795
|
var ary = []; //图元id集合
|
|
1796
|
+
|
|
1596
1797
|
var obj = []; //经纬度集合
|
|
1798
|
+
|
|
1597
1799
|
switch (mapVisiblePoints.fitView) {
|
|
1598
1800
|
case 'point':
|
|
1599
1801
|
arg = this.state.pointIds;
|
|
1600
1802
|
break;
|
|
1803
|
+
|
|
1601
1804
|
case 'line':
|
|
1602
1805
|
arg = this.state.lineIds;
|
|
1603
1806
|
break;
|
|
1807
|
+
|
|
1604
1808
|
case 'polygon':
|
|
1605
1809
|
arg = this.state.polygonIds;
|
|
1606
1810
|
break;
|
|
1811
|
+
|
|
1607
1812
|
case 'circle':
|
|
1608
1813
|
arg = this.state.circleIds;
|
|
1609
1814
|
break;
|
|
1815
|
+
|
|
1610
1816
|
case 'all':
|
|
1611
1817
|
arg = this.state.pointIds.concat(this.state.lineIds).concat(this.state.polygonIds).concat(this.state.circleIds);
|
|
1612
1818
|
break;
|
|
1819
|
+
|
|
1613
1820
|
default:
|
|
1614
1821
|
arg = mapVisiblePoints.fitView;
|
|
1615
1822
|
break;
|
|
1616
1823
|
}
|
|
1824
|
+
|
|
1617
1825
|
if (typeof arg === 'string') {
|
|
1618
1826
|
ary = arg.split(',');
|
|
1619
1827
|
} else if (arg instanceof Array) {
|
|
1620
1828
|
ary = arg;
|
|
1621
1829
|
}
|
|
1830
|
+
|
|
1622
1831
|
for (var i = 0; i < ary.length; i++) {
|
|
1623
1832
|
var g = t.GM.getGraphicParam(ary[i]);
|
|
1833
|
+
|
|
1624
1834
|
if (g) {
|
|
1625
1835
|
switch (g.geometry.type) {
|
|
1626
1836
|
case 'point':
|
|
1627
1837
|
obj.push([g.geometry.x, g.geometry.y]);
|
|
1838
|
+
|
|
1628
1839
|
case 'circle':
|
|
1629
1840
|
obj.push([g.geometry.x, g.geometry.y]);
|
|
1630
1841
|
break;
|
|
1842
|
+
|
|
1631
1843
|
case 'polyline':
|
|
1632
1844
|
obj = [].concat(_toConsumableArray(obj), _toConsumableArray(g.geometry.paths));
|
|
1633
1845
|
break;
|
|
1846
|
+
|
|
1634
1847
|
case 'polygon':
|
|
1635
1848
|
obj = [].concat(_toConsumableArray(obj), _toConsumableArray(g.geometry.rings));
|
|
1636
1849
|
break;
|
|
1637
1850
|
}
|
|
1638
1851
|
}
|
|
1639
1852
|
}
|
|
1853
|
+
|
|
1640
1854
|
if (obj.length > 0) {
|
|
1641
1855
|
var displayRange = new ol.extent.boundingExtent(obj);
|
|
1642
1856
|
gis.getView().fit(displayRange, gis.getSize());
|
|
@@ -1646,14 +1860,17 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1646
1860
|
key: "getFitView",
|
|
1647
1861
|
value: function getFitView(ids) {
|
|
1648
1862
|
var t = this;
|
|
1863
|
+
|
|
1649
1864
|
if (ids.length > 0) {
|
|
1650
1865
|
var maxX = null,
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1866
|
+
maxY = null,
|
|
1867
|
+
minX = null,
|
|
1868
|
+
minY = null;
|
|
1869
|
+
|
|
1654
1870
|
for (var i = 0; i < ids.length; i++) {
|
|
1655
1871
|
var coord = t.GM.getGraphic(ids[i]);
|
|
1656
1872
|
var boundsArry = coord.getGeometry().getExtent();
|
|
1873
|
+
|
|
1657
1874
|
if (minX === null) {
|
|
1658
1875
|
minX = boundsArry[0];
|
|
1659
1876
|
minY = boundsArry[1];
|
|
@@ -1666,12 +1883,14 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1666
1883
|
maxY = Math.max(boundsArry[3], maxY);
|
|
1667
1884
|
}
|
|
1668
1885
|
}
|
|
1886
|
+
|
|
1669
1887
|
var bounds = [minX, minY, maxX, maxY];
|
|
1670
1888
|
return bounds;
|
|
1671
1889
|
}
|
|
1672
1890
|
}
|
|
1673
1891
|
/*功能方法*/
|
|
1674
1892
|
//获取当前地图的中心位置
|
|
1893
|
+
|
|
1675
1894
|
}, {
|
|
1676
1895
|
key: "getCurrentCenter",
|
|
1677
1896
|
value: function getCurrentCenter() {
|
|
@@ -1679,31 +1898,36 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1679
1898
|
var gis = t.state.gis;
|
|
1680
1899
|
var extent = gis.getView().calculateExtent(gis.getSize());
|
|
1681
1900
|
return [(extent[0] + extent[2]) / 2, (extent[1] + extent[3]) / 2];
|
|
1682
|
-
}
|
|
1683
|
-
|
|
1901
|
+
} //获取当前比例尺
|
|
1902
|
+
|
|
1684
1903
|
}, {
|
|
1685
1904
|
key: "getZoomLevel",
|
|
1686
1905
|
value: function getZoomLevel() {
|
|
1687
1906
|
var t = this;
|
|
1688
1907
|
return t.state.gis.getView().getZoom();
|
|
1689
|
-
}
|
|
1690
|
-
|
|
1908
|
+
} //获取图元数据
|
|
1909
|
+
|
|
1691
1910
|
}, {
|
|
1692
1911
|
key: "getGraphic",
|
|
1693
1912
|
value: function getGraphic(id) {
|
|
1694
1913
|
var t = this;
|
|
1914
|
+
|
|
1695
1915
|
if (!id) {
|
|
1696
1916
|
return false;
|
|
1697
1917
|
}
|
|
1918
|
+
|
|
1698
1919
|
var gp = t.GM.getGraphicParam(id);
|
|
1699
1920
|
var gg = t.GM.getGraphic(id);
|
|
1921
|
+
|
|
1700
1922
|
if (!gg) {
|
|
1701
1923
|
return false;
|
|
1702
1924
|
}
|
|
1925
|
+
|
|
1703
1926
|
var p = {},
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
|
|
1927
|
+
pts = [],
|
|
1928
|
+
lng = 0,
|
|
1929
|
+
lat = 0;
|
|
1930
|
+
|
|
1707
1931
|
switch (gp.geometryType) {
|
|
1708
1932
|
case 'point':
|
|
1709
1933
|
lng = gp.geometry.x;
|
|
@@ -1724,6 +1948,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1724
1948
|
})
|
|
1725
1949
|
});
|
|
1726
1950
|
break;
|
|
1951
|
+
|
|
1727
1952
|
case 'polyline':
|
|
1728
1953
|
pts = gp.geometry.paths;
|
|
1729
1954
|
p = _objectSpread(_objectSpread({}, gp), {}, {
|
|
@@ -1739,6 +1964,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1739
1964
|
})
|
|
1740
1965
|
});
|
|
1741
1966
|
break;
|
|
1967
|
+
|
|
1742
1968
|
case 'polygon':
|
|
1743
1969
|
pts = gp.geometry.rings;
|
|
1744
1970
|
p = _objectSpread(_objectSpread({}, gp), {}, {
|
|
@@ -1755,6 +1981,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1755
1981
|
area: (0, _MapToolFunction.getPolygonArea)(pts)
|
|
1756
1982
|
});
|
|
1757
1983
|
break;
|
|
1984
|
+
|
|
1758
1985
|
case 'circle':
|
|
1759
1986
|
lng = gp.geometry.x;
|
|
1760
1987
|
lat = gp.geometry.y;
|
|
@@ -1779,17 +2006,18 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1779
2006
|
});
|
|
1780
2007
|
break;
|
|
1781
2008
|
}
|
|
2009
|
+
|
|
1782
2010
|
return p;
|
|
1783
|
-
}
|
|
1784
|
-
|
|
2011
|
+
} // 转换dom节点
|
|
2012
|
+
|
|
1785
2013
|
}, {
|
|
1786
2014
|
key: "parseDom",
|
|
1787
2015
|
value: function parseDom(domStr) {
|
|
1788
2016
|
var domObj = document.createElement('div');
|
|
1789
2017
|
domObj.innerHTML = domStr;
|
|
1790
2018
|
return domObj.childNodes;
|
|
1791
|
-
}
|
|
1792
|
-
|
|
2019
|
+
} //添加海量点
|
|
2020
|
+
|
|
1793
2021
|
}, {
|
|
1794
2022
|
key: "addPointCollection",
|
|
1795
2023
|
value: function addPointCollection() {
|
|
@@ -1801,10 +2029,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1801
2029
|
var p = t.state.gis.getPixelFromCoordinate([d.lng, d.lat]);
|
|
1802
2030
|
return [p[0], p[1]];
|
|
1803
2031
|
});
|
|
2032
|
+
|
|
1804
2033
|
var _t$state$gis$getSize = t.state.gis.getSize(),
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
2034
|
+
_t$state$gis$getSize2 = _slicedToArray(_t$state$gis$getSize, 2),
|
|
2035
|
+
width = _t$state$gis$getSize2[0],
|
|
2036
|
+
height = _t$state$gis$getSize2[1];
|
|
2037
|
+
|
|
1808
2038
|
var options = {
|
|
1809
2039
|
size: d.size,
|
|
1810
2040
|
shape: d.shape,
|
|
@@ -1820,8 +2050,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1820
2050
|
});
|
|
1821
2051
|
VotexpointCollection.draw();
|
|
1822
2052
|
});
|
|
1823
|
-
}
|
|
1824
|
-
|
|
2053
|
+
} //更新海量点
|
|
2054
|
+
|
|
1825
2055
|
}, {
|
|
1826
2056
|
key: "updatePointCollection",
|
|
1827
2057
|
value: function updatePointCollection() {
|
|
@@ -1834,10 +2064,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1834
2064
|
var p = t.state.gis.getPixelFromCoordinate([d.lng, d.lat]);
|
|
1835
2065
|
return [p[0], p[1]];
|
|
1836
2066
|
});
|
|
2067
|
+
|
|
1837
2068
|
var _t$state$gis$getSize3 = t.state.gis.getSize(),
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
2069
|
+
_t$state$gis$getSize4 = _slicedToArray(_t$state$gis$getSize3, 2),
|
|
2070
|
+
width = _t$state$gis$getSize4[0],
|
|
2071
|
+
height = _t$state$gis$getSize4[1];
|
|
2072
|
+
|
|
1841
2073
|
var options = {
|
|
1842
2074
|
size: ds.size,
|
|
1843
2075
|
shape: ds.shape,
|
|
@@ -1849,8 +2081,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1849
2081
|
}
|
|
1850
2082
|
});
|
|
1851
2083
|
});
|
|
1852
|
-
}
|
|
1853
|
-
|
|
2084
|
+
} //删除海量点
|
|
2085
|
+
|
|
1854
2086
|
}, {
|
|
1855
2087
|
key: "clearPointCollection",
|
|
1856
2088
|
value: function clearPointCollection() {
|
|
@@ -1863,9 +2095,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1863
2095
|
}
|
|
1864
2096
|
});
|
|
1865
2097
|
});
|
|
1866
|
-
}
|
|
2098
|
+
} //删除全部海量点
|
|
1867
2099
|
|
|
1868
|
-
//删除全部海量点
|
|
1869
2100
|
}, {
|
|
1870
2101
|
key: "clearAllPointCollection",
|
|
1871
2102
|
value: function clearAllPointCollection() {
|
|
@@ -1873,24 +2104,26 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1873
2104
|
t.morepoints.map(function (item, index) {
|
|
1874
2105
|
item.value.clear();
|
|
1875
2106
|
});
|
|
1876
|
-
}
|
|
1877
|
-
|
|
2107
|
+
} // 框选
|
|
2108
|
+
|
|
1878
2109
|
}, {
|
|
1879
2110
|
key: "frameSelect",
|
|
1880
2111
|
value: function frameSelect(_ref2, callback) {
|
|
1881
2112
|
var geometryType = _ref2.geometryType,
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
2113
|
+
_ref2$parameter = _ref2.parameter,
|
|
2114
|
+
parameter = _ref2$parameter === void 0 ? {} : _ref2$parameter,
|
|
2115
|
+
_ref2$data = _ref2.data,
|
|
2116
|
+
data = _ref2$data === void 0 ? {} : _ref2$data;
|
|
2117
|
+
|
|
1886
2118
|
if (!['polygon', 'circle', 'rectangle'].includes(geometryType)) {
|
|
1887
2119
|
message.warn("传入的类型不支持框选!");
|
|
1888
2120
|
return false;
|
|
1889
2121
|
}
|
|
2122
|
+
|
|
1890
2123
|
var t = this;
|
|
1891
2124
|
var params = {},
|
|
1892
|
-
|
|
1893
|
-
|
|
2125
|
+
type = geometryType || 'polygon',
|
|
2126
|
+
id = data.id || "frameSelectFeature_".concat(Math.random());
|
|
1894
2127
|
params.color = parameter.color || '#FF0000';
|
|
1895
2128
|
params.lineColor = parameter.lineColor || '#FF0000';
|
|
1896
2129
|
params.lineOpacity = parameter.lineOpacity || 1;
|
|
@@ -1909,17 +2142,18 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1909
2142
|
id: id,
|
|
1910
2143
|
type: geometryType
|
|
1911
2144
|
};
|
|
1912
|
-
}
|
|
1913
|
-
|
|
2145
|
+
} // 清除框选
|
|
2146
|
+
|
|
1914
2147
|
}, {
|
|
1915
2148
|
key: "clearFrameSelect",
|
|
1916
2149
|
value: function clearFrameSelect() {
|
|
1917
2150
|
for (var key in this.frameSelectProps) {
|
|
1918
2151
|
this.removeGraphic(this.frameSelectProps[key].id, this.frameSelectProps[key].type);
|
|
1919
2152
|
}
|
|
2153
|
+
|
|
1920
2154
|
this.frameSelectProps = {};
|
|
1921
|
-
}
|
|
1922
|
-
|
|
2155
|
+
} // 清除框选ById
|
|
2156
|
+
|
|
1923
2157
|
}, {
|
|
1924
2158
|
key: "clearFrameSelectById",
|
|
1925
2159
|
value: function clearFrameSelectById(id) {
|
|
@@ -1934,14 +2168,17 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1934
2168
|
* @content: String|HTML
|
|
1935
2169
|
* @close: boolean
|
|
1936
2170
|
*/
|
|
2171
|
+
|
|
1937
2172
|
}, {
|
|
1938
2173
|
key: "showInfoWindow",
|
|
1939
2174
|
value: function showInfoWindow() {
|
|
1940
2175
|
var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1941
2176
|
var t = this;
|
|
2177
|
+
|
|
1942
2178
|
if (t.popupWindow) {
|
|
1943
2179
|
t.hideInfoWindow();
|
|
1944
2180
|
}
|
|
2181
|
+
|
|
1945
2182
|
t.popupWindow = new Popup({
|
|
1946
2183
|
map: t.state.gis,
|
|
1947
2184
|
position: params.position,
|
|
@@ -1954,31 +2191,38 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1954
2191
|
key: "hideInfoWindow",
|
|
1955
2192
|
value: function hideInfoWindow() {
|
|
1956
2193
|
var t = this;
|
|
2194
|
+
|
|
1957
2195
|
if (t.popupWindow) {
|
|
1958
2196
|
t.popupWindow.removePopup();
|
|
1959
2197
|
}
|
|
2198
|
+
|
|
1960
2199
|
t.popupWindow = null;
|
|
1961
|
-
}
|
|
1962
|
-
|
|
2200
|
+
} // 添加点
|
|
2201
|
+
|
|
1963
2202
|
}, {
|
|
1964
2203
|
key: "addPoint",
|
|
1965
2204
|
value: function addPoint(mapPoints, type) {
|
|
1966
|
-
var
|
|
2205
|
+
var _this3 = this;
|
|
2206
|
+
|
|
1967
2207
|
var t = this;
|
|
1968
2208
|
var ps = [];
|
|
2209
|
+
|
|
1969
2210
|
var psids = _toConsumableArray(t.state.pointIds);
|
|
2211
|
+
|
|
1970
2212
|
mapPoints.map(function (item, index) {
|
|
1971
2213
|
//如果id重复,直接跳过不执行.
|
|
1972
|
-
if (
|
|
2214
|
+
if (_this3.GM.isRepetition(item.id)) {
|
|
1973
2215
|
console.warn("\u52A0\u70B9id: ".concat(item.id, " \u91CD\u590D"));
|
|
1974
2216
|
return false;
|
|
1975
|
-
}
|
|
1976
|
-
|
|
2217
|
+
} //点位数据不符合,直接跳过
|
|
2218
|
+
|
|
2219
|
+
|
|
1977
2220
|
if (!item.longitude || !item.latitude) {
|
|
1978
2221
|
console.warn("\u70B9 \u7ECF\u7EAC\u5EA6 \u6570\u636E\u9519\u8BEF");
|
|
1979
2222
|
return false;
|
|
1980
|
-
}
|
|
1981
|
-
|
|
2223
|
+
} // 创建点位图元要素
|
|
2224
|
+
|
|
2225
|
+
|
|
1982
2226
|
var feature = new ol.Feature({
|
|
1983
2227
|
geometry: new ol.geom.Point([parseFloat(item.longitude), parseFloat(item.latitude)]),
|
|
1984
2228
|
name: item.name,
|
|
@@ -1996,23 +2240,25 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
1996
2240
|
zIndex: 100,
|
|
1997
2241
|
deg: 0,
|
|
1998
2242
|
scale: 1
|
|
1999
|
-
};
|
|
2000
|
-
|
|
2243
|
+
}; //初始化默认数据
|
|
2244
|
+
|
|
2001
2245
|
if (item.config) {
|
|
2002
2246
|
cg = _objectSpread(_objectSpread({}, cg), item.config);
|
|
2003
|
-
}
|
|
2004
|
-
|
|
2247
|
+
} // 覆盖物样式参数
|
|
2248
|
+
|
|
2249
|
+
|
|
2005
2250
|
var style, icon, txt;
|
|
2006
2251
|
var myImage = new Image(cg.width, cg.height);
|
|
2252
|
+
|
|
2007
2253
|
if (!!item.markerContent) {
|
|
2008
|
-
var nodes = t.parseDom(item.markerContent)[0];
|
|
2009
|
-
|
|
2254
|
+
var nodes = t.parseDom(item.markerContent)[0]; // 自定义图层需要把事件加在dom上
|
|
2255
|
+
|
|
2010
2256
|
nodes.addEventListener("click", function (e) {
|
|
2011
2257
|
t.clickGraphic(item.id, _objectSpread(_objectSpread({}, e), {}, {
|
|
2012
2258
|
pixel: [e.clientX, e.clientY]
|
|
2013
2259
|
}));
|
|
2014
|
-
});
|
|
2015
|
-
|
|
2260
|
+
}); // 创建地图自定义覆盖物
|
|
2261
|
+
|
|
2016
2262
|
var pop = new ol.Overlay({
|
|
2017
2263
|
id: item.id,
|
|
2018
2264
|
position: [parseFloat(item.longitude), parseFloat(item.latitude)],
|
|
@@ -2031,8 +2277,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2031
2277
|
height: cg.height
|
|
2032
2278
|
}, function (base64) {
|
|
2033
2279
|
myImage.src = base64;
|
|
2034
|
-
});
|
|
2035
|
-
|
|
2280
|
+
}); // 创建地图要素图标样式
|
|
2281
|
+
|
|
2036
2282
|
style = new ol.style.Style({
|
|
2037
2283
|
image: new ol.style.Icon({
|
|
2038
2284
|
anchor: [-cg.markerContentX, -cg.markerContentY],
|
|
@@ -2045,6 +2291,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2045
2291
|
})
|
|
2046
2292
|
});
|
|
2047
2293
|
}
|
|
2294
|
+
|
|
2048
2295
|
if (!!item.canShowLabel && item.canShowLabel) {
|
|
2049
2296
|
var textStyle = _objectSpread({
|
|
2050
2297
|
textAlign: 'center',
|
|
@@ -2069,17 +2316,20 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2069
2316
|
}),
|
|
2070
2317
|
padding: [2, 5, 2, 5]
|
|
2071
2318
|
}, cg.labelStyle || {});
|
|
2319
|
+
|
|
2072
2320
|
if (cg.labelStyle && cg.labelStyle.fill) {
|
|
2073
2321
|
textStyle['fill'] = new ol.style.Fill({
|
|
2074
2322
|
color: cg.labelStyle.fill
|
|
2075
2323
|
});
|
|
2076
2324
|
}
|
|
2325
|
+
|
|
2077
2326
|
if (cg.labelStyle && cg.labelStyle.backgroundFill) {
|
|
2078
2327
|
textStyle['backgroundFill'] = new ol.style.Fill({
|
|
2079
2328
|
color: cg.labelStyle.backgroundFill
|
|
2080
2329
|
});
|
|
2081
|
-
}
|
|
2082
|
-
|
|
2330
|
+
} // 创建地图要素图标样式
|
|
2331
|
+
|
|
2332
|
+
|
|
2083
2333
|
style = new ol.style.Style({
|
|
2084
2334
|
image: new ol.style.Icon({
|
|
2085
2335
|
anchor: [-cg.markerContentX, -cg.markerContentY],
|
|
@@ -2095,8 +2345,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2095
2345
|
text: new ol.style.Text(textStyle)
|
|
2096
2346
|
});
|
|
2097
2347
|
}
|
|
2098
|
-
|
|
2099
|
-
// 初始化适量数据源
|
|
2348
|
+
|
|
2349
|
+
feature.setStyle(style); // 初始化适量数据源
|
|
2350
|
+
|
|
2100
2351
|
var source = new ol.source.Vector({
|
|
2101
2352
|
features: [feature],
|
|
2102
2353
|
name: 'point',
|
|
@@ -2110,17 +2361,19 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2110
2361
|
t.pointLayers.push({
|
|
2111
2362
|
id: item.id,
|
|
2112
2363
|
layer: pointLayer
|
|
2113
|
-
});
|
|
2114
|
-
|
|
2364
|
+
}); //添加点位图层
|
|
2365
|
+
|
|
2115
2366
|
t.state.gis.addLayer(pointLayer);
|
|
2367
|
+
|
|
2116
2368
|
if (!item.markerContent && cg.BAnimationType == 0) {
|
|
2117
2369
|
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
|
|
2118
2370
|
} else if (!item.markerContent && cg.BAnimationType == 1) {
|
|
2119
2371
|
marker.setAnimation(BMAP_ANIMATION_DROP);
|
|
2120
2372
|
}
|
|
2121
|
-
|
|
2122
|
-
//缓存图元的数据,偏于后期操作
|
|
2123
|
-
|
|
2373
|
+
|
|
2374
|
+
psids.push(item.id); //缓存图元的数据,偏于后期操作
|
|
2375
|
+
|
|
2376
|
+
_this3.GM.setGraphic(item.id, feature).setGraphicParam(item.id, {
|
|
2124
2377
|
attributes: _objectSpread(_objectSpread({}, item), {}, {
|
|
2125
2378
|
other: item
|
|
2126
2379
|
}),
|
|
@@ -2133,28 +2386,32 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2133
2386
|
source: source
|
|
2134
2387
|
});
|
|
2135
2388
|
});
|
|
2389
|
+
|
|
2136
2390
|
if (type !== 'defined') {
|
|
2137
2391
|
// t.state.pointIds = psids;
|
|
2138
2392
|
t.setState({
|
|
2139
2393
|
pointIds: psids
|
|
2140
2394
|
});
|
|
2141
2395
|
}
|
|
2142
|
-
}
|
|
2143
|
-
|
|
2396
|
+
} //更新点
|
|
2397
|
+
|
|
2144
2398
|
}, {
|
|
2145
2399
|
key: "updatePoint",
|
|
2146
2400
|
value: function updatePoint() {
|
|
2147
|
-
var
|
|
2401
|
+
var _this4 = this;
|
|
2402
|
+
|
|
2148
2403
|
var mapPoints = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
2149
2404
|
var t = this;
|
|
2150
2405
|
var index = 0;
|
|
2406
|
+
|
|
2151
2407
|
var dealPoint = function dealPoint(item) {
|
|
2152
|
-
if (
|
|
2408
|
+
if (_this4.GM.isRepetition(item.id)) {
|
|
2153
2409
|
//点位数据不符合,直接跳过
|
|
2154
2410
|
if (!item.longitude || !item.latitude) {
|
|
2155
2411
|
console.warn("\u70B9 \u7ECF\u7EAC\u5EA6 \u6570\u636E\u9519\u8BEF");
|
|
2156
2412
|
return false;
|
|
2157
2413
|
}
|
|
2414
|
+
|
|
2158
2415
|
var gc = t.GM.getGraphic(item.id);
|
|
2159
2416
|
var gp = t.GM.getGraphicParam(item.id);
|
|
2160
2417
|
var cg = {
|
|
@@ -2169,11 +2426,15 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2169
2426
|
markerContentY: -30,
|
|
2170
2427
|
deg: 0
|
|
2171
2428
|
};
|
|
2429
|
+
|
|
2172
2430
|
if (item.config) {
|
|
2173
2431
|
cg = _objectSpread(_objectSpread({}, cg), item.config);
|
|
2174
2432
|
}
|
|
2433
|
+
|
|
2175
2434
|
var text, icon, _marker;
|
|
2435
|
+
|
|
2176
2436
|
var myImage = new Image(cg.width, cg.height);
|
|
2437
|
+
|
|
2177
2438
|
if (item.markerContent) {
|
|
2178
2439
|
var overlay = t.state.gis.getOverlayById(item.id);
|
|
2179
2440
|
var nodes = t.parseDom(item.markerContent)[0];
|
|
@@ -2203,6 +2464,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2203
2464
|
scale: cg.scale || 1,
|
|
2204
2465
|
rotation: Math.PI / 180 * cg.deg
|
|
2205
2466
|
});
|
|
2467
|
+
|
|
2206
2468
|
if (item.canShowLabel) {
|
|
2207
2469
|
var textStyle = _objectSpread({
|
|
2208
2470
|
textAlign: 'center',
|
|
@@ -2227,18 +2489,22 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2227
2489
|
}),
|
|
2228
2490
|
padding: [2, 5, 2, 5]
|
|
2229
2491
|
}, cg.labelStyle || {});
|
|
2492
|
+
|
|
2230
2493
|
if (cg.labelStyle && cg.labelStyle.fill) {
|
|
2231
2494
|
textStyle['fill'] = new ol.style.Fill({
|
|
2232
2495
|
color: cg.labelStyle.fill
|
|
2233
2496
|
});
|
|
2234
2497
|
}
|
|
2498
|
+
|
|
2235
2499
|
if (cg.labelStyle && cg.labelStyle.backgroundFill) {
|
|
2236
2500
|
textStyle['backgroundFill'] = new ol.style.Fill({
|
|
2237
2501
|
color: cg.labelStyle.backgroundFill
|
|
2238
2502
|
});
|
|
2239
2503
|
}
|
|
2504
|
+
|
|
2240
2505
|
text = new ol.style.Text(textStyle);
|
|
2241
2506
|
}
|
|
2507
|
+
|
|
2242
2508
|
if (text) {
|
|
2243
2509
|
gc.setStyle(new ol.style.Style({
|
|
2244
2510
|
image: icon,
|
|
@@ -2250,8 +2516,10 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2250
2516
|
}));
|
|
2251
2517
|
}
|
|
2252
2518
|
}
|
|
2519
|
+
|
|
2253
2520
|
gc.setGeometry(new ol.geom.Point([parseFloat(item.longitude), parseFloat(item.latitude)]));
|
|
2254
|
-
|
|
2521
|
+
|
|
2522
|
+
_this4.GM.setGraphicParam(item.id, {
|
|
2255
2523
|
attributes: _objectSpread(_objectSpread({}, item), {}, {
|
|
2256
2524
|
other: item
|
|
2257
2525
|
}),
|
|
@@ -2267,6 +2535,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2267
2535
|
console.warn("\u66F4\u65B0\u7684\u70B9\u4F4Did\u4E0D\u5B58\u5728!");
|
|
2268
2536
|
return false;
|
|
2269
2537
|
}
|
|
2538
|
+
|
|
2270
2539
|
if (index < mapPoints.length - 1) {
|
|
2271
2540
|
requestIdleCallback(function () {
|
|
2272
2541
|
return dealPoint(mapPoints[++index]);
|
|
@@ -2275,13 +2544,14 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2275
2544
|
t.refresh();
|
|
2276
2545
|
}
|
|
2277
2546
|
};
|
|
2547
|
+
|
|
2278
2548
|
if (!(0, _lodash.isEmpty)(mapPoints)) {
|
|
2279
2549
|
requestIdleCallback(function () {
|
|
2280
2550
|
return dealPoint(mapPoints[index]);
|
|
2281
2551
|
});
|
|
2282
2552
|
}
|
|
2283
|
-
}
|
|
2284
|
-
|
|
2553
|
+
} // 更新图层
|
|
2554
|
+
|
|
2285
2555
|
}, {
|
|
2286
2556
|
key: "refresh",
|
|
2287
2557
|
value: function refresh() {
|
|
@@ -2290,27 +2560,32 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2290
2560
|
clearTimeout(timer);
|
|
2291
2561
|
window.VtxMap[t.props.mapId].redrawText();
|
|
2292
2562
|
}, 100);
|
|
2293
|
-
}
|
|
2294
|
-
|
|
2563
|
+
} // 添加先
|
|
2564
|
+
|
|
2295
2565
|
}, {
|
|
2296
2566
|
key: "addLine",
|
|
2297
2567
|
value: function addLine(mapLines, type) {
|
|
2298
|
-
var
|
|
2568
|
+
var _this5 = this;
|
|
2569
|
+
|
|
2299
2570
|
var t = this;
|
|
2300
2571
|
var ls = [];
|
|
2301
|
-
|
|
2302
|
-
//遍历添加线(图元)
|
|
2572
|
+
|
|
2573
|
+
var lsids = _toConsumableArray(t.state.lineIds); //遍历添加线(图元)
|
|
2574
|
+
|
|
2575
|
+
|
|
2303
2576
|
mapLines.map(function (item, index) {
|
|
2304
2577
|
//如果id重复,直接跳过不执行.
|
|
2305
|
-
if (
|
|
2578
|
+
if (_this5.GM.isRepetition(item.id)) {
|
|
2306
2579
|
console.warn("\u591A\u6298\u7EBFid: ".concat(item.id, " \u91CD\u590D"));
|
|
2307
2580
|
return false;
|
|
2308
|
-
}
|
|
2309
|
-
|
|
2581
|
+
} //多折线点位数据不符合,直接跳过
|
|
2582
|
+
|
|
2583
|
+
|
|
2310
2584
|
if (!(item.paths && item.paths.length >= 2)) {
|
|
2311
2585
|
console.warn("\u591A\u6298\u7EBFpaths\u6570\u636E\u9519\u8BEF");
|
|
2312
2586
|
return false;
|
|
2313
2587
|
}
|
|
2588
|
+
|
|
2314
2589
|
var cg = {
|
|
2315
2590
|
color: '#277ffa',
|
|
2316
2591
|
pellucidity: 0.9,
|
|
@@ -2318,9 +2593,11 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2318
2593
|
lineType: 'solid',
|
|
2319
2594
|
isHidden: false
|
|
2320
2595
|
};
|
|
2596
|
+
|
|
2321
2597
|
if (item.config) {
|
|
2322
2598
|
cg = _objectSpread(_objectSpread({}, cg), item.config);
|
|
2323
2599
|
}
|
|
2600
|
+
|
|
2324
2601
|
var style = new ol.style.Style({
|
|
2325
2602
|
stroke: new ol.style.Stroke({
|
|
2326
2603
|
color: cg.color,
|
|
@@ -2344,12 +2621,13 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2344
2621
|
id: item.id,
|
|
2345
2622
|
source: source
|
|
2346
2623
|
});
|
|
2347
|
-
t.state.gis.addLayer(lineLayer);
|
|
2348
|
-
|
|
2624
|
+
t.state.gis.addLayer(lineLayer); //缓存图元的数据,便于后期操作
|
|
2625
|
+
|
|
2349
2626
|
var pts = item.paths.map(function (itt, ind) {
|
|
2350
2627
|
return _toConsumableArray(itt);
|
|
2351
2628
|
});
|
|
2352
|
-
|
|
2629
|
+
|
|
2630
|
+
_this5.GM.setGraphic(item.id, polyline).setGraphicParam(item.id, {
|
|
2353
2631
|
attributes: _objectSpread(_objectSpread({}, item), {}, {
|
|
2354
2632
|
paths: pts,
|
|
2355
2633
|
other: item
|
|
@@ -2361,30 +2639,34 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2361
2639
|
},
|
|
2362
2640
|
source: source
|
|
2363
2641
|
});
|
|
2642
|
+
|
|
2364
2643
|
ls.push(polyline);
|
|
2365
2644
|
lsids.push(item.id);
|
|
2366
2645
|
t.state.lineIds.push(item.id);
|
|
2367
2646
|
});
|
|
2647
|
+
|
|
2368
2648
|
if (type !== 'defined') {
|
|
2369
2649
|
t.state.lineIds = lsids;
|
|
2370
2650
|
}
|
|
2371
|
-
}
|
|
2372
|
-
|
|
2651
|
+
} //更新线
|
|
2652
|
+
|
|
2373
2653
|
}, {
|
|
2374
2654
|
key: "updateLine",
|
|
2375
2655
|
value: function updateLine(mapLines) {
|
|
2376
|
-
var
|
|
2377
|
-
|
|
2378
|
-
//遍历添加线(图元)
|
|
2656
|
+
var _this6 = this;
|
|
2657
|
+
|
|
2658
|
+
var t = this; //遍历添加线(图元)
|
|
2659
|
+
|
|
2379
2660
|
mapLines.map(function (item, index) {
|
|
2380
2661
|
//判断图元是否存在.
|
|
2381
|
-
if (
|
|
2662
|
+
if (_this6.GM.isRepetition(item.id)) {
|
|
2382
2663
|
//多折线点位数据不符合,直接跳过
|
|
2383
2664
|
if (!(item.paths && item.paths.length >= 2)) {
|
|
2384
2665
|
console.warn("\u591A\u6298\u7EBFpaths\u6570\u636E\u9519\u8BEF");
|
|
2385
2666
|
return false;
|
|
2386
|
-
}
|
|
2387
|
-
|
|
2667
|
+
} //初始化默认参数
|
|
2668
|
+
|
|
2669
|
+
|
|
2388
2670
|
var cg = {
|
|
2389
2671
|
color: '#277ffa',
|
|
2390
2672
|
pellucidity: 0.9,
|
|
@@ -2392,14 +2674,17 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2392
2674
|
lineType: 'solid',
|
|
2393
2675
|
//'solid' 'dashed'
|
|
2394
2676
|
isHidden: false
|
|
2395
|
-
};
|
|
2396
|
-
|
|
2397
|
-
var gc =
|
|
2398
|
-
|
|
2399
|
-
//重新初始化值
|
|
2677
|
+
}; //获取原有的图元
|
|
2678
|
+
|
|
2679
|
+
var gc = _this6.GM.getGraphic(item.id);
|
|
2680
|
+
|
|
2681
|
+
var gp = _this6.GM.getGraphicParam(item.id); //重新初始化值
|
|
2682
|
+
|
|
2683
|
+
|
|
2400
2684
|
if (item.config) {
|
|
2401
2685
|
cg = _objectSpread(_objectSpread({}, cg), item.config);
|
|
2402
2686
|
}
|
|
2687
|
+
|
|
2403
2688
|
var pts = item.paths.map(function (itt, ind) {
|
|
2404
2689
|
return _toConsumableArray(itt);
|
|
2405
2690
|
});
|
|
@@ -2415,7 +2700,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2415
2700
|
return style;
|
|
2416
2701
|
});
|
|
2417
2702
|
gc.setGeometry(new ol.geom.LineString(pts));
|
|
2418
|
-
|
|
2703
|
+
|
|
2704
|
+
_this6.GM.setGraphicParam(item.id, {
|
|
2419
2705
|
attributes: _objectSpread(_objectSpread({}, item), {}, {
|
|
2420
2706
|
paths: pts,
|
|
2421
2707
|
other: item
|
|
@@ -2432,27 +2718,32 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2432
2718
|
return false;
|
|
2433
2719
|
}
|
|
2434
2720
|
});
|
|
2435
|
-
}
|
|
2436
|
-
|
|
2721
|
+
} //添加面
|
|
2722
|
+
|
|
2437
2723
|
}, {
|
|
2438
2724
|
key: "addPolygon",
|
|
2439
2725
|
value: function addPolygon(mapPolygons) {
|
|
2440
|
-
var
|
|
2726
|
+
var _this7 = this;
|
|
2727
|
+
|
|
2441
2728
|
var t = this;
|
|
2442
2729
|
var pgs = [];
|
|
2443
|
-
|
|
2444
|
-
//遍历添加面(图元)
|
|
2730
|
+
|
|
2731
|
+
var pgsids = _toConsumableArray(t.state.polygonIds); //遍历添加面(图元)
|
|
2732
|
+
|
|
2733
|
+
|
|
2445
2734
|
mapPolygons.map(function (item, index) {
|
|
2446
2735
|
//如果id重复,直接跳过不执行.
|
|
2447
|
-
if (
|
|
2736
|
+
if (_this7.GM.isRepetition(item.id)) {
|
|
2448
2737
|
console.warn("\u591A\u8FB9\u5F62id: ".concat(item.id, " \u91CD\u590D"));
|
|
2449
2738
|
return false;
|
|
2450
|
-
}
|
|
2451
|
-
|
|
2739
|
+
} //多边形点位数据不符合,直接跳过
|
|
2740
|
+
|
|
2741
|
+
|
|
2452
2742
|
if (!(item.rings && item.rings.length >= 3)) {
|
|
2453
2743
|
console.warn("\u591A\u8FB9\u5F62rings\u6570\u636E\u9519\u8BEF");
|
|
2454
2744
|
return false;
|
|
2455
2745
|
}
|
|
2746
|
+
|
|
2456
2747
|
var cg = {
|
|
2457
2748
|
lineType: 'solid',
|
|
2458
2749
|
lineWidth: 5,
|
|
@@ -2461,9 +2752,11 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2461
2752
|
color: '#fff',
|
|
2462
2753
|
pellucidity: 0.5
|
|
2463
2754
|
};
|
|
2755
|
+
|
|
2464
2756
|
if (item.config) {
|
|
2465
2757
|
cg = _objectSpread(_objectSpread({}, cg), item.config);
|
|
2466
2758
|
}
|
|
2759
|
+
|
|
2467
2760
|
var style = new ol.style.Style({
|
|
2468
2761
|
stroke: new ol.style.Stroke({
|
|
2469
2762
|
color: cg.lineColor,
|
|
@@ -2490,12 +2783,13 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2490
2783
|
id: item.id,
|
|
2491
2784
|
source: source
|
|
2492
2785
|
});
|
|
2493
|
-
t.state.gis.addLayer(polygonLayer);
|
|
2494
|
-
|
|
2786
|
+
t.state.gis.addLayer(polygonLayer); //缓存图元的数据,便于后期操作
|
|
2787
|
+
|
|
2495
2788
|
var pts = item.rings.map(function (itt, ind) {
|
|
2496
2789
|
return _toConsumableArray(itt);
|
|
2497
2790
|
});
|
|
2498
|
-
|
|
2791
|
+
|
|
2792
|
+
_this7.GM.setGraphic(item.id, polygon).setGraphicParam(item.id, {
|
|
2499
2793
|
attributes: _objectSpread(_objectSpread({}, item), {}, {
|
|
2500
2794
|
rings: pts,
|
|
2501
2795
|
other: item
|
|
@@ -2507,29 +2801,33 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2507
2801
|
},
|
|
2508
2802
|
source: source
|
|
2509
2803
|
});
|
|
2804
|
+
|
|
2510
2805
|
pgs.push(polygon);
|
|
2511
2806
|
pgsids.push(item.id);
|
|
2512
2807
|
});
|
|
2513
2808
|
t.state.polygonIds = pgsids;
|
|
2514
|
-
}
|
|
2515
|
-
|
|
2809
|
+
} //更新面
|
|
2810
|
+
|
|
2516
2811
|
}, {
|
|
2517
2812
|
key: "updatePolygon",
|
|
2518
2813
|
value: function updatePolygon(mapPolygons) {
|
|
2519
|
-
var
|
|
2814
|
+
var _this8 = this;
|
|
2815
|
+
|
|
2520
2816
|
var t = this;
|
|
2521
2817
|
mapPolygons.map(function (item, index) {
|
|
2522
2818
|
//判断图元是否存在.
|
|
2523
|
-
if (
|
|
2819
|
+
if (_this8.GM.isRepetition(item.id)) {
|
|
2524
2820
|
//多边形点位数据不符合,直接跳过
|
|
2525
2821
|
if (!(item.rings && item.rings.length >= 3)) {
|
|
2526
2822
|
console.warn("\u591A\u8FB9\u5F62rings\u6570\u636E\u9519\u8BEF");
|
|
2527
2823
|
return false;
|
|
2528
|
-
}
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
var
|
|
2532
|
-
|
|
2824
|
+
} //获取原有的图元
|
|
2825
|
+
|
|
2826
|
+
|
|
2827
|
+
var gc = _this8.GM.getGraphic(item.id);
|
|
2828
|
+
|
|
2829
|
+
var gp = t.GM.getGraphicParam(item.id); //获取原有的面属性,转换key值
|
|
2830
|
+
|
|
2533
2831
|
var cg = {
|
|
2534
2832
|
lineType: 'solid',
|
|
2535
2833
|
lineWidth: 5,
|
|
@@ -2537,11 +2835,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2537
2835
|
lineOpacity: 1,
|
|
2538
2836
|
color: '#fff',
|
|
2539
2837
|
pellucidity: 0.5
|
|
2540
|
-
};
|
|
2541
|
-
|
|
2838
|
+
}; //重新初始化值
|
|
2839
|
+
|
|
2542
2840
|
if (item.config) {
|
|
2543
2841
|
cg = _objectSpread(_objectSpread({}, cg), item.config);
|
|
2544
2842
|
}
|
|
2843
|
+
|
|
2545
2844
|
var pts = item.rings.map(function (itt, ind) {
|
|
2546
2845
|
return _toConsumableArray(itt);
|
|
2547
2846
|
});
|
|
@@ -2556,7 +2855,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2556
2855
|
color: cg.pellucidity ? getRgbColor(cg.color, cg.pellucidity) : cg.color
|
|
2557
2856
|
})
|
|
2558
2857
|
}));
|
|
2559
|
-
|
|
2858
|
+
|
|
2859
|
+
_this8.GM.setGraphicParam(item.id, {
|
|
2560
2860
|
attributes: _objectSpread(_objectSpread({}, item), {}, {
|
|
2561
2861
|
rings: pts,
|
|
2562
2862
|
other: item
|
|
@@ -2573,39 +2873,46 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2573
2873
|
return false;
|
|
2574
2874
|
}
|
|
2575
2875
|
});
|
|
2576
|
-
}
|
|
2577
|
-
|
|
2876
|
+
} //添加圆 circle
|
|
2877
|
+
|
|
2578
2878
|
}, {
|
|
2579
2879
|
key: "addCircle",
|
|
2580
2880
|
value: function addCircle(mapCircles, type) {
|
|
2581
2881
|
var t = this;
|
|
2882
|
+
|
|
2582
2883
|
var ccsids = _toConsumableArray(t.state.circleIds);
|
|
2884
|
+
|
|
2583
2885
|
if (type) {
|
|
2584
2886
|
ccsids = _toConsumableArray(t.state.drawIds[type]);
|
|
2585
2887
|
}
|
|
2888
|
+
|
|
2586
2889
|
mapCircles.map(function (item, index) {
|
|
2587
2890
|
//如果id重复,直接跳过不执行.
|
|
2588
2891
|
if (t.GM.isRepetition(item.id)) {
|
|
2589
2892
|
console.warn("\u5706id: ".concat(item.id, " \u91CD\u590D"));
|
|
2590
2893
|
return false;
|
|
2591
|
-
}
|
|
2592
|
-
|
|
2894
|
+
} //圆 点位数据不符合,直接跳过
|
|
2895
|
+
|
|
2896
|
+
|
|
2593
2897
|
if (!item.longitude || !item.latitude) {
|
|
2594
2898
|
console.warn("\u5706 \u7ECF\u7EAC\u5EA6 \u6570\u636E\u9519\u8BEF");
|
|
2595
2899
|
return false;
|
|
2596
2900
|
}
|
|
2901
|
+
|
|
2597
2902
|
var cg = {
|
|
2598
2903
|
lineType: 'solid',
|
|
2599
2904
|
lineWidth: 5,
|
|
2600
2905
|
lineColor: '#277ffa',
|
|
2601
2906
|
lineOpacity: 1,
|
|
2602
2907
|
color: '#fff',
|
|
2603
|
-
pellucidity: 0.5
|
|
2604
|
-
|
|
2908
|
+
pellucidity: 0.5 // isHidden: false //后期需要在加
|
|
2909
|
+
|
|
2605
2910
|
};
|
|
2911
|
+
|
|
2606
2912
|
if (item.config) {
|
|
2607
2913
|
cg = _objectSpread(_objectSpread({}, cg), item.config);
|
|
2608
2914
|
}
|
|
2915
|
+
|
|
2609
2916
|
var style = new ol.style.Style({
|
|
2610
2917
|
stroke: new ol.style.Stroke({
|
|
2611
2918
|
color: cg.lineColor,
|
|
@@ -2650,15 +2957,15 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2650
2957
|
},
|
|
2651
2958
|
source: source
|
|
2652
2959
|
});
|
|
2653
|
-
});
|
|
2654
|
-
|
|
2960
|
+
}); //添加绘制点
|
|
2961
|
+
|
|
2655
2962
|
if (type) {
|
|
2656
2963
|
t.state.drawIds = _objectSpread(_objectSpread({}, t.state.drawIds), {}, _defineProperty({}, type, ccsids));
|
|
2657
2964
|
} else {
|
|
2658
2965
|
t.state.circleIds = ccsids;
|
|
2659
2966
|
}
|
|
2660
|
-
}
|
|
2661
|
-
|
|
2967
|
+
} //更新圆
|
|
2968
|
+
|
|
2662
2969
|
}, {
|
|
2663
2970
|
key: "updateCircle",
|
|
2664
2971
|
value: function updateCircle(mapCircles) {
|
|
@@ -2674,23 +2981,26 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2674
2981
|
} else {
|
|
2675
2982
|
console.warn("\u66F4\u65B0\u7684\u5706id\u4E0D\u5B58\u5728!");
|
|
2676
2983
|
return false;
|
|
2677
|
-
}
|
|
2678
|
-
|
|
2984
|
+
} //获取原有的图元
|
|
2985
|
+
|
|
2986
|
+
|
|
2679
2987
|
var gc = t.GM.getGraphic(item.id);
|
|
2680
|
-
var gp = t.GM.getGraphicParam(item.id);
|
|
2681
|
-
|
|
2988
|
+
var gp = t.GM.getGraphicParam(item.id); //获取原有的面属性,转换key值
|
|
2989
|
+
|
|
2682
2990
|
var cg = {
|
|
2683
2991
|
lineType: 'solid',
|
|
2684
2992
|
lineWidth: 5,
|
|
2685
2993
|
lineColor: '#277ffa',
|
|
2686
2994
|
lineOpacity: 1,
|
|
2687
2995
|
color: '#fff',
|
|
2688
|
-
pellucidity: 0.5
|
|
2689
|
-
|
|
2996
|
+
pellucidity: 0.5 // isHidden: false //后期需要在加
|
|
2997
|
+
|
|
2690
2998
|
};
|
|
2999
|
+
|
|
2691
3000
|
if (item.config) {
|
|
2692
3001
|
cg = _objectSpread(_objectSpread({}, cg), item.config);
|
|
2693
3002
|
}
|
|
3003
|
+
|
|
2694
3004
|
var metersPerUnit = t.state.gis.getView().getProjection().getMetersPerUnit();
|
|
2695
3005
|
var circleRadius = item.radius / metersPerUnit;
|
|
2696
3006
|
gc.setGeometry(new ol.geom.Circle([item.longitude, item.latitude], parseFloat(circleRadius)));
|
|
@@ -2717,106 +3027,126 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2717
3027
|
},
|
|
2718
3028
|
source: gp.source
|
|
2719
3029
|
});
|
|
2720
|
-
});
|
|
2721
|
-
|
|
2722
|
-
}
|
|
2723
|
-
// 工具方法
|
|
3030
|
+
}); //刷新图元
|
|
3031
|
+
} // 工具方法
|
|
2724
3032
|
//删除图元
|
|
3033
|
+
|
|
2725
3034
|
}, {
|
|
2726
3035
|
key: "removeGraphic",
|
|
2727
3036
|
value: function removeGraphic(id, type) {
|
|
2728
3037
|
var t = this;
|
|
2729
3038
|
var graphic = t.GM.getGraphic(id);
|
|
2730
|
-
var gp = t.GM.getGraphicParam(id);
|
|
2731
|
-
|
|
3039
|
+
var gp = t.GM.getGraphicParam(id); //刪除label
|
|
3040
|
+
|
|
2732
3041
|
if (t.Label[id]) {
|
|
2733
3042
|
t.Label[id].html.remove();
|
|
2734
3043
|
delete t.Label[id];
|
|
2735
3044
|
}
|
|
3045
|
+
|
|
2736
3046
|
if (!!graphic) {
|
|
2737
3047
|
//清除聚合点 避免异常
|
|
2738
3048
|
// t._cluster.removeMarker(this.GM.getGraphic(id));
|
|
2739
3049
|
//清除地图中图元
|
|
2740
3050
|
// const layers = t.state.gis.getLayers().getArray();
|
|
2741
3051
|
// const layer = layers.filter(item => item.getProperties().name == type)[0];
|
|
2742
|
-
gp.source.removeFeature(graphic);
|
|
2743
|
-
// layer && layer.getSource().removeFeature(graphic);
|
|
3052
|
+
gp.source.removeFeature(graphic); // layer && layer.getSource().removeFeature(graphic);
|
|
2744
3053
|
//清除对应id的图元数据缓存
|
|
3054
|
+
|
|
2745
3055
|
t.GM.removeGraphic(id);
|
|
2746
3056
|
t.GM.removeGraphicParam(id);
|
|
3057
|
+
|
|
2747
3058
|
if (t.state.gis.getOverlayById(id)) {
|
|
2748
3059
|
t.state.gis.removeOverlay(t.state.gis.getOverlayById(id));
|
|
2749
3060
|
}
|
|
2750
3061
|
} else {
|
|
2751
3062
|
return false;
|
|
2752
3063
|
}
|
|
3064
|
+
|
|
2753
3065
|
for (var i = 0; i < t.movePoints.length; i++) {
|
|
2754
3066
|
if (t.movePoints[i].id == id) {
|
|
2755
3067
|
t.movePoints.splice(i, 1);
|
|
2756
3068
|
continue;
|
|
2757
3069
|
}
|
|
2758
3070
|
}
|
|
3071
|
+
|
|
2759
3072
|
var ids = [];
|
|
3073
|
+
|
|
2760
3074
|
switch (type) {
|
|
2761
3075
|
case 'point':
|
|
2762
3076
|
ids = t.state.pointIds;
|
|
2763
3077
|
break;
|
|
3078
|
+
|
|
2764
3079
|
case 'line':
|
|
2765
3080
|
ids = t.state.lineIds;
|
|
2766
3081
|
break;
|
|
3082
|
+
|
|
2767
3083
|
case 'polygon':
|
|
2768
3084
|
ids = t.state.polygonIds;
|
|
2769
3085
|
break;
|
|
3086
|
+
|
|
2770
3087
|
case 'circle':
|
|
2771
3088
|
ids = t.state.circleIds;
|
|
2772
3089
|
break;
|
|
3090
|
+
|
|
2773
3091
|
case 'draw':
|
|
2774
3092
|
if (t.state.drawIds.point.indexOf(id) > -1) {
|
|
2775
3093
|
t.state.drawIds.point.splice(t.state.drawIds.point.indexOf(id), 1);
|
|
2776
3094
|
}
|
|
3095
|
+
|
|
2777
3096
|
if (t.state.drawIds.polyline.indexOf(id) > -1) {
|
|
2778
3097
|
t.state.drawIds.polyline.splice(t.state.drawIds.polyline.indexOf(id), 1);
|
|
2779
3098
|
}
|
|
3099
|
+
|
|
2780
3100
|
if (t.state.drawIds.polygon.indexOf(id) > -1) {
|
|
2781
3101
|
t.state.drawIds.polygon.splice(t.state.drawIds.polygon.indexOf(id), 1);
|
|
2782
3102
|
}
|
|
3103
|
+
|
|
2783
3104
|
if (t.state.drawIds.circle.indexOf(id) > -1) {
|
|
2784
3105
|
t.state.drawIds.circle.splice(t.state.drawIds.circle.indexOf(id), 1);
|
|
2785
3106
|
}
|
|
3107
|
+
|
|
2786
3108
|
if (t.state.drawIds.rectangle.indexOf(id) > -1) {
|
|
2787
3109
|
t.state.drawIds.rectangle.splice(t.state.drawIds.rectangle.indexOf(id), 1);
|
|
2788
3110
|
}
|
|
3111
|
+
|
|
2789
3112
|
break;
|
|
3113
|
+
|
|
2790
3114
|
default:
|
|
2791
3115
|
if (t.state.pointIds.indexOf(id) > -1) {
|
|
2792
3116
|
t.state.pointIds.splice(t.state.pointIds.indexOf(id), 1);
|
|
2793
3117
|
}
|
|
3118
|
+
|
|
2794
3119
|
if (t.state.lineIds.indexOf(id) > -1) {
|
|
2795
3120
|
t.state.lineIds.splice(t.state.lineIds.indexOf(id), 1);
|
|
2796
3121
|
}
|
|
3122
|
+
|
|
2797
3123
|
if (t.state.polygonIds.indexOf(id) > -1) {
|
|
2798
3124
|
t.state.polygonIds.splice(t.state.polygonIds.indexOf(id), 1);
|
|
2799
3125
|
}
|
|
3126
|
+
|
|
2800
3127
|
if (t.state.circleIds.indexOf(id) > -1) {
|
|
2801
3128
|
t.state.circleIds.splice(t.state.circleIds.indexOf(id), 1);
|
|
2802
3129
|
}
|
|
3130
|
+
|
|
2803
3131
|
break;
|
|
2804
3132
|
}
|
|
3133
|
+
|
|
2805
3134
|
if (id == t.state.editId) {
|
|
2806
3135
|
t.state.editId = '';
|
|
2807
3136
|
}
|
|
3137
|
+
|
|
2808
3138
|
if (ids.indexOf(id) != -1) {
|
|
2809
3139
|
ids.splice(ids.indexOf(id), 1);
|
|
2810
3140
|
}
|
|
2811
|
-
}
|
|
2812
|
-
|
|
3141
|
+
} //清空地图
|
|
3142
|
+
|
|
2813
3143
|
}, {
|
|
2814
3144
|
key: "clearAll",
|
|
2815
3145
|
value: function clearAll() {
|
|
2816
3146
|
var t = this;
|
|
2817
3147
|
var gis = t.state.gis;
|
|
2818
|
-
var layers = gis.getLayers();
|
|
2819
|
-
|
|
3148
|
+
var layers = gis.getLayers(); //清空热力图
|
|
3149
|
+
|
|
2820
3150
|
if (t.heatmap) {
|
|
2821
3151
|
var hMap = layers.filter(function (item) {
|
|
2822
3152
|
return item.name == 'heatMap';
|
|
@@ -2824,6 +3154,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2824
3154
|
hMap.getSource().clear();
|
|
2825
3155
|
gis.removeLayer(layer);
|
|
2826
3156
|
}
|
|
3157
|
+
|
|
2827
3158
|
t.heatmap = null;
|
|
2828
3159
|
t.movePoints = [];
|
|
2829
3160
|
t.state.pointIds = [];
|
|
@@ -2833,6 +3164,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2833
3164
|
});
|
|
2834
3165
|
t.clearAllPointCollection();
|
|
2835
3166
|
t.closeDraw();
|
|
3167
|
+
|
|
2836
3168
|
if (t.clusterInfo.clusterHulls || t.clusterInfo.clusters || t.clusterInfo.clusterCircles) {
|
|
2837
3169
|
t.clusterHulls.getSource().clear();
|
|
2838
3170
|
t.clusterInfo.clusterSource = null;
|
|
@@ -2842,69 +3174,82 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2842
3174
|
t.clusterInfo.clusterHulls = null;
|
|
2843
3175
|
t.clusterInfo.clusters = null;
|
|
2844
3176
|
t.clusterInfo.clusterCircles = null;
|
|
2845
|
-
}
|
|
2846
|
-
|
|
2847
|
-
|
|
2848
|
-
//循环所有id删除
|
|
3177
|
+
} //清空缓存数据
|
|
3178
|
+
|
|
3179
|
+
|
|
3180
|
+
t.GM.clearAll(); //循环所有id删除
|
|
3181
|
+
|
|
2849
3182
|
var _t$state = t.state,
|
|
2850
|
-
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
3183
|
+
pointIds = _t$state.pointIds,
|
|
3184
|
+
lineIds = _t$state.lineIds,
|
|
3185
|
+
polygonIds = _t$state.polygonIds,
|
|
3186
|
+
circleIds = _t$state.circleIds,
|
|
3187
|
+
drawIds = _t$state.drawIds; //拷贝数组,避免原数组操作,影响循环
|
|
3188
|
+
|
|
2856
3189
|
var ps = _toConsumableArray(pointIds),
|
|
2857
|
-
|
|
2858
|
-
|
|
2859
|
-
|
|
2860
|
-
|
|
3190
|
+
ls = _toConsumableArray(lineIds),
|
|
3191
|
+
pgs = _toConsumableArray(polygonIds),
|
|
3192
|
+
cs = _toConsumableArray(circleIds); // 删除点
|
|
3193
|
+
|
|
3194
|
+
|
|
2861
3195
|
for (var i = 0; i < ps.length; i++) {
|
|
2862
3196
|
t.removeGraphic(ps[i], 'point');
|
|
2863
|
-
}
|
|
2864
|
-
|
|
2865
|
-
|
|
2866
|
-
|
|
2867
|
-
|
|
2868
|
-
// 删除面
|
|
2869
|
-
|
|
2870
|
-
|
|
2871
|
-
|
|
2872
|
-
|
|
2873
|
-
|
|
2874
|
-
|
|
2875
|
-
|
|
2876
|
-
|
|
3197
|
+
} // 删除线
|
|
3198
|
+
|
|
3199
|
+
|
|
3200
|
+
for (var _i2 = 0; _i2 < ls.length; _i2++) {
|
|
3201
|
+
t.removeGraphic(ls[_i2], 'line');
|
|
3202
|
+
} // 删除面
|
|
3203
|
+
|
|
3204
|
+
|
|
3205
|
+
for (var _i3 = 0; _i3 < pgs.length; _i3++) {
|
|
3206
|
+
t.removeGraphic(pgs[_i3], 'polygon');
|
|
3207
|
+
} // 删除圆
|
|
3208
|
+
|
|
3209
|
+
|
|
3210
|
+
for (var _i4 = 0; _i4 < cs.length; _i4++) {
|
|
3211
|
+
t.removeGraphic(cs[_i4], 'circle');
|
|
3212
|
+
} //删除绘制的点
|
|
3213
|
+
|
|
3214
|
+
|
|
2877
3215
|
var point = drawIds.point,
|
|
2878
|
-
|
|
2879
|
-
|
|
2880
|
-
|
|
2881
|
-
|
|
2882
|
-
|
|
2883
|
-
|
|
3216
|
+
polyline = drawIds.polyline,
|
|
3217
|
+
polygon = drawIds.polygon,
|
|
3218
|
+
circle = drawIds.circle,
|
|
3219
|
+
rectangle = drawIds.rectangle;
|
|
3220
|
+
|
|
3221
|
+
for (var i = 0; i < point.length; i++) {
|
|
3222
|
+
t.removeGraphic(point[i]);
|
|
2884
3223
|
}
|
|
3224
|
+
|
|
2885
3225
|
for (var _i5 = 0; _i5 < polyline.length; _i5++) {
|
|
2886
3226
|
t.removeGraphic(polyline[_i5]);
|
|
2887
3227
|
}
|
|
3228
|
+
|
|
2888
3229
|
for (var _i6 = 0; _i6 < polygon.length; _i6++) {
|
|
2889
3230
|
t.removeGraphic(polygon[_i6]);
|
|
2890
3231
|
}
|
|
3232
|
+
|
|
2891
3233
|
for (var _i7 = 0; _i7 < circle.length; _i7++) {
|
|
2892
3234
|
t.removeGraphic(circle[_i7]);
|
|
2893
3235
|
}
|
|
3236
|
+
|
|
2894
3237
|
for (var _i8 = 0; _i8 < rectangle.length; _i8++) {
|
|
2895
3238
|
t.removeGraphic(rectangle[_i8]);
|
|
2896
3239
|
}
|
|
2897
|
-
}
|
|
2898
|
-
|
|
3240
|
+
} //展示比例尺
|
|
3241
|
+
|
|
2899
3242
|
}, {
|
|
2900
3243
|
key: "showControl",
|
|
2901
3244
|
value: function showControl(props) {
|
|
2902
3245
|
var t = this;
|
|
2903
3246
|
var gis = t.state.gis;
|
|
2904
3247
|
var config = props.showControl;
|
|
3248
|
+
|
|
2905
3249
|
if (t.scaleControl) {
|
|
2906
3250
|
gis.removeControl(t.scaleControl);
|
|
2907
3251
|
}
|
|
3252
|
+
|
|
2908
3253
|
t.scaleControl = new ol.control.ScaleLine({
|
|
2909
3254
|
units: 'metric',
|
|
2910
3255
|
//设置度量单位
|
|
@@ -2942,61 +3287,65 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
2942
3287
|
});
|
|
2943
3288
|
}
|
|
2944
3289
|
}, 20);
|
|
2945
|
-
}
|
|
2946
|
-
|
|
3290
|
+
} //设置区域限制
|
|
3291
|
+
|
|
2947
3292
|
}, {
|
|
2948
3293
|
key: "setAreaRestriction",
|
|
2949
3294
|
value: function setAreaRestriction(areaRestriction) {
|
|
2950
3295
|
var t = this;
|
|
3296
|
+
|
|
2951
3297
|
var _t$dealData6 = t.dealData(areaRestriction),
|
|
2952
|
-
|
|
3298
|
+
_et = _t$dealData6._extent;
|
|
3299
|
+
|
|
2953
3300
|
t.areaRestriction = t.state.gis.getView().setProperties({
|
|
2954
3301
|
extent: [_et.xmax, _et.ymax, _et.xmin, _et.ymin]
|
|
2955
3302
|
}, false);
|
|
2956
|
-
}
|
|
2957
|
-
|
|
3303
|
+
} //关闭区域限制
|
|
3304
|
+
|
|
2958
3305
|
}, {
|
|
2959
3306
|
key: "clearAreaRestriction",
|
|
2960
3307
|
value: function clearAreaRestriction() {
|
|
2961
3308
|
var t = this;
|
|
2962
3309
|
t.areaRestriction = null;
|
|
2963
|
-
}
|
|
2964
|
-
|
|
3310
|
+
} //区域限制逻辑
|
|
3311
|
+
|
|
2965
3312
|
}, {
|
|
2966
3313
|
key: "dealAreaRestriction",
|
|
2967
3314
|
value: function dealAreaRestriction(e) {
|
|
2968
|
-
var t = this;
|
|
2969
|
-
|
|
3315
|
+
var t = this; //如果在区域内,不处理
|
|
3316
|
+
|
|
2970
3317
|
if (t.areaRestriction.contains(e.extent.getCenter())) {
|
|
2971
3318
|
return;
|
|
2972
|
-
}
|
|
2973
|
-
// if(t.containsExtent(t.areaRestriction,e.extent)){
|
|
3319
|
+
} // if(t.containsExtent(t.areaRestriction,e.extent)){
|
|
2974
3320
|
// return;
|
|
2975
3321
|
// }
|
|
3322
|
+
|
|
3323
|
+
|
|
2976
3324
|
var _t$areaRestriction = t.areaRestriction,
|
|
2977
|
-
|
|
2978
|
-
|
|
2979
|
-
|
|
2980
|
-
|
|
3325
|
+
xmin1 = _t$areaRestriction.xmin,
|
|
3326
|
+
xmax1 = _t$areaRestriction.xmax,
|
|
3327
|
+
ymin1 = _t$areaRestriction.ymin,
|
|
3328
|
+
ymax1 = _t$areaRestriction.ymax;
|
|
2981
3329
|
var _e$extent = e.extent,
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
|
|
2985
|
-
|
|
3330
|
+
xmin2 = _e$extent.xmin,
|
|
3331
|
+
xmax2 = _e$extent.xmax,
|
|
3332
|
+
ymin2 = _e$extent.ymin,
|
|
3333
|
+
ymax2 = _e$extent.ymax;
|
|
2986
3334
|
var x = e.extent.getCenter().x,
|
|
2987
|
-
|
|
3335
|
+
y = e.extent.getCenter().y;
|
|
2988
3336
|
if (x < xmin1) x = xmin1 + 0.1;
|
|
2989
3337
|
if (x > xmax1) x = xmax1 - 0.1;
|
|
2990
3338
|
if (y < ymin1) y = ymin1 + 0.1;
|
|
2991
3339
|
if (y > ymax1) y = ymax1 - 0.1;
|
|
2992
3340
|
t.state.gis.getView().setCenter([x, y]);
|
|
2993
|
-
}
|
|
2994
|
-
|
|
3341
|
+
} //聚合地图图元(arg为空时聚合全部点)
|
|
3342
|
+
|
|
2995
3343
|
}, {
|
|
2996
3344
|
key: "cluster",
|
|
2997
3345
|
value: function cluster(arg) {
|
|
2998
3346
|
var t = this;
|
|
2999
3347
|
var ary = [];
|
|
3348
|
+
|
|
3000
3349
|
if (!arg) {
|
|
3001
3350
|
var pointIds = t.state.pointIds;
|
|
3002
3351
|
ary = pointIds;
|
|
@@ -3007,6 +3356,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3007
3356
|
ary = arg.split(',');
|
|
3008
3357
|
}
|
|
3009
3358
|
}
|
|
3359
|
+
|
|
3010
3360
|
t.pointLayers.map(function (item) {
|
|
3011
3361
|
t.state.gis.removeLayer(item.layer);
|
|
3012
3362
|
t.pointLayers = [];
|
|
@@ -3023,6 +3373,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3023
3373
|
minDistance: 0,
|
|
3024
3374
|
source: source
|
|
3025
3375
|
});
|
|
3376
|
+
|
|
3026
3377
|
if (t.clusterInfo.clusterHulls) {
|
|
3027
3378
|
t.clusterInfo.clusterHulls.setSource(t.clusterInfo.clusterSource);
|
|
3028
3379
|
} else {
|
|
@@ -3032,6 +3383,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3032
3383
|
});
|
|
3033
3384
|
t.state.gis.addLayer(t.clusterInfo.clusterHulls);
|
|
3034
3385
|
}
|
|
3386
|
+
|
|
3035
3387
|
if (t.clusterInfo.clusters) {
|
|
3036
3388
|
t.clusterInfo.clusters.setSource(t.clusterInfo.clusterSource);
|
|
3037
3389
|
} else {
|
|
@@ -3041,6 +3393,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3041
3393
|
});
|
|
3042
3394
|
t.state.gis.addLayer(t.clusterInfo.clusters);
|
|
3043
3395
|
}
|
|
3396
|
+
|
|
3044
3397
|
if (t.clusterInfo.clusterCircles) {
|
|
3045
3398
|
t.clusterInfo.clusterCircles.setSource(t.clusterInfo.clusterSource);
|
|
3046
3399
|
} else {
|
|
@@ -3050,6 +3403,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3050
3403
|
});
|
|
3051
3404
|
t.state.gis.addLayer(t.clusterInfo.clusterCircles);
|
|
3052
3405
|
}
|
|
3406
|
+
|
|
3053
3407
|
function clusterMemberStyle(clusterMember) {
|
|
3054
3408
|
var style = clusterMember.getStyle();
|
|
3055
3409
|
var image = style && style.getImage ? style.getImage() : null;
|
|
@@ -3059,10 +3413,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3059
3413
|
text: text
|
|
3060
3414
|
});
|
|
3061
3415
|
}
|
|
3416
|
+
|
|
3062
3417
|
function clusterCircleStyle(cluster, resolution) {
|
|
3063
3418
|
if (cluster !== t.clusterInfo.clickFeature || resolution !== t.clusterInfo.clickResolution) {
|
|
3064
3419
|
return;
|
|
3065
3420
|
}
|
|
3421
|
+
|
|
3066
3422
|
var clusterMembers = cluster.get('features');
|
|
3067
3423
|
var centerCoordinates = cluster.getGeometry().getCoordinates();
|
|
3068
3424
|
return generatePointsCircle(clusterMembers.length, cluster.getGeometry().getCoordinates(), resolution).reduce(function (styles, coordinates, i) {
|
|
@@ -3081,24 +3437,30 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3081
3437
|
return styles;
|
|
3082
3438
|
}, []);
|
|
3083
3439
|
}
|
|
3440
|
+
|
|
3084
3441
|
function generatePointsCircle(count, clusterCenter, resolution) {
|
|
3085
3442
|
var circumference = 1 * 28 * (2 + count);
|
|
3086
3443
|
var legLength = circumference / (Math.PI * 2); //radius from circumference
|
|
3444
|
+
|
|
3087
3445
|
var angleStep = Math.PI * 2 / count;
|
|
3088
3446
|
var res = [];
|
|
3089
3447
|
var angle;
|
|
3090
3448
|
legLength = Math.max(legLength, 35) * resolution; // Minimum distance to get outside the cluster icon.
|
|
3449
|
+
|
|
3091
3450
|
for (var i = 0; i < count; ++i) {
|
|
3092
3451
|
// Clockwise, like spiral.
|
|
3093
3452
|
angle = Math.PI / 2 + i * angleStep;
|
|
3094
3453
|
res.push([clusterCenter[0] + legLength * Math.cos(angle), clusterCenter[1] + legLength * Math.sin(angle)]);
|
|
3095
3454
|
}
|
|
3455
|
+
|
|
3096
3456
|
return res;
|
|
3097
3457
|
}
|
|
3458
|
+
|
|
3098
3459
|
function clusterHullStyle(cluster) {
|
|
3099
3460
|
if (cluster !== t.clusterInfo.hoverFeature) {
|
|
3100
3461
|
return;
|
|
3101
3462
|
}
|
|
3463
|
+
|
|
3102
3464
|
var originalFeatures = cluster.get('features');
|
|
3103
3465
|
var points = originalFeatures.map(function (feature) {
|
|
3104
3466
|
return feature.getGeometry().getCoordinates();
|
|
@@ -3114,8 +3476,10 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3114
3476
|
})
|
|
3115
3477
|
});
|
|
3116
3478
|
}
|
|
3479
|
+
|
|
3117
3480
|
function clusterStyle(feature) {
|
|
3118
3481
|
var size = feature.get('features').length;
|
|
3482
|
+
|
|
3119
3483
|
if (size > 2) {
|
|
3120
3484
|
return [new ol.style.Style({
|
|
3121
3485
|
image: new ol.style.Circle({
|
|
@@ -3154,22 +3518,27 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3154
3518
|
value: function clearCluster(arg) {
|
|
3155
3519
|
var t = this;
|
|
3156
3520
|
var ids = arg && (arg === null || arg === void 0 ? void 0 : arg.length) > 0 ? arg : t.state.pointIds;
|
|
3521
|
+
|
|
3157
3522
|
if (t.clusterInfo.clusterHulls) {
|
|
3158
3523
|
t.state.gis.removeLayer(t.clusterInfo.clusterHulls);
|
|
3159
3524
|
t.clusterInfo.clusterHulls = null;
|
|
3160
3525
|
}
|
|
3526
|
+
|
|
3161
3527
|
if (t.clusterInfo.clusters) {
|
|
3162
3528
|
t.state.gis.removeLayer(t.clusterInfo.clusters);
|
|
3163
3529
|
t.clusterInfo.clusters = null;
|
|
3164
3530
|
}
|
|
3531
|
+
|
|
3165
3532
|
if (t.clusterInfo.clusterCircles) {
|
|
3166
3533
|
t.state.gis.removeLayer(t.clusterInfo.clusterCircles);
|
|
3167
3534
|
t.clusterInfo.clusterCircles = null;
|
|
3168
3535
|
}
|
|
3536
|
+
|
|
3169
3537
|
ids.map(function (id) {
|
|
3170
3538
|
if (t.GM.getGraphic(id)) {
|
|
3171
3539
|
t.GM.removeGraphic(id);
|
|
3172
3540
|
}
|
|
3541
|
+
|
|
3173
3542
|
t.state.pointIds.splice(t.state.pointIds.indexOf(id), 1);
|
|
3174
3543
|
});
|
|
3175
3544
|
t.addPoint(t.props.mapPoints);
|
|
@@ -3177,20 +3546,21 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3177
3546
|
}
|
|
3178
3547
|
/*公共方法*/
|
|
3179
3548
|
//判断extent1是否在extent2内部
|
|
3549
|
+
|
|
3180
3550
|
}, {
|
|
3181
3551
|
key: "containsExtent",
|
|
3182
3552
|
value: function containsExtent(e1, e2) {
|
|
3183
3553
|
var xmin1 = e1.xmin,
|
|
3184
|
-
|
|
3185
|
-
|
|
3186
|
-
|
|
3554
|
+
xmax1 = e1.xmax,
|
|
3555
|
+
ymin1 = e1.ymin,
|
|
3556
|
+
ymax1 = e1.ymax;
|
|
3187
3557
|
var xmin2 = e2.xmin,
|
|
3188
|
-
|
|
3189
|
-
|
|
3190
|
-
|
|
3558
|
+
xmax2 = e2.xmax,
|
|
3559
|
+
ymin2 = e2.ymin,
|
|
3560
|
+
ymax2 = e2.ymax;
|
|
3191
3561
|
return xmin2 > xmin1 && xmax2 < xmax1 && ymin2 > ymin1 && ymax2 < ymax1;
|
|
3192
|
-
}
|
|
3193
|
-
|
|
3562
|
+
} //将图元z-index设置成最高
|
|
3563
|
+
|
|
3194
3564
|
}, {
|
|
3195
3565
|
key: "czIndex",
|
|
3196
3566
|
value: function czIndex(id) {
|
|
@@ -3201,8 +3571,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3201
3571
|
key: "equalsPoint",
|
|
3202
3572
|
value: function equalsPoint(a, b) {
|
|
3203
3573
|
return a.x == b.x && a.y == b.y;
|
|
3204
|
-
}
|
|
3205
|
-
|
|
3574
|
+
} //计算2点间距离 单位m 精确到2位小数
|
|
3575
|
+
|
|
3206
3576
|
}, {
|
|
3207
3577
|
key: "calculatePointsDistance",
|
|
3208
3578
|
value: function calculatePointsDistance(fp, ep) {
|
|
@@ -3210,16 +3580,18 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3210
3580
|
var distance = ol.sphere.getDistance(fp, ep);
|
|
3211
3581
|
console.log(distance);
|
|
3212
3582
|
return Math.round(distance);
|
|
3213
|
-
}
|
|
3214
|
-
|
|
3583
|
+
} //计算多个点的距离(常用于线计算)
|
|
3584
|
+
|
|
3215
3585
|
}, {
|
|
3216
3586
|
key: "calculateDistance",
|
|
3217
3587
|
value: function calculateDistance(ps) {
|
|
3218
3588
|
var t = this,
|
|
3219
|
-
|
|
3589
|
+
totalDistance = 0;
|
|
3590
|
+
|
|
3220
3591
|
if (ps.length < 0) {
|
|
3221
3592
|
return 0;
|
|
3222
3593
|
}
|
|
3594
|
+
|
|
3223
3595
|
for (var i = 0; i < ps.length; i++) {
|
|
3224
3596
|
if (i < ps.length - 1) {
|
|
3225
3597
|
var distance = t.calculatePointsDistance(ps[i], ps[i + 1]);
|
|
@@ -3227,37 +3599,43 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3227
3599
|
totalDistance += distance;
|
|
3228
3600
|
}
|
|
3229
3601
|
}
|
|
3602
|
+
|
|
3230
3603
|
console.log(totalDistance);
|
|
3231
3604
|
return Math.round(totalDistance * 100) / 100;
|
|
3232
|
-
}
|
|
3233
|
-
|
|
3605
|
+
} //处理线和面的 经纬度数据
|
|
3606
|
+
|
|
3234
3607
|
}, {
|
|
3235
3608
|
key: "dealData",
|
|
3236
3609
|
value: function dealData(paths) {
|
|
3237
3610
|
//区别点和圆的经纬度数据处理
|
|
3238
3611
|
var lnglatAry = [],
|
|
3239
|
-
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
|
|
3243
|
-
|
|
3244
|
-
|
|
3245
|
-
|
|
3612
|
+
_extent = {
|
|
3613
|
+
xmax: 0,
|
|
3614
|
+
xmin: 0,
|
|
3615
|
+
ymax: 0,
|
|
3616
|
+
ymin: 0
|
|
3617
|
+
},
|
|
3618
|
+
path = [];
|
|
3246
3619
|
path = paths.map(function (item, index) {
|
|
3247
3620
|
var lng = item[0],
|
|
3248
|
-
|
|
3621
|
+
lat = item[1];
|
|
3622
|
+
|
|
3249
3623
|
if (lng > _extent.xmax) {
|
|
3250
3624
|
_extent.xmax = lng;
|
|
3251
3625
|
}
|
|
3626
|
+
|
|
3252
3627
|
if (lng < _extent.xmin || _extent.xmin == 0) {
|
|
3253
3628
|
_extent.xmin = lng;
|
|
3254
3629
|
}
|
|
3630
|
+
|
|
3255
3631
|
if (lat > _extent.ymax) {
|
|
3256
3632
|
_extent.ymax = lat;
|
|
3257
3633
|
}
|
|
3634
|
+
|
|
3258
3635
|
if (lat < _extent.ymin || _extent.ymin == 0) {
|
|
3259
3636
|
_extent.ymin = lat;
|
|
3260
3637
|
}
|
|
3638
|
+
|
|
3261
3639
|
lnglatAry.push({
|
|
3262
3640
|
lngX: lng,
|
|
3263
3641
|
latX: lat
|
|
@@ -3269,50 +3647,55 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3269
3647
|
_extent: _extent,
|
|
3270
3648
|
path: path
|
|
3271
3649
|
};
|
|
3272
|
-
}
|
|
3273
|
-
|
|
3650
|
+
} //处理点位图元的添加 和 更新
|
|
3651
|
+
|
|
3274
3652
|
}, {
|
|
3275
3653
|
key: "dealLabelGraphics",
|
|
3276
3654
|
value: function dealLabelGraphics(id, label) {
|
|
3277
3655
|
var t = this;
|
|
3656
|
+
|
|
3278
3657
|
if (label) {
|
|
3279
|
-
var position = (t.GM.getGraphic(id) || {}).geometry || label.position;
|
|
3280
|
-
|
|
3658
|
+
var position = (t.GM.getGraphic(id) || {}).geometry || label.position; //经纬度转top和left
|
|
3659
|
+
|
|
3281
3660
|
var tl = t.state.gis.toScreen(position),
|
|
3282
|
-
|
|
3283
|
-
|
|
3661
|
+
lbl = _objectSpread({}, label); //渲染優化
|
|
3662
|
+
|
|
3663
|
+
|
|
3284
3664
|
if (!(tl.y < -50 || tl.x < -50 || tl.y > t.state.gis.height || tl.x > t.state.gis.width)) {
|
|
3285
3665
|
//设置label的位置(通过定位来实现)
|
|
3286
3666
|
label.html.css({
|
|
3287
3667
|
position: 'absolute',
|
|
3288
3668
|
top: tl.y + (label.offset.y || 0) - t.labelLayer.y,
|
|
3289
3669
|
left: tl.x + (label.offset.x || 0) - t.labelLayer.x
|
|
3290
|
-
});
|
|
3291
|
-
|
|
3670
|
+
}); //添加点位到(地图)
|
|
3671
|
+
|
|
3292
3672
|
$("#".concat(t.htmlPointsId)).append(label.html);
|
|
3293
3673
|
lbl.add = true;
|
|
3294
3674
|
} else {
|
|
3295
3675
|
lbl.add = false;
|
|
3296
|
-
}
|
|
3297
|
-
|
|
3676
|
+
} //记录下label的dom对象,用于后期修改和删除(基本是删除)
|
|
3677
|
+
|
|
3678
|
+
|
|
3298
3679
|
t.Label[id] = lbl;
|
|
3299
3680
|
}
|
|
3300
|
-
}
|
|
3301
|
-
|
|
3681
|
+
} //点的跳动动画
|
|
3682
|
+
|
|
3302
3683
|
}, {
|
|
3303
3684
|
key: "pointAnimation",
|
|
3304
3685
|
value: function pointAnimation(id, marker) {
|
|
3305
|
-
var t = this;
|
|
3306
|
-
|
|
3686
|
+
var t = this; //null时关闭跳动
|
|
3687
|
+
|
|
3307
3688
|
if (!!marker) {
|
|
3308
3689
|
if (t.animTimer[id]) {
|
|
3309
3690
|
clearInterval(t.animTimer[id]);
|
|
3310
3691
|
}
|
|
3692
|
+
|
|
3311
3693
|
t.animTimer[id] = setInterval(function () {
|
|
3312
3694
|
//点被隐藏时,没有执行,定时不关
|
|
3313
3695
|
if (marker.symbol) {
|
|
3314
|
-
var shape = _objectSpread({}, marker.symbol);
|
|
3315
|
-
|
|
3696
|
+
var shape = _objectSpread({}, marker.symbol); //初始数据 点位有变动,重新刷新数据
|
|
3697
|
+
|
|
3698
|
+
|
|
3316
3699
|
if (!t.animCount[id] || shape.yoffset != t.animCount[id].now) {
|
|
3317
3700
|
t.animCount[id] = {
|
|
3318
3701
|
start: shape.yoffset,
|
|
@@ -3320,12 +3703,15 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3320
3703
|
notation: -1
|
|
3321
3704
|
};
|
|
3322
3705
|
}
|
|
3706
|
+
|
|
3323
3707
|
if (t.animCount[id].now - t.animCount[id].start == 20) {
|
|
3324
3708
|
t.animCount[id].notation = -1;
|
|
3325
3709
|
}
|
|
3710
|
+
|
|
3326
3711
|
if (t.animCount[id].now - t.animCount[id].start == 0) {
|
|
3327
3712
|
t.animCount[id].notation = 1;
|
|
3328
3713
|
}
|
|
3714
|
+
|
|
3329
3715
|
shape.yoffset = t.animCount[id].now = t.animCount[id].now + t.animCount[id].notation * 2;
|
|
3330
3716
|
marker.symbol.setOffset(shape.xoffset, shape.yoffset);
|
|
3331
3717
|
t.state.gis.graphics.refresh();
|
|
@@ -3339,93 +3725,107 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3339
3725
|
key: "moveAnimation",
|
|
3340
3726
|
value: function moveAnimation() {
|
|
3341
3727
|
var t = this;
|
|
3728
|
+
|
|
3342
3729
|
if (t.moveToTimer) {
|
|
3343
3730
|
clearInterval(t.moveToTimer);
|
|
3344
3731
|
}
|
|
3732
|
+
|
|
3345
3733
|
t.moveToTimer = setInterval(function () {
|
|
3346
3734
|
for (var i = 0; i < t.movePoints.length; i++) {
|
|
3347
3735
|
t.movePoints[i].waitTime += 10;
|
|
3348
3736
|
t.movePoints[i].deleteTime -= 10;
|
|
3349
3737
|
}
|
|
3738
|
+
|
|
3350
3739
|
t.movePoints.sort(function (x, y) {
|
|
3351
3740
|
return y.waitTime - x.waitTime;
|
|
3352
3741
|
});
|
|
3353
3742
|
var nowMovePoints = t.movePoints.slice(0, 10),
|
|
3354
|
-
|
|
3743
|
+
deleteIndex = [];
|
|
3744
|
+
|
|
3355
3745
|
for (var _i9 = 0; _i9 < nowMovePoints.length; _i9++) {
|
|
3356
3746
|
var _nowMovePoints$_i = nowMovePoints[_i9],
|
|
3357
|
-
|
|
3358
|
-
|
|
3359
|
-
|
|
3360
|
-
|
|
3361
|
-
|
|
3362
|
-
|
|
3747
|
+
id = _nowMovePoints$_i.id,
|
|
3748
|
+
rx = _nowMovePoints$_i.rx,
|
|
3749
|
+
ry = _nowMovePoints$_i.ry,
|
|
3750
|
+
waitTime = _nowMovePoints$_i.waitTime,
|
|
3751
|
+
deleteTime = _nowMovePoints$_i.deleteTime,
|
|
3752
|
+
ddeg = _nowMovePoints$_i.ddeg;
|
|
3363
3753
|
var gc = t.GM.getGraphic(id);
|
|
3754
|
+
|
|
3364
3755
|
if (!gc || !gc._graphicsLayer) {
|
|
3365
3756
|
clearInterval(t.moveToTimer);
|
|
3366
3757
|
} else {
|
|
3367
3758
|
var gg = gc.getGeometry();
|
|
3368
3759
|
var tx = gg[0] + rx,
|
|
3369
|
-
|
|
3760
|
+
ty = gg[1] + ry;
|
|
3370
3761
|
gc.setGeometry([tx, ty]);
|
|
3371
3762
|
t.movePoints[_i9].waitTime = 0;
|
|
3763
|
+
|
|
3372
3764
|
if (deleteTime <= 0) {
|
|
3373
3765
|
deleteIndex.push(_i9);
|
|
3374
3766
|
}
|
|
3375
3767
|
}
|
|
3376
3768
|
}
|
|
3769
|
+
|
|
3377
3770
|
deleteIndex.sort(function (a, b) {
|
|
3378
3771
|
return b - a;
|
|
3379
3772
|
});
|
|
3773
|
+
|
|
3380
3774
|
for (var _i10 = 0; _i10 < deleteIndex.length; _i10++) {
|
|
3381
3775
|
t.movePoints.splice(deleteIndex[_i10], 1);
|
|
3382
3776
|
}
|
|
3777
|
+
|
|
3383
3778
|
if (nowMovePoints.length == 0) {
|
|
3384
3779
|
clearInterval(t.moveToTimer);
|
|
3385
3780
|
}
|
|
3386
3781
|
}, 10);
|
|
3387
|
-
}
|
|
3388
|
-
|
|
3782
|
+
} //点位移动动画效果
|
|
3783
|
+
|
|
3389
3784
|
}, {
|
|
3390
3785
|
key: "moveTo",
|
|
3391
3786
|
value: function moveTo(id, lnglat, delay, autoRotation, urlright, urlleft) {
|
|
3392
3787
|
delay = delay || 3;
|
|
3393
3788
|
var t = this,
|
|
3394
|
-
|
|
3789
|
+
timer = 10;
|
|
3395
3790
|
delay = eval(delay) * 1000;
|
|
3396
3791
|
var count = delay / timer,
|
|
3397
|
-
|
|
3792
|
+
gc = this.GM.getGraphic(id);
|
|
3398
3793
|
var s = gc.geometry,
|
|
3399
|
-
|
|
3400
|
-
|
|
3401
|
-
|
|
3402
|
-
|
|
3794
|
+
e = {
|
|
3795
|
+
x: lnglat[0],
|
|
3796
|
+
y: lnglat[1]
|
|
3797
|
+
};
|
|
3798
|
+
|
|
3403
3799
|
if (t.equalsPoint(s, e)) {
|
|
3404
3800
|
return false;
|
|
3405
3801
|
} else {
|
|
3406
3802
|
var ddeg = 0,
|
|
3407
|
-
|
|
3408
|
-
|
|
3803
|
+
url = null; //计算角度,旋转
|
|
3804
|
+
|
|
3409
3805
|
if (autoRotation) {
|
|
3410
3806
|
//自己实现旋转
|
|
3411
3807
|
ddeg = t.rotateDeg(gc.geometry, lnglat);
|
|
3808
|
+
|
|
3412
3809
|
if (urlleft && ddeg < -90 && ddeg > -270) {
|
|
3413
3810
|
ddeg += 180;
|
|
3414
3811
|
url = urlleft;
|
|
3415
3812
|
} else {
|
|
3416
3813
|
url = urlright;
|
|
3417
3814
|
}
|
|
3815
|
+
|
|
3418
3816
|
gc.setStyle(new ol.style.Style({
|
|
3419
3817
|
image: new ol.style.Icon({
|
|
3420
3818
|
src: url,
|
|
3421
3819
|
rotation: Math.PI / 180 * ddeg
|
|
3422
3820
|
})
|
|
3423
3821
|
}));
|
|
3424
|
-
}
|
|
3425
|
-
|
|
3822
|
+
} //拆分延迟移动定位
|
|
3823
|
+
|
|
3824
|
+
|
|
3426
3825
|
var rx = (e.x - s.x) / count,
|
|
3427
|
-
|
|
3826
|
+
ry = (e.y - s.y) / count;
|
|
3428
3827
|
var isHave = false;
|
|
3828
|
+
|
|
3429
3829
|
for (var i = 0; i < t.movePoints.length; i++) {
|
|
3430
3830
|
if (t.movePoints[i].id == id) {
|
|
3431
3831
|
t.movePoints.splice(i, 1, {
|
|
@@ -3438,6 +3838,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3438
3838
|
isHave = true;
|
|
3439
3839
|
}
|
|
3440
3840
|
}
|
|
3841
|
+
|
|
3441
3842
|
if (!isHave) {
|
|
3442
3843
|
t.movePoints.push({
|
|
3443
3844
|
id: id,
|
|
@@ -3448,30 +3849,34 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3448
3849
|
});
|
|
3449
3850
|
}
|
|
3450
3851
|
}
|
|
3451
|
-
}
|
|
3452
|
-
|
|
3852
|
+
} //点位角度旋转(以指向东(右)为0°)
|
|
3853
|
+
|
|
3453
3854
|
}, {
|
|
3454
3855
|
key: "rotateDeg",
|
|
3455
3856
|
value: function rotateDeg(sp, ep) {
|
|
3456
3857
|
var t = this;
|
|
3457
3858
|
var spLngLat = sp;
|
|
3859
|
+
|
|
3458
3860
|
if (Array.isArray(sp)) {
|
|
3459
3861
|
spLngLat = new ol.geom.Point(sp[0], sp[1]);
|
|
3460
3862
|
}
|
|
3863
|
+
|
|
3461
3864
|
var s = t.state.gis.getPixelFromCoordinate(spLngLat),
|
|
3462
|
-
|
|
3463
|
-
|
|
3464
|
-
|
|
3865
|
+
//获取当前点位的经纬度
|
|
3866
|
+
e = t.state.gis.getPixelFromCoordinate(new ol.geom.Point(ep[0], ep[1])),
|
|
3867
|
+
deg = 0;
|
|
3868
|
+
|
|
3465
3869
|
if (e.x != s.x) {
|
|
3466
3870
|
var tan = (e.y - s.y) / (e.x - s.x),
|
|
3467
|
-
|
|
3468
|
-
deg = atan * 360 / (2 * Math.PI);
|
|
3469
|
-
|
|
3871
|
+
atan = Math.atan(tan);
|
|
3872
|
+
deg = atan * 360 / (2 * Math.PI); //degree correction;
|
|
3873
|
+
|
|
3470
3874
|
if (e.x < s.x) {
|
|
3471
3875
|
deg = -deg + 90 + 90;
|
|
3472
3876
|
} else {
|
|
3473
3877
|
deg = -deg;
|
|
3474
3878
|
}
|
|
3879
|
+
|
|
3475
3880
|
deg = -deg;
|
|
3476
3881
|
} else {
|
|
3477
3882
|
var disy = e.y - s.y;
|
|
@@ -3480,15 +3885,16 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3480
3885
|
if (disy == 0) bias = 0;
|
|
3481
3886
|
deg = -bias * 90;
|
|
3482
3887
|
}
|
|
3888
|
+
|
|
3483
3889
|
return deg;
|
|
3484
|
-
}
|
|
3485
|
-
|
|
3890
|
+
} //对比对象数据是否相等
|
|
3891
|
+
|
|
3486
3892
|
}, {
|
|
3487
3893
|
key: "deepEqual",
|
|
3488
3894
|
value: function deepEqual(a, b) {
|
|
3489
3895
|
return _immutable["default"].is(_immutable["default"].fromJS(a), _immutable["default"].fromJS(b));
|
|
3490
|
-
}
|
|
3491
|
-
|
|
3896
|
+
} //数据解析(分析,新增,更新,删除对应的数据)
|
|
3897
|
+
|
|
3492
3898
|
}, {
|
|
3493
3899
|
key: "dataMatch",
|
|
3494
3900
|
value: function dataMatch(oldData, newData, type) {
|
|
@@ -3519,13 +3925,14 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3519
3925
|
updatedData: updatedData,
|
|
3520
3926
|
replacedData: replacedData
|
|
3521
3927
|
};
|
|
3522
|
-
}
|
|
3523
|
-
|
|
3928
|
+
} //处理需要增加图元的数据(避免意外问题)
|
|
3929
|
+
|
|
3524
3930
|
}, {
|
|
3525
3931
|
key: "dealAdd",
|
|
3526
3932
|
value: function dealAdd(ary, ids) {
|
|
3527
3933
|
var ads = [],
|
|
3528
|
-
|
|
3934
|
+
otherupds = [];
|
|
3935
|
+
|
|
3529
3936
|
for (var i = 0; i < ary.length; i++) {
|
|
3530
3937
|
if (ids.indexOf(ary[i].id) > -1) {
|
|
3531
3938
|
otherupds.push(ary[i]);
|
|
@@ -3533,17 +3940,19 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3533
3940
|
ads.push(ary[i]);
|
|
3534
3941
|
}
|
|
3535
3942
|
}
|
|
3943
|
+
|
|
3536
3944
|
return {
|
|
3537
3945
|
ads: ads,
|
|
3538
3946
|
otherupds: otherupds
|
|
3539
3947
|
};
|
|
3540
|
-
}
|
|
3541
|
-
|
|
3948
|
+
} //处理需要更新图元的数据(避免意外问题)
|
|
3949
|
+
|
|
3542
3950
|
}, {
|
|
3543
3951
|
key: "dealUpdate",
|
|
3544
3952
|
value: function dealUpdate(ary, ids) {
|
|
3545
3953
|
var upds = [],
|
|
3546
|
-
|
|
3954
|
+
otherads = [];
|
|
3955
|
+
|
|
3547
3956
|
for (var i = 0; i < ary.length; i++) {
|
|
3548
3957
|
if (ids.indexOf(ary[i].id) > -1) {
|
|
3549
3958
|
upds.push(ary[i]);
|
|
@@ -3551,6 +3960,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3551
3960
|
otherads.push(ary[i]);
|
|
3552
3961
|
}
|
|
3553
3962
|
}
|
|
3963
|
+
|
|
3554
3964
|
return {
|
|
3555
3965
|
upds: upds,
|
|
3556
3966
|
otherads: otherads
|
|
@@ -3568,8 +3978,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3568
3978
|
height: '100%'
|
|
3569
3979
|
}
|
|
3570
3980
|
});
|
|
3571
|
-
}
|
|
3572
|
-
|
|
3981
|
+
} //初始化
|
|
3982
|
+
|
|
3573
3983
|
}, {
|
|
3574
3984
|
key: "componentDidMount",
|
|
3575
3985
|
value: function componentDidMount() {
|
|
@@ -3577,74 +3987,75 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3577
3987
|
t.loadMapComplete.then(function () {
|
|
3578
3988
|
t.init();
|
|
3579
3989
|
});
|
|
3580
|
-
}
|
|
3581
|
-
|
|
3990
|
+
} //已加载组件,收到新的参数时调用
|
|
3991
|
+
|
|
3582
3992
|
}, {
|
|
3583
|
-
key: "
|
|
3584
|
-
value: function
|
|
3585
|
-
var t = this;
|
|
3586
|
-
|
|
3993
|
+
key: "UNSAFE_componentWillReceiveProps",
|
|
3994
|
+
value: function UNSAFE_componentWillReceiveProps(nextProps, prevProps) {
|
|
3995
|
+
var t = this; //点/线旧数据
|
|
3996
|
+
|
|
3587
3997
|
var _t$state2 = t.state,
|
|
3588
|
-
|
|
3589
|
-
|
|
3590
|
-
|
|
3591
|
-
|
|
3592
|
-
|
|
3998
|
+
pointIds = _t$state2.pointIds,
|
|
3999
|
+
lineIds = _t$state2.lineIds,
|
|
4000
|
+
polygonIds = _t$state2.polygonIds,
|
|
4001
|
+
circleIds = _t$state2.circleIds,
|
|
4002
|
+
drawIds = _t$state2.drawIds;
|
|
3593
4003
|
var point = drawIds.point,
|
|
3594
|
-
|
|
3595
|
-
|
|
3596
|
-
|
|
3597
|
-
|
|
3598
|
-
|
|
4004
|
+
polyline = drawIds.polyline,
|
|
4005
|
+
polygon = drawIds.polygon,
|
|
4006
|
+
circle = drawIds.circle,
|
|
4007
|
+
rectangle = drawIds.rectangle; //点/线新数据
|
|
4008
|
+
|
|
3599
4009
|
var _nextProps$mapPoints = nextProps.mapPoints,
|
|
3600
|
-
|
|
3601
|
-
|
|
3602
|
-
|
|
3603
|
-
|
|
3604
|
-
|
|
3605
|
-
|
|
3606
|
-
|
|
3607
|
-
|
|
3608
|
-
|
|
3609
|
-
|
|
3610
|
-
|
|
3611
|
-
|
|
3612
|
-
|
|
3613
|
-
|
|
3614
|
-
|
|
3615
|
-
|
|
3616
|
-
|
|
3617
|
-
|
|
3618
|
-
|
|
3619
|
-
|
|
3620
|
-
|
|
3621
|
-
|
|
3622
|
-
|
|
3623
|
-
|
|
3624
|
-
|
|
3625
|
-
|
|
3626
|
-
|
|
3627
|
-
|
|
3628
|
-
|
|
3629
|
-
|
|
3630
|
-
|
|
3631
|
-
|
|
3632
|
-
|
|
3633
|
-
|
|
3634
|
-
|
|
3635
|
-
|
|
3636
|
-
|
|
3637
|
-
|
|
3638
|
-
if (!t.
|
|
4010
|
+
mapPoints = _nextProps$mapPoints === void 0 ? [] : _nextProps$mapPoints,
|
|
4011
|
+
_nextProps$mapLines = nextProps.mapLines,
|
|
4012
|
+
mapLines = _nextProps$mapLines === void 0 ? [] : _nextProps$mapLines,
|
|
4013
|
+
_nextProps$mapPolygon = nextProps.mapPolygons,
|
|
4014
|
+
mapPolygons = _nextProps$mapPolygon === void 0 ? [] : _nextProps$mapPolygon,
|
|
4015
|
+
_nextProps$mapCircles = nextProps.mapCircles,
|
|
4016
|
+
mapCircles = _nextProps$mapCircles === void 0 ? [] : _nextProps$mapCircles,
|
|
4017
|
+
_nextProps$customized = nextProps.customizedBoundary,
|
|
4018
|
+
customizedBoundary = _nextProps$customized === void 0 ? [] : _nextProps$customized,
|
|
4019
|
+
isOpenTrafficInfo = nextProps.isOpenTrafficInfo,
|
|
4020
|
+
boundaryName = nextProps.boundaryName,
|
|
4021
|
+
heatMapData = nextProps.heatMapData,
|
|
4022
|
+
mapVisiblePoints = nextProps.mapVisiblePoints,
|
|
4023
|
+
setVisiblePoints = nextProps.setVisiblePoints,
|
|
4024
|
+
setCenter = nextProps.setCenter,
|
|
4025
|
+
mapCenter = nextProps.mapCenter,
|
|
4026
|
+
setZoomLevel = nextProps.setZoomLevel,
|
|
4027
|
+
mapZoomLevel = nextProps.mapZoomLevel,
|
|
4028
|
+
setCluster = nextProps.setCluster,
|
|
4029
|
+
mapCluster = nextProps.mapCluster,
|
|
4030
|
+
isRangingTool = nextProps.isRangingTool,
|
|
4031
|
+
mapRangingTool = nextProps.mapRangingTool,
|
|
4032
|
+
isRemove = nextProps.isRemove,
|
|
4033
|
+
mapRemove = nextProps.mapRemove,
|
|
4034
|
+
mapDraw = nextProps.mapDraw,
|
|
4035
|
+
isDraw = nextProps.isDraw,
|
|
4036
|
+
isCloseDraw = nextProps.isCloseDraw,
|
|
4037
|
+
editGraphicId = nextProps.editGraphicId,
|
|
4038
|
+
isDoEdit = nextProps.isDoEdit,
|
|
4039
|
+
isEndEdit = nextProps.isEndEdit,
|
|
4040
|
+
mapPointCollection = nextProps.mapPointCollection,
|
|
4041
|
+
isclearAllPointCollection = nextProps.isclearAllPointCollection,
|
|
4042
|
+
isSetAreaRestriction = nextProps.isSetAreaRestriction,
|
|
4043
|
+
areaRestriction = nextProps.areaRestriction,
|
|
4044
|
+
isClearAreaRestriction = nextProps.isClearAreaRestriction,
|
|
4045
|
+
isClearAll = nextProps.isClearAll,
|
|
4046
|
+
olProps = nextProps.olProps; // 等待地图加载
|
|
4047
|
+
|
|
4048
|
+
if (!t.mapCreated) return;
|
|
3639
4049
|
/*点数据处理
|
|
3640
4050
|
pointData[2]相同的点,执行刷新
|
|
3641
4051
|
pointData[1]的数据在idsForGraphicId中不存在的,执行新增
|
|
3642
4052
|
pointData[0]数据中多余的id,执行删除
|
|
3643
4053
|
*/
|
|
4054
|
+
|
|
3644
4055
|
if (mapPoints instanceof Array && t.props.mapPoints instanceof Array && !t.deepEqual(mapPoints, t.props.mapPoints)) {
|
|
3645
4056
|
var oldMapPoints = t.props.mapPoints;
|
|
3646
|
-
var newMapPoints = mapPoints;
|
|
3647
|
-
|
|
4057
|
+
var newMapPoints = mapPoints; //过滤编辑的图元
|
|
4058
|
+
|
|
3648
4059
|
if (!!t.editId) {
|
|
3649
4060
|
oldMapPoints = t.props.mapPoints.filter(function (item) {
|
|
3650
4061
|
return item.id !== editGraphicId;
|
|
@@ -3653,41 +4064,52 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3653
4064
|
return item.id !== editGraphicId;
|
|
3654
4065
|
});
|
|
3655
4066
|
}
|
|
4067
|
+
|
|
3656
4068
|
var _t$dataMatch = t.dataMatch(oldMapPoints, newMapPoints, 'id'),
|
|
3657
|
-
|
|
3658
|
-
|
|
3659
|
-
|
|
4069
|
+
deletedDataIDs = _t$dataMatch.deletedDataIDs,
|
|
4070
|
+
addedData = _t$dataMatch.addedData,
|
|
4071
|
+
updatedData = _t$dataMatch.updatedData;
|
|
4072
|
+
|
|
3660
4073
|
var _t$dealAdd = t.dealAdd(addedData, [].concat(_toConsumableArray(pointIds), _toConsumableArray(point))),
|
|
3661
|
-
|
|
3662
|
-
|
|
4074
|
+
ads = _t$dealAdd.ads,
|
|
4075
|
+
otherupds = _t$dealAdd.otherupds;
|
|
4076
|
+
|
|
3663
4077
|
var _t$dealUpdate = t.dealUpdate(updatedData, [].concat(_toConsumableArray(pointIds), _toConsumableArray(point))),
|
|
3664
|
-
|
|
3665
|
-
|
|
3666
|
-
|
|
4078
|
+
upds = _t$dealUpdate.upds,
|
|
4079
|
+
otherads = _t$dealUpdate.otherads; //删在增之前,(因为增加后会刷新pointIds的值,造成多删的问题)
|
|
4080
|
+
|
|
4081
|
+
|
|
3667
4082
|
var index = 0;
|
|
4083
|
+
|
|
3668
4084
|
var removeGraphic = function removeGraphic(id) {
|
|
3669
4085
|
t.removeGraphic(id, 'point');
|
|
4086
|
+
|
|
3670
4087
|
if (index < deletedDataIDs.length - 1) {
|
|
3671
4088
|
requestIdleCallback(function () {
|
|
3672
4089
|
return removeGraphic(deletedDataIDs[++index]);
|
|
3673
4090
|
});
|
|
3674
4091
|
}
|
|
3675
4092
|
};
|
|
4093
|
+
|
|
3676
4094
|
if (!(0, _lodash.isEmpty)(deletedDataIDs)) {
|
|
3677
4095
|
removeGraphic(deletedDataIDs[index]);
|
|
3678
|
-
}
|
|
3679
|
-
|
|
3680
|
-
|
|
3681
|
-
//更新
|
|
4096
|
+
} //增加
|
|
4097
|
+
|
|
4098
|
+
|
|
4099
|
+
t.addPoint([].concat(_toConsumableArray(ads), _toConsumableArray(otherads))); //更新
|
|
4100
|
+
|
|
3682
4101
|
t.updatePoint([].concat(_toConsumableArray(upds), _toConsumableArray(otherupds)));
|
|
3683
4102
|
}
|
|
3684
4103
|
/*
|
|
3685
4104
|
线数据处理
|
|
3686
4105
|
先全删除,再新增
|
|
3687
4106
|
*/
|
|
4107
|
+
|
|
4108
|
+
|
|
3688
4109
|
if (mapLines instanceof Array && t.props.mapLines instanceof Array && !t.deepEqual(mapLines, t.props.mapLines)) {
|
|
3689
4110
|
var oldMapLines = t.props.mapLines;
|
|
3690
4111
|
var newMapLines = mapLines;
|
|
4112
|
+
|
|
3691
4113
|
if (!!t.editId) {
|
|
3692
4114
|
oldMapLines = t.props.mapLines.filter(function (item) {
|
|
3693
4115
|
return item.id !== editGraphicId;
|
|
@@ -3696,41 +4118,50 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3696
4118
|
return item.id !== editGraphicId;
|
|
3697
4119
|
});
|
|
3698
4120
|
}
|
|
4121
|
+
|
|
3699
4122
|
var _t$dataMatch2 = t.dataMatch(oldMapLines, newMapLines, 'id'),
|
|
3700
|
-
|
|
3701
|
-
|
|
3702
|
-
|
|
4123
|
+
_deletedDataIDs = _t$dataMatch2.deletedDataIDs,
|
|
4124
|
+
_addedData = _t$dataMatch2.addedData,
|
|
4125
|
+
_updatedData = _t$dataMatch2.updatedData;
|
|
4126
|
+
|
|
3703
4127
|
var _t$dealAdd2 = t.dealAdd(_addedData, [].concat(_toConsumableArray(lineIds), _toConsumableArray(polyline))),
|
|
3704
|
-
|
|
3705
|
-
|
|
4128
|
+
_ads = _t$dealAdd2.ads,
|
|
4129
|
+
_otherupds = _t$dealAdd2.otherupds;
|
|
4130
|
+
|
|
3706
4131
|
var _t$dealUpdate2 = t.dealUpdate(_updatedData, [].concat(_toConsumableArray(lineIds), _toConsumableArray(polyline))),
|
|
3707
|
-
|
|
3708
|
-
|
|
3709
|
-
|
|
4132
|
+
_upds = _t$dealUpdate2.upds,
|
|
4133
|
+
_otherads = _t$dealUpdate2.otherads; //删在增之前,(因为增加后会刷新pointIds的值,造成多删的问题)
|
|
4134
|
+
|
|
4135
|
+
|
|
3710
4136
|
var _iterator = _createForOfIteratorHelper(_deletedDataIDs),
|
|
3711
|
-
|
|
4137
|
+
_step;
|
|
4138
|
+
|
|
3712
4139
|
try {
|
|
3713
4140
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
3714
4141
|
var id = _step.value;
|
|
3715
4142
|
t.removeGraphic(id, 'line');
|
|
3716
|
-
}
|
|
3717
|
-
|
|
4143
|
+
} //增加
|
|
4144
|
+
|
|
3718
4145
|
} catch (err) {
|
|
3719
4146
|
_iterator.e(err);
|
|
3720
4147
|
} finally {
|
|
3721
4148
|
_iterator.f();
|
|
3722
4149
|
}
|
|
3723
|
-
|
|
3724
|
-
//更新
|
|
4150
|
+
|
|
4151
|
+
t.addLine([].concat(_toConsumableArray(_ads), _toConsumableArray(_otherads))); //更新
|
|
4152
|
+
|
|
3725
4153
|
t.updateLine([].concat(_toConsumableArray(_upds), _toConsumableArray(_otherupds)));
|
|
3726
4154
|
}
|
|
3727
4155
|
/*
|
|
3728
4156
|
面数据处理
|
|
3729
4157
|
先全删除,再新增
|
|
3730
4158
|
*/
|
|
4159
|
+
|
|
4160
|
+
|
|
3731
4161
|
if (mapPolygons instanceof Array && t.props.mapPolygons instanceof Array && !t.deepEqual(mapPolygons, t.props.mapPolygons)) {
|
|
3732
4162
|
var oldMapPolygons = t.props.mapPolygons;
|
|
3733
4163
|
var newMapPolygons = mapPolygons;
|
|
4164
|
+
|
|
3734
4165
|
if (!!t.editId) {
|
|
3735
4166
|
oldMapPolygons = t.props.mapPolygons.filter(function (item) {
|
|
3736
4167
|
return item.id !== editGraphicId;
|
|
@@ -3739,41 +4170,50 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3739
4170
|
return item.id !== editGraphicId;
|
|
3740
4171
|
});
|
|
3741
4172
|
}
|
|
4173
|
+
|
|
3742
4174
|
var _t$dataMatch3 = t.dataMatch(oldMapPolygons, newMapPolygons, 'id'),
|
|
3743
|
-
|
|
3744
|
-
|
|
3745
|
-
|
|
4175
|
+
_deletedDataIDs2 = _t$dataMatch3.deletedDataIDs,
|
|
4176
|
+
_addedData2 = _t$dataMatch3.addedData,
|
|
4177
|
+
_updatedData2 = _t$dataMatch3.updatedData;
|
|
4178
|
+
|
|
3746
4179
|
var _t$dealAdd3 = t.dealAdd(_addedData2, [].concat(_toConsumableArray(rectangle), _toConsumableArray(polygon), _toConsumableArray(polygonIds))),
|
|
3747
|
-
|
|
3748
|
-
|
|
4180
|
+
_ads2 = _t$dealAdd3.ads,
|
|
4181
|
+
_otherupds2 = _t$dealAdd3.otherupds;
|
|
4182
|
+
|
|
3749
4183
|
var _t$dealUpdate3 = t.dealUpdate(_updatedData2, [].concat(_toConsumableArray(rectangle), _toConsumableArray(polygon), _toConsumableArray(polygonIds))),
|
|
3750
|
-
|
|
3751
|
-
|
|
3752
|
-
|
|
4184
|
+
_upds2 = _t$dealUpdate3.upds,
|
|
4185
|
+
_otherads2 = _t$dealUpdate3.otherads; //删在增之前,(因为增加后会刷新pointIds的值,造成多删的问题)
|
|
4186
|
+
|
|
4187
|
+
|
|
3753
4188
|
var _iterator2 = _createForOfIteratorHelper(_deletedDataIDs2),
|
|
3754
|
-
|
|
4189
|
+
_step2;
|
|
4190
|
+
|
|
3755
4191
|
try {
|
|
3756
4192
|
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
3757
4193
|
var _id = _step2.value;
|
|
3758
4194
|
t.removeGraphic(_id, 'polygon');
|
|
3759
|
-
}
|
|
3760
|
-
|
|
4195
|
+
} //增加
|
|
4196
|
+
|
|
3761
4197
|
} catch (err) {
|
|
3762
4198
|
_iterator2.e(err);
|
|
3763
4199
|
} finally {
|
|
3764
4200
|
_iterator2.f();
|
|
3765
4201
|
}
|
|
3766
|
-
|
|
3767
|
-
//更新
|
|
4202
|
+
|
|
4203
|
+
t.addPolygon([].concat(_toConsumableArray(_ads2), _toConsumableArray(_otherads2))); //更新
|
|
4204
|
+
|
|
3768
4205
|
t.updatePolygon([].concat(_toConsumableArray(_upds2), _toConsumableArray(_otherupds2)));
|
|
3769
4206
|
}
|
|
3770
4207
|
/*
|
|
3771
4208
|
圆数据处理
|
|
3772
4209
|
先全删除,再新增
|
|
3773
4210
|
*/
|
|
4211
|
+
|
|
4212
|
+
|
|
3774
4213
|
if (mapCircles instanceof Array && t.props.mapCircles instanceof Array && !t.deepEqual(mapCircles, t.props.mapCircles)) {
|
|
3775
4214
|
var oldMapCircles = t.props.mapCircles;
|
|
3776
4215
|
var newMapCircles = mapCircles;
|
|
4216
|
+
|
|
3777
4217
|
if (!!t.editId) {
|
|
3778
4218
|
oldMapCircles = t.props.mapCircles.filter(function (item) {
|
|
3779
4219
|
return item.id !== editGraphicId;
|
|
@@ -3782,121 +4222,147 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3782
4222
|
return item.id !== editGraphicId;
|
|
3783
4223
|
});
|
|
3784
4224
|
}
|
|
4225
|
+
|
|
3785
4226
|
var _t$dataMatch4 = t.dataMatch(oldMapCircles, newMapCircles, 'id'),
|
|
3786
|
-
|
|
3787
|
-
|
|
3788
|
-
|
|
4227
|
+
_deletedDataIDs3 = _t$dataMatch4.deletedDataIDs,
|
|
4228
|
+
_addedData3 = _t$dataMatch4.addedData,
|
|
4229
|
+
_updatedData3 = _t$dataMatch4.updatedData;
|
|
4230
|
+
|
|
3789
4231
|
var _t$dealAdd4 = t.dealAdd(_addedData3, [].concat(_toConsumableArray(circleIds), _toConsumableArray(circle))),
|
|
3790
|
-
|
|
3791
|
-
|
|
4232
|
+
_ads3 = _t$dealAdd4.ads,
|
|
4233
|
+
_otherupds3 = _t$dealAdd4.otherupds;
|
|
4234
|
+
|
|
3792
4235
|
var _t$dealUpdate4 = t.dealUpdate(_updatedData3, [].concat(_toConsumableArray(circleIds), _toConsumableArray(circle))),
|
|
3793
|
-
|
|
3794
|
-
|
|
3795
|
-
|
|
4236
|
+
_upds3 = _t$dealUpdate4.upds,
|
|
4237
|
+
_otherads3 = _t$dealUpdate4.otherads; //删在增之前,(因为增加后会刷新pointIds的值,造成多删的问题)
|
|
4238
|
+
|
|
4239
|
+
|
|
3796
4240
|
var _iterator3 = _createForOfIteratorHelper(_deletedDataIDs3),
|
|
3797
|
-
|
|
4241
|
+
_step3;
|
|
4242
|
+
|
|
3798
4243
|
try {
|
|
3799
4244
|
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
|
|
3800
4245
|
var _id2 = _step3.value;
|
|
3801
4246
|
t.removeGraphic(_id2, 'circle');
|
|
3802
|
-
}
|
|
3803
|
-
|
|
4247
|
+
} //增加
|
|
4248
|
+
|
|
3804
4249
|
} catch (err) {
|
|
3805
4250
|
_iterator3.e(err);
|
|
3806
4251
|
} finally {
|
|
3807
4252
|
_iterator3.f();
|
|
3808
4253
|
}
|
|
3809
|
-
|
|
3810
|
-
//更新
|
|
4254
|
+
|
|
4255
|
+
t.addCircle([].concat(_toConsumableArray(_ads3), _toConsumableArray(_otherads3))); //更新
|
|
4256
|
+
|
|
3811
4257
|
t.updateCircle([].concat(_toConsumableArray(_upds3), _toConsumableArray(_otherupds3)));
|
|
3812
|
-
}
|
|
3813
|
-
|
|
4258
|
+
} //图元编辑调用
|
|
4259
|
+
|
|
4260
|
+
|
|
3814
4261
|
if (typeof isDoEdit == 'boolean' && isDoEdit || isDoEdit && isDoEdit !== t.props.isDoEdit) {
|
|
3815
4262
|
t.doEdit(editGraphicId);
|
|
3816
|
-
}
|
|
3817
|
-
|
|
4263
|
+
} // 获取热力图
|
|
4264
|
+
|
|
4265
|
+
|
|
3818
4266
|
if (heatMapData && heatMapData.data && !t.deepEqual(heatMapData, t.props.heatMapData)) {
|
|
3819
4267
|
t.heatMapOverlay(heatMapData);
|
|
3820
4268
|
} else if (!t.deepEqual(heatMapData, t.props.heatMapData)) {
|
|
3821
4269
|
t.clearHeatMap(heatMapData);
|
|
3822
|
-
}
|
|
3823
|
-
|
|
4270
|
+
} //清空地图
|
|
4271
|
+
|
|
4272
|
+
|
|
3824
4273
|
if (typeof isClearAll == 'boolean' && isClearAll || isClearAll && isClearAll !== t.props.isClearAll) {
|
|
3825
4274
|
t.clearAll();
|
|
3826
|
-
}
|
|
3827
|
-
|
|
4275
|
+
} //测距工具调用
|
|
4276
|
+
|
|
4277
|
+
|
|
3828
4278
|
if (typeof isRangingTool == 'boolean' && isRangingTool || isRangingTool && isRangingTool !== t.props.isRangingTool) {
|
|
3829
4279
|
t.vtxRangingTool(mapRangingTool);
|
|
3830
4280
|
}
|
|
3831
4281
|
/*设置指定图元展示*/
|
|
4282
|
+
|
|
4283
|
+
|
|
3832
4284
|
if (typeof setVisiblePoints == 'boolean' && setVisiblePoints || setVisiblePoints && setVisiblePoints !== t.props.setVisiblePoints) {
|
|
3833
4285
|
t.setVisiblePoints(mapVisiblePoints);
|
|
3834
|
-
}
|
|
3835
|
-
//设置中心点
|
|
4286
|
+
} //设置中心点
|
|
3836
4287
|
// if ((typeof (setCenter) == 'boolean' && setCenter) || (setCenter && setCenter !== t.props.setCenter)) {
|
|
3837
4288
|
// if (!(t.getCurrentCenter().lng == mapCenter[0] && t.getCurrentCenter().lat == mapCenter[1])) {
|
|
3838
4289
|
// t.setCenter(mapCenter);
|
|
3839
4290
|
// }
|
|
3840
4291
|
// }
|
|
4292
|
+
|
|
4293
|
+
|
|
3841
4294
|
if (nextProps.mapCenter && nextProps.mapCenter.length > 0 && JSON.stringify(nextProps.mapCenter) !== JSON.stringify(this.props.mapCenter)) {
|
|
3842
4295
|
t.setCenter(mapCenter);
|
|
3843
|
-
}
|
|
3844
|
-
|
|
4296
|
+
} //设置点聚合
|
|
4297
|
+
|
|
4298
|
+
|
|
3845
4299
|
if (typeof setCluster == 'boolean' && setCluster || setCluster && setCluster !== t.props.setCluster) {
|
|
3846
4300
|
t.cluster(mapCluster);
|
|
3847
4301
|
}
|
|
4302
|
+
|
|
3848
4303
|
if (!setCluster && setCluster !== t.props.setCluster) {
|
|
3849
4304
|
t.clearCluster(mapCluster);
|
|
3850
|
-
}
|
|
3851
|
-
|
|
4305
|
+
} //图元编辑调用
|
|
4306
|
+
|
|
4307
|
+
|
|
3852
4308
|
if (typeof isDoEdit == 'boolean' && isDoEdit || isDoEdit && isDoEdit !== t.props.isDoEdit) {
|
|
3853
4309
|
t.doEdit(editGraphicId);
|
|
3854
|
-
}
|
|
3855
|
-
|
|
4310
|
+
} //关闭图元编辑
|
|
4311
|
+
|
|
4312
|
+
|
|
3856
4313
|
if (typeof isEndEdit == 'boolean' && isEndEdit || isEndEdit && isEndEdit !== t.props.isEndEdit) {
|
|
3857
4314
|
t.endEdit();
|
|
3858
|
-
}
|
|
3859
|
-
|
|
4315
|
+
} //绘制图元
|
|
4316
|
+
|
|
4317
|
+
|
|
3860
4318
|
if (typeof isDraw == 'boolean' && isDraw || isDraw && isDraw !== t.props.isDraw) {
|
|
3861
4319
|
t.draw(mapDraw);
|
|
3862
|
-
}
|
|
3863
|
-
|
|
4320
|
+
} //关闭绘制
|
|
4321
|
+
|
|
4322
|
+
|
|
3864
4323
|
if (typeof isCloseDraw == 'boolean' && isCloseDraw || isCloseDraw && isCloseDraw !== t.props.isCloseDraw) {
|
|
3865
4324
|
t.closeDraw();
|
|
3866
|
-
}
|
|
3867
|
-
|
|
4325
|
+
} //单独删除操作
|
|
4326
|
+
|
|
4327
|
+
|
|
3868
4328
|
if (typeof isRemove == 'boolean' && isRemove || isRemove && isRemove !== t.props.isRemove) {
|
|
3869
4329
|
mapRemove.map(function (item, index) {
|
|
3870
4330
|
t.removeGraphic(item.id, item.type);
|
|
3871
4331
|
});
|
|
3872
|
-
}
|
|
3873
|
-
|
|
4332
|
+
} //设置区域限制
|
|
4333
|
+
|
|
4334
|
+
|
|
3874
4335
|
if (typeof isSetAreaRestriction == 'boolean' && isSetAreaRestriction || isSetAreaRestriction && isSetAreaRestriction !== t.props.isSetAreaRestriction && areaRestriction && !!areaRestriction[0] && !!areaRestriction[1]) {
|
|
3875
4336
|
t.setAreaRestriction(areaRestriction);
|
|
3876
|
-
}
|
|
3877
|
-
|
|
4337
|
+
} //关闭区域限制
|
|
4338
|
+
|
|
4339
|
+
|
|
3878
4340
|
if (typeof isClearAreaRestriction == 'boolean' && isClearAreaRestriction || isClearAreaRestriction && isClearAreaRestriction !== t.props.isClearAreaRestriction) {
|
|
3879
4341
|
t.clearAreaRestriction();
|
|
3880
|
-
}
|
|
3881
|
-
|
|
4342
|
+
} // 设置地图层级
|
|
4343
|
+
|
|
4344
|
+
|
|
3882
4345
|
if (typeof setZoomLevel == 'boolean' && setZoomLevel || setZoomLevel && setZoomLevel !== t.props.setZoomLevel) {
|
|
3883
4346
|
t.setZoomLevel(mapZoomLevel);
|
|
3884
|
-
}
|
|
3885
|
-
|
|
4347
|
+
} // 比例尺控件位置改变
|
|
4348
|
+
|
|
4349
|
+
|
|
3886
4350
|
if (nextProps.showControl && JSON.stringify(nextProps.showControl) != JSON.stringify(t.props.showControl)) {
|
|
3887
4351
|
t.showControl(nextProps);
|
|
3888
|
-
}
|
|
3889
|
-
|
|
4352
|
+
} // 更新需要加载的图层
|
|
4353
|
+
|
|
4354
|
+
|
|
3890
4355
|
if (nextProps.olProps && JSON.stringify(nextProps.olProps) !== JSON.stringify(t.props.olProps)) {
|
|
3891
4356
|
t.loadLayers(nextProps.olProps.olCoverage, t.props.olProps.olCoverage);
|
|
3892
4357
|
}
|
|
3893
|
-
}
|
|
3894
|
-
// 地图事件
|
|
4358
|
+
} // 地图事件
|
|
3895
4359
|
//地图点击事件
|
|
4360
|
+
|
|
3896
4361
|
}, {
|
|
3897
4362
|
key: "clickMap",
|
|
3898
4363
|
value: function clickMap(e) {
|
|
3899
4364
|
var t = this;
|
|
4365
|
+
|
|
3900
4366
|
if (typeof t.props.clickMap === 'function') {
|
|
3901
4367
|
var obj = t.getMapExtent();
|
|
3902
4368
|
obj.e = e;
|
|
@@ -3914,17 +4380,20 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3914
4380
|
temp.push(t.getFeatureInfo(e, t.state.gis.getView(), item.layer.getSource()));
|
|
3915
4381
|
}
|
|
3916
4382
|
});
|
|
4383
|
+
|
|
3917
4384
|
if (temp.length) {
|
|
3918
4385
|
obj.features = temp;
|
|
3919
4386
|
}
|
|
4387
|
+
|
|
3920
4388
|
t.props.clickMap(obj);
|
|
3921
4389
|
}
|
|
3922
|
-
}
|
|
3923
|
-
|
|
4390
|
+
} // 获取geoServer要素
|
|
4391
|
+
|
|
3924
4392
|
}, {
|
|
3925
4393
|
key: "getFeatureInfo",
|
|
3926
4394
|
value: function getFeatureInfo(event, view, source) {
|
|
3927
|
-
var
|
|
4395
|
+
var _this9 = this;
|
|
4396
|
+
|
|
3928
4397
|
var sourceParam = source.getParams();
|
|
3929
4398
|
var url = source.getFeatureInfoUrl(event.coordinate, view.getResolution(), view.getProjection(), {
|
|
3930
4399
|
cql_filter: sourceParam === null || sourceParam === void 0 ? void 0 : sourceParam.cql_filter,
|
|
@@ -3933,41 +4402,49 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3933
4402
|
REQUEST: "GetFeatureInfo",
|
|
3934
4403
|
FEATURE_COUNT: 50
|
|
3935
4404
|
});
|
|
4405
|
+
|
|
3936
4406
|
var _this$formatUrl2 = this.formatUrl(url),
|
|
3937
|
-
|
|
3938
|
-
|
|
3939
|
-
// let temp = param.BBOX.split(",");
|
|
4407
|
+
param = _this$formatUrl2.param,
|
|
4408
|
+
address = _this$formatUrl2.address; // let temp = param.BBOX.split(",");
|
|
3940
4409
|
// let BBOX = [temp[1],temp[0],temp[3],temp[2]].join(",");
|
|
3941
4410
|
// param.BBOX = BBOX;
|
|
4411
|
+
|
|
4412
|
+
|
|
3942
4413
|
param.QUERY_LAYERS = param.LAYERS;
|
|
3943
4414
|
var temp = [];
|
|
4415
|
+
|
|
3944
4416
|
for (var key in param) {
|
|
3945
4417
|
temp.push("".concat(key, "=").concat(param[key]));
|
|
3946
4418
|
}
|
|
4419
|
+
|
|
3947
4420
|
address += "?".concat(temp.join("&"));
|
|
3948
4421
|
var geoJsonFormat = new ol.format.GeoJSON();
|
|
3949
4422
|
return fetch(address).then(function (res) {
|
|
3950
4423
|
return res.json();
|
|
3951
4424
|
}).then(function (data) {
|
|
3952
4425
|
var _data$features;
|
|
4426
|
+
|
|
3953
4427
|
var features = [];
|
|
4428
|
+
|
|
3954
4429
|
if (data !== null && data !== void 0 && (_data$features = data.features) !== null && _data$features !== void 0 && _data$features.length) {
|
|
3955
4430
|
features = geoJsonFormat.readFeatures(data);
|
|
3956
4431
|
features.map(function (item) {
|
|
3957
|
-
item.key =
|
|
4432
|
+
item.key = _this9 === null || _this9 === void 0 ? void 0 : _this9.key;
|
|
3958
4433
|
});
|
|
3959
4434
|
}
|
|
4435
|
+
|
|
3960
4436
|
return features;
|
|
3961
4437
|
})["catch"](function () {
|
|
3962
4438
|
return [];
|
|
3963
4439
|
});
|
|
3964
|
-
}
|
|
3965
|
-
|
|
4440
|
+
} // 要素鼠标悬浮事件
|
|
4441
|
+
|
|
3966
4442
|
}, {
|
|
3967
4443
|
key: "mouseOverGraphic",
|
|
3968
4444
|
value: function mouseOverGraphic(id, e) {
|
|
3969
4445
|
var t = this;
|
|
3970
4446
|
if (t.state.editId == id) return false;
|
|
4447
|
+
|
|
3971
4448
|
if (typeof t.props.mouseOverGraphic === 'function') {
|
|
3972
4449
|
var obj = {
|
|
3973
4450
|
e: e,
|
|
@@ -3979,14 +4456,15 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3979
4456
|
};
|
|
3980
4457
|
t.props.mouseOverGraphic(obj);
|
|
3981
4458
|
}
|
|
3982
|
-
}
|
|
3983
|
-
|
|
4459
|
+
} // 要素鼠标移开事件
|
|
4460
|
+
|
|
3984
4461
|
}, {
|
|
3985
4462
|
key: "mouseOutGraphic",
|
|
3986
4463
|
value: function mouseOutGraphic(id, e) {
|
|
3987
|
-
var t = this;
|
|
3988
|
-
|
|
4464
|
+
var t = this; //编辑中的图元关闭其他事件返回
|
|
4465
|
+
|
|
3989
4466
|
if (t.state.editId == id) return false;
|
|
4467
|
+
|
|
3990
4468
|
if (typeof t.props.mouseOutGraphic === 'function') {
|
|
3991
4469
|
var obj = {
|
|
3992
4470
|
e: e,
|
|
@@ -3998,30 +4476,32 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
3998
4476
|
};
|
|
3999
4477
|
t.props.mouseOutGraphic(obj);
|
|
4000
4478
|
}
|
|
4001
|
-
}
|
|
4002
|
-
|
|
4479
|
+
} //地图拖动之前事件
|
|
4480
|
+
|
|
4003
4481
|
}, {
|
|
4004
4482
|
key: "dragMapStart",
|
|
4005
4483
|
value: function dragMapStart(e) {
|
|
4006
4484
|
var t = this;
|
|
4485
|
+
|
|
4007
4486
|
if (typeof t.props.dragMapStart === 'function') {
|
|
4008
4487
|
var obj = t.getMapExtent();
|
|
4009
4488
|
obj.e = e;
|
|
4010
4489
|
t.props.dragMapStart(obj);
|
|
4011
4490
|
}
|
|
4012
|
-
}
|
|
4013
|
-
|
|
4491
|
+
} //地图拖动结束后事件
|
|
4492
|
+
|
|
4014
4493
|
}, {
|
|
4015
4494
|
key: "dragMapEnd",
|
|
4016
4495
|
value: function dragMapEnd(e) {
|
|
4017
4496
|
var t = this;
|
|
4497
|
+
|
|
4018
4498
|
if (typeof t.props.dragMapEnd === 'function') {
|
|
4019
4499
|
var obj = t.getMapExtent();
|
|
4020
4500
|
obj.e = e;
|
|
4021
4501
|
t.props.dragMapEnd(obj);
|
|
4022
4502
|
}
|
|
4023
|
-
}
|
|
4024
|
-
|
|
4503
|
+
} //热力图
|
|
4504
|
+
|
|
4025
4505
|
}, {
|
|
4026
4506
|
key: "heatMapOverlay",
|
|
4027
4507
|
value: function heatMapOverlay() {
|
|
@@ -4034,23 +4514,28 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
4034
4514
|
opacity: 0.7,
|
|
4035
4515
|
gradient: ['#00f', '#0ff', '#0f0', '#ff0', '#f00']
|
|
4036
4516
|
};
|
|
4517
|
+
|
|
4037
4518
|
if (d.config) {
|
|
4038
4519
|
cg = _objectSpread(_objectSpread({}, cg), d.config);
|
|
4039
4520
|
}
|
|
4521
|
+
|
|
4040
4522
|
var gradient = [];
|
|
4523
|
+
|
|
4041
4524
|
if (cg.gradient) {
|
|
4042
4525
|
for (var key in cg.gradient) {
|
|
4043
4526
|
gradient.push(cg.gradient[key]);
|
|
4044
4527
|
}
|
|
4528
|
+
|
|
4045
4529
|
cg.gradient = gradient;
|
|
4046
|
-
}
|
|
4047
|
-
// if(d.data){
|
|
4530
|
+
} // if(d.data){
|
|
4048
4531
|
// t.state.pointIds = [];
|
|
4049
4532
|
// t.pointLayers.map(item => {
|
|
4050
4533
|
// t.state.gis.removeLayer(item.layer);
|
|
4051
4534
|
// t.pointLayers=[];
|
|
4052
4535
|
// })
|
|
4053
4536
|
// }
|
|
4537
|
+
|
|
4538
|
+
|
|
4054
4539
|
var heatData = {
|
|
4055
4540
|
type: 'FeatureCollection',
|
|
4056
4541
|
features: (d.data || []).map(function (item) {
|
|
@@ -4089,63 +4574,69 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
4089
4574
|
if (t.heatmap) t.state.gis.removeLayer(t.heatmap);
|
|
4090
4575
|
t.heatmap = null;
|
|
4091
4576
|
t.refresh();
|
|
4092
|
-
}
|
|
4093
|
-
|
|
4577
|
+
} //地图移动之前事件
|
|
4578
|
+
|
|
4094
4579
|
}, {
|
|
4095
4580
|
key: "moveStart",
|
|
4096
4581
|
value: function moveStart(e) {
|
|
4097
4582
|
var t = this;
|
|
4583
|
+
|
|
4098
4584
|
if (typeof t.props.moveStart === 'function') {
|
|
4099
4585
|
var obj = t.getMapExtent();
|
|
4100
4586
|
obj.e = e;
|
|
4101
4587
|
t.props.moveStart(obj);
|
|
4102
4588
|
}
|
|
4103
|
-
}
|
|
4104
|
-
|
|
4589
|
+
} //地图移动结束后事件
|
|
4590
|
+
|
|
4105
4591
|
}, {
|
|
4106
4592
|
key: "moveEnd",
|
|
4107
4593
|
value: function moveEnd(e) {
|
|
4108
4594
|
var t = this;
|
|
4595
|
+
|
|
4109
4596
|
if (typeof t.props.moveEnd === 'function') {
|
|
4110
4597
|
var obj = t.getMapExtent();
|
|
4111
4598
|
obj.e = e;
|
|
4112
4599
|
t.props.moveEnd(obj);
|
|
4113
4600
|
}
|
|
4114
|
-
}
|
|
4115
|
-
|
|
4601
|
+
} //地图更改缩放级别开始时触发触发此事件
|
|
4602
|
+
|
|
4116
4603
|
}, {
|
|
4117
4604
|
key: "zoomStart",
|
|
4118
4605
|
value: function zoomStart(e) {
|
|
4119
4606
|
var t = this;
|
|
4607
|
+
|
|
4120
4608
|
if (typeof t.props.zoomStart === 'function') {
|
|
4121
4609
|
var obj = t.getMapExtent();
|
|
4122
4610
|
obj.e = e;
|
|
4123
4611
|
t.props.zoomStart(obj);
|
|
4124
4612
|
}
|
|
4125
|
-
}
|
|
4126
|
-
|
|
4613
|
+
} //地图更改缩放级别结束时触发触发此事件
|
|
4614
|
+
|
|
4127
4615
|
}, {
|
|
4128
4616
|
key: "zoomEnd",
|
|
4129
4617
|
value: function zoomEnd(e) {
|
|
4130
4618
|
var t = this;
|
|
4619
|
+
|
|
4131
4620
|
if (typeof t.props.zoomEnd === 'function') {
|
|
4132
4621
|
var obj = t.getMapExtent();
|
|
4133
4622
|
obj.e = e;
|
|
4134
4623
|
t.props.zoomEnd(obj);
|
|
4135
4624
|
}
|
|
4136
|
-
}
|
|
4137
|
-
|
|
4625
|
+
} // 图元点击事件
|
|
4626
|
+
|
|
4138
4627
|
}, {
|
|
4139
4628
|
key: "clickGraphic",
|
|
4140
4629
|
value: function clickGraphic(id, e) {
|
|
4141
4630
|
var target = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
4142
|
-
var t = this;
|
|
4143
|
-
|
|
4631
|
+
var t = this; //编辑中的图元关闭其他事件返回
|
|
4632
|
+
|
|
4144
4633
|
if (t.editId == id) return false;
|
|
4634
|
+
|
|
4145
4635
|
if (typeof t.props.clickGraphic === 'function') {
|
|
4146
4636
|
var _e$pixel = _slicedToArray(e.pixel, 2),
|
|
4147
|
-
|
|
4148
|
-
|
|
4637
|
+
clientX = _e$pixel[0],
|
|
4638
|
+
clientY = _e$pixel[1];
|
|
4639
|
+
|
|
4149
4640
|
var param = t.getGraphic(id, clientX, clientY);
|
|
4150
4641
|
var obj = {
|
|
4151
4642
|
param: param,
|
|
@@ -4169,46 +4660,58 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
|
|
|
4169
4660
|
value: function componentWillUnmount() {
|
|
4170
4661
|
//关闭moveTo定时
|
|
4171
4662
|
var t = this;
|
|
4663
|
+
|
|
4172
4664
|
if (t.moveToTimer) {
|
|
4173
4665
|
clearInterval(t.moveToTimer);
|
|
4174
|
-
}
|
|
4175
|
-
|
|
4666
|
+
} //关闭animation定时
|
|
4667
|
+
|
|
4668
|
+
|
|
4176
4669
|
for (var j in t.animTimer) {
|
|
4177
4670
|
if (t.animTimer[j]) {
|
|
4178
4671
|
clearInterval(t.animTimer[j]);
|
|
4179
4672
|
}
|
|
4180
4673
|
}
|
|
4674
|
+
|
|
4181
4675
|
window.VtxMap && (window.VtxMap[t.state.mapId] = null);
|
|
4182
4676
|
}
|
|
4183
4677
|
}]);
|
|
4678
|
+
|
|
4184
4679
|
return OlMap;
|
|
4185
4680
|
}(_react["default"].Component);
|
|
4186
|
-
|
|
4681
|
+
|
|
4682
|
+
var _default = OlMap;
|
|
4683
|
+
exports["default"] = _default;
|
|
4684
|
+
|
|
4187
4685
|
var Popup = /*#__PURE__*/function (_React$Component2) {
|
|
4188
4686
|
_inherits(Popup, _React$Component2);
|
|
4687
|
+
|
|
4189
4688
|
var _super2 = _createSuper(Popup);
|
|
4689
|
+
|
|
4190
4690
|
function Popup(props) {
|
|
4191
|
-
var
|
|
4691
|
+
var _this10;
|
|
4692
|
+
|
|
4192
4693
|
_classCallCheck(this, Popup);
|
|
4193
|
-
_this9 = _super2.call(this);
|
|
4194
|
-
_this9.map = props.map;
|
|
4195
|
-
_this9.position = props.position;
|
|
4196
|
-
_this9.overlay = null;
|
|
4197
|
-
_this9.container = null;
|
|
4198
|
-
_this9.innerHTML = props.innerHTML;
|
|
4199
|
-
_this9.closeble = props.close;
|
|
4200
|
-
return _this9;
|
|
4201
|
-
}
|
|
4202
4694
|
|
|
4203
|
-
|
|
4695
|
+
_this10 = _super2.call(this);
|
|
4696
|
+
_this10.map = props.map;
|
|
4697
|
+
_this10.position = props.position;
|
|
4698
|
+
_this10.overlay = null;
|
|
4699
|
+
_this10.container = null;
|
|
4700
|
+
_this10.innerHTML = props.innerHTML;
|
|
4701
|
+
_this10.closeble = props.close;
|
|
4702
|
+
return _this10;
|
|
4703
|
+
} // 弹出框
|
|
4704
|
+
|
|
4705
|
+
|
|
4204
4706
|
_createClass(Popup, [{
|
|
4205
4707
|
key: "showPopup",
|
|
4206
4708
|
value: function showPopup() {
|
|
4207
4709
|
var t = this;
|
|
4208
|
-
this.removePopup();
|
|
4209
|
-
|
|
4710
|
+
this.removePopup(); // 获取弹出层DOM
|
|
4711
|
+
|
|
4210
4712
|
t.container = document.createElement("div");
|
|
4211
4713
|
t.container['className'] = "ol-popup";
|
|
4714
|
+
|
|
4212
4715
|
if (t.closeble) {
|
|
4213
4716
|
var close = document.createElement("a");
|
|
4214
4717
|
close['className'] = "ol-popup-closer";
|
|
@@ -4217,8 +4720,10 @@ var Popup = /*#__PURE__*/function (_React$Component2) {
|
|
|
4217
4720
|
});
|
|
4218
4721
|
t.container.appendChild(close);
|
|
4219
4722
|
}
|
|
4723
|
+
|
|
4220
4724
|
var content = document.createElement("div");
|
|
4221
4725
|
t.container.appendChild(content);
|
|
4726
|
+
|
|
4222
4727
|
if (t.overlay) {} else {
|
|
4223
4728
|
// 创建Overlay弹出层绑定DOM
|
|
4224
4729
|
t.overlay = new ol.Overlay({
|
|
@@ -4228,85 +4733,100 @@ var Popup = /*#__PURE__*/function (_React$Component2) {
|
|
|
4228
4733
|
duration: 250
|
|
4229
4734
|
}
|
|
4230
4735
|
}
|
|
4231
|
-
});
|
|
4232
|
-
|
|
4736
|
+
}); // 添加到map
|
|
4737
|
+
|
|
4233
4738
|
t.map.addOverlay(t.overlay);
|
|
4234
|
-
}
|
|
4235
|
-
|
|
4236
|
-
|
|
4237
|
-
// 设置弹出层位置即可出现
|
|
4739
|
+
} // 弹出层内容
|
|
4740
|
+
|
|
4741
|
+
|
|
4742
|
+
content.innerHTML = t.innerHTML; // 设置弹出层位置即可出现
|
|
4743
|
+
|
|
4238
4744
|
t.overlay.setPosition(t.position);
|
|
4239
|
-
}
|
|
4240
|
-
|
|
4745
|
+
} // 清除弹出框
|
|
4746
|
+
|
|
4241
4747
|
}, {
|
|
4242
4748
|
key: "removePopup",
|
|
4243
4749
|
value: function removePopup() {
|
|
4244
4750
|
if (this.overlay) {
|
|
4245
|
-
this.container.remove();
|
|
4246
|
-
|
|
4751
|
+
this.container.remove(); // 设置位置undefined可达到隐藏清除弹出框
|
|
4752
|
+
|
|
4247
4753
|
this.overlay.setPosition(undefined);
|
|
4248
4754
|
this.overlay = null;
|
|
4249
4755
|
}
|
|
4250
4756
|
}
|
|
4251
4757
|
}]);
|
|
4758
|
+
|
|
4252
4759
|
return Popup;
|
|
4253
4760
|
}(_react["default"].Component);
|
|
4761
|
+
|
|
4254
4762
|
function getRgbColor(color, opacity) {
|
|
4255
4763
|
var reg = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
|
|
4764
|
+
|
|
4256
4765
|
if (!reg.test(color) && typeof color !== 'string') {
|
|
4257
4766
|
return;
|
|
4258
4767
|
}
|
|
4768
|
+
|
|
4259
4769
|
var newStr = color.toLowerCase().replace(/\#/g, '');
|
|
4260
4770
|
var len = newStr.length;
|
|
4771
|
+
|
|
4261
4772
|
if (len == 3) {
|
|
4262
4773
|
var t = '';
|
|
4774
|
+
|
|
4263
4775
|
for (var i = 0; i < len; i++) {
|
|
4264
4776
|
t += newStr.slice(i, i + 1).concat(newStr.slice(i, i + 1));
|
|
4265
4777
|
}
|
|
4778
|
+
|
|
4266
4779
|
newStr = t;
|
|
4267
4780
|
}
|
|
4781
|
+
|
|
4268
4782
|
var arr = []; //将字符串分隔,两个两个的分隔
|
|
4783
|
+
|
|
4269
4784
|
for (var i = 0; i < 6; i = i + 2) {
|
|
4270
4785
|
var s = newStr.slice(i, i + 2);
|
|
4271
4786
|
arr.push(parseInt('0x' + s));
|
|
4272
4787
|
}
|
|
4788
|
+
|
|
4273
4789
|
return 'rgba(' + arr.join(',') + ',' + opacity + ')';
|
|
4274
|
-
}
|
|
4790
|
+
} // 压缩图片的方法
|
|
4791
|
+
|
|
4275
4792
|
|
|
4276
|
-
// 压缩图片的方法
|
|
4277
4793
|
function canvasDataURL(path, obj, callback) {
|
|
4278
4794
|
var img = new Image();
|
|
4279
4795
|
img.src = path;
|
|
4280
4796
|
img.setAttribute("crossOrigin", 'Anonymous');
|
|
4797
|
+
|
|
4281
4798
|
img.onload = function () {
|
|
4282
|
-
var that = this;
|
|
4283
|
-
|
|
4799
|
+
var that = this; // 默认按比例压缩
|
|
4800
|
+
|
|
4284
4801
|
var w = that.width,
|
|
4285
|
-
|
|
4286
|
-
|
|
4802
|
+
h = that.height,
|
|
4803
|
+
scale = w / h;
|
|
4287
4804
|
w = obj.width || w;
|
|
4288
4805
|
h = obj.height || w / scale;
|
|
4289
4806
|
var quality = 0.7; // 默认图片质量为0.7
|
|
4290
4807
|
//生成canvas
|
|
4808
|
+
|
|
4291
4809
|
var canvas = document.createElement('canvas');
|
|
4292
|
-
var ctx = canvas.getContext('2d');
|
|
4293
|
-
|
|
4810
|
+
var ctx = canvas.getContext('2d'); // 创建属性节点
|
|
4811
|
+
|
|
4294
4812
|
var anw = document.createAttribute("width");
|
|
4295
4813
|
anw.nodeValue = w;
|
|
4296
4814
|
var anh = document.createAttribute("height");
|
|
4297
4815
|
anh.nodeValue = h;
|
|
4298
4816
|
canvas.setAttributeNode(anw);
|
|
4299
4817
|
canvas.setAttributeNode(anh);
|
|
4300
|
-
ctx.drawImage(that, 0, 0, w, h);
|
|
4301
|
-
|
|
4818
|
+
ctx.drawImage(that, 0, 0, w, h); // 图像质量
|
|
4819
|
+
|
|
4302
4820
|
if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
|
|
4303
4821
|
quality = obj.quality;
|
|
4304
|
-
}
|
|
4305
|
-
|
|
4306
|
-
|
|
4307
|
-
// 回调函数返回base64的值
|
|
4822
|
+
} // quality值越小,所绘制出的图像越模糊
|
|
4823
|
+
|
|
4824
|
+
|
|
4825
|
+
var base64 = canvas.toDataURL('image/png', quality); // 回调函数返回base64的值
|
|
4826
|
+
|
|
4308
4827
|
callback(base64);
|
|
4309
4828
|
};
|
|
4310
4829
|
}
|
|
4830
|
+
|
|
4311
4831
|
module.exports = exports["default"];
|
|
4312
4832
|
//# sourceMappingURL=Map.js.map
|