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