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