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