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