@deepinnet-components/pc 0.0.12 → 0.0.13
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/dist/Map2D/Map/index.d.ts +2 -0
- package/dist/Map2D/Map/index.js +192 -0
- package/dist/Map2D/MapMarker/index.d.ts +3 -0
- package/dist/Map2D/MapMarker/index.js +118 -0
- package/dist/Map2D/MapPolygon/index.d.ts +2 -0
- package/dist/Map2D/MapPolygon/index.js +135 -0
- package/dist/Map2D/MapPolyline/index.d.ts +2 -0
- package/dist/Map2D/MapPolyline/index.js +342 -0
- package/dist/Map2D/com.d.ts +1 -0
- package/dist/Map2D/demo/basic.d.ts +7 -0
- package/dist/Map2D/demo/basic.js +14 -0
- package/dist/Map2D/index.d.ts +7 -0
- package/dist/Map2D/index.js +11 -0
- package/dist/Map2D/utils.d.ts +1 -0
- package/dist/Map2D/utils.js +8 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -1
- package/package.json +5 -2
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
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); }
|
|
2
|
+
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
|
|
3
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
4
|
+
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
5
|
+
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; }
|
|
6
|
+
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; }
|
|
7
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
8
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
9
|
+
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); }
|
|
10
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
11
|
+
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."); }
|
|
12
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
13
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
14
|
+
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; } }
|
|
15
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
16
|
+
// @ts-nocheck
|
|
17
|
+
import { useEffect, useState } from 'react';
|
|
18
|
+
import imagesMap from '@/config/images';
|
|
19
|
+
import { getBase64FromLocalImage } from '@/utils';
|
|
20
|
+
import { getCityInfo } from '@/config/cityConfig';
|
|
21
|
+
var Map = function Map(props) {
|
|
22
|
+
var id = props.id,
|
|
23
|
+
_props$opts = props.opts,
|
|
24
|
+
opts = _props$opts === void 0 ? {} : _props$opts,
|
|
25
|
+
children = props.children,
|
|
26
|
+
_props$mapType = props.mapType,
|
|
27
|
+
mapType = _props$mapType === void 0 ? 'default' : _props$mapType;
|
|
28
|
+
var _useState = useState(),
|
|
29
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
30
|
+
map = _useState2[0],
|
|
31
|
+
setMap = _useState2[1];
|
|
32
|
+
function mapClick(e) {
|
|
33
|
+
// 有值 说明点击的不是地图空的区域
|
|
34
|
+
if (e.features) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
props.onClick(e);
|
|
38
|
+
}
|
|
39
|
+
function mapRightClick(e) {
|
|
40
|
+
var _props$onRightClick;
|
|
41
|
+
(_props$onRightClick = props.onRightClick) === null || _props$onRightClick === void 0 || _props$onRightClick.call(props, e);
|
|
42
|
+
}
|
|
43
|
+
var mapInit = function mapInit() {
|
|
44
|
+
var cityInfo = getCityInfo();
|
|
45
|
+
var isDev = cityInfo.indexFile === 'dev';
|
|
46
|
+
if (isDev) {
|
|
47
|
+
mapabcgl.setBaseApiUrl("".concat(location.origin, "/mapabcApi"));
|
|
48
|
+
}
|
|
49
|
+
// 销毁现有的地图实例(如果有)
|
|
50
|
+
if (map) {
|
|
51
|
+
map.remove();
|
|
52
|
+
}
|
|
53
|
+
var mapObj = new mapabcgl.Map(_objectSpread(_objectSpread({
|
|
54
|
+
container: id,
|
|
55
|
+
style: cityInfo.mapStyle[mapType],
|
|
56
|
+
center: cityInfo.center,
|
|
57
|
+
zoom: 13,
|
|
58
|
+
maxZoom: 26,
|
|
59
|
+
minZoom: 3,
|
|
60
|
+
dragRotate: false,
|
|
61
|
+
doubleClickZoom: false
|
|
62
|
+
}, opts), {}, {
|
|
63
|
+
transformRequest: function transformRequest(url) {
|
|
64
|
+
// 处理互联网地图跨域问题
|
|
65
|
+
if (url.startsWith('http://121.36.99.212:35003') && isDev) {
|
|
66
|
+
return {
|
|
67
|
+
url: url.replace('http://121.36.99.212:35003', "".concat(location.origin, "/mapabcTileApi"))
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}));
|
|
72
|
+
mapObj.getCanvas().style.cursor = 'default';
|
|
73
|
+
|
|
74
|
+
// map加载完成后暴露出去使用
|
|
75
|
+
mapObj.on('load', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
76
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
77
|
+
while (1) switch (_context.prev = _context.next) {
|
|
78
|
+
case 0:
|
|
79
|
+
setMap(mapObj);
|
|
80
|
+
window.layerZIndexConfig = {};
|
|
81
|
+
case 2:
|
|
82
|
+
case "end":
|
|
83
|
+
return _context.stop();
|
|
84
|
+
}
|
|
85
|
+
}, _callee);
|
|
86
|
+
})));
|
|
87
|
+
mapObj.on('error', /*#__PURE__*/function () {
|
|
88
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(e) {
|
|
89
|
+
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
90
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
91
|
+
case 0:
|
|
92
|
+
case "end":
|
|
93
|
+
return _context2.stop();
|
|
94
|
+
}
|
|
95
|
+
}, _callee2);
|
|
96
|
+
}));
|
|
97
|
+
return function (_x) {
|
|
98
|
+
return _ref2.apply(this, arguments);
|
|
99
|
+
};
|
|
100
|
+
}());
|
|
101
|
+
};
|
|
102
|
+
useEffect(function () {
|
|
103
|
+
mapInit();
|
|
104
|
+
return function () {
|
|
105
|
+
var _map$destroy;
|
|
106
|
+
map === null || map === void 0 || map.off('click', mapClick);
|
|
107
|
+
map === null || map === void 0 || map.off('contextmenu', mapRightClick);
|
|
108
|
+
map === null || map === void 0 || (_map$destroy = map.destroy) === null || _map$destroy === void 0 || _map$destroy.call(map);
|
|
109
|
+
setMap(null);
|
|
110
|
+
delete window.customMarkers;
|
|
111
|
+
};
|
|
112
|
+
}, []);
|
|
113
|
+
useEffect(function () {
|
|
114
|
+
if (map) {
|
|
115
|
+
props.setMap(map);
|
|
116
|
+
if (props.onClick) {
|
|
117
|
+
map === null || map === void 0 || map.on('click', mapClick);
|
|
118
|
+
}
|
|
119
|
+
if (props.onRightClick) {
|
|
120
|
+
map === null || map === void 0 || map.on('contextmenu', mapRightClick);
|
|
121
|
+
}
|
|
122
|
+
if (import.meta.env.VITE_APP_STATUS === 'prod') {
|
|
123
|
+
var cityInfo = getCityInfo();
|
|
124
|
+
if (mapType === 'black') {
|
|
125
|
+
map.addLayer({
|
|
126
|
+
id: 'traffic-raster',
|
|
127
|
+
type: 'raster',
|
|
128
|
+
source: {
|
|
129
|
+
type: 'raster',
|
|
130
|
+
tiles: [cityInfo.mapStyle.blackTiles[0]],
|
|
131
|
+
tileSize: 256
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
map.addLayer({
|
|
135
|
+
id: 'traffic-raster2',
|
|
136
|
+
type: 'raster',
|
|
137
|
+
source: {
|
|
138
|
+
type: 'raster',
|
|
139
|
+
tiles: [cityInfo.mapStyle.blackTiles[1]],
|
|
140
|
+
tileSize: 256
|
|
141
|
+
}
|
|
142
|
+
});
|
|
143
|
+
} else {
|
|
144
|
+
map.addLayer({
|
|
145
|
+
id: 'traffic-raster',
|
|
146
|
+
type: 'raster',
|
|
147
|
+
source: {
|
|
148
|
+
type: 'raster',
|
|
149
|
+
tiles: [cityInfo.mapStyle.defaultTiles[0]],
|
|
150
|
+
tileSize: 256
|
|
151
|
+
}
|
|
152
|
+
});
|
|
153
|
+
map.addLayer({
|
|
154
|
+
id: 'traffic-raster2',
|
|
155
|
+
type: 'raster',
|
|
156
|
+
source: {
|
|
157
|
+
type: 'raster',
|
|
158
|
+
tiles: [cityInfo.mapStyle.defaultTiles[1]],
|
|
159
|
+
tileSize: 256
|
|
160
|
+
}
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
;
|
|
165
|
+
_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
|
|
166
|
+
var base64, image;
|
|
167
|
+
return _regeneratorRuntime().wrap(function _callee3$(_context3) {
|
|
168
|
+
while (1) switch (_context3.prev = _context3.next) {
|
|
169
|
+
case 0:
|
|
170
|
+
_context3.next = 2;
|
|
171
|
+
return getBase64FromLocalImage(imagesMap.arrow);
|
|
172
|
+
case 2:
|
|
173
|
+
base64 = _context3.sent;
|
|
174
|
+
_context3.next = 5;
|
|
175
|
+
return map.loadImage(base64);
|
|
176
|
+
case 5:
|
|
177
|
+
image = _context3.sent;
|
|
178
|
+
map.addImage('custom-arrow', image.data);
|
|
179
|
+
case 7:
|
|
180
|
+
case "end":
|
|
181
|
+
return _context3.stop();
|
|
182
|
+
}
|
|
183
|
+
}, _callee3);
|
|
184
|
+
}))();
|
|
185
|
+
}
|
|
186
|
+
}, [map]);
|
|
187
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
188
|
+
id: id,
|
|
189
|
+
className: "w-[100%] h-[100%]"
|
|
190
|
+
}, !!map && children);
|
|
191
|
+
};
|
|
192
|
+
export default Map;
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
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."); }
|
|
3
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
4
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
|
+
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; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import { useGetState } from 'ahooks';
|
|
8
|
+
import { isEqual } from 'lodash-es';
|
|
9
|
+
import React, { memo, useEffect, useRef, useState } from 'react';
|
|
10
|
+
import shortid from 'shortid';
|
|
11
|
+
var MapMarker = function MapMarker(props) {
|
|
12
|
+
var map = props.map,
|
|
13
|
+
propsId = props.id,
|
|
14
|
+
pos = props.pos,
|
|
15
|
+
_props$offset = props.offset,
|
|
16
|
+
offset = _props$offset === void 0 ? [0, 0] : _props$offset,
|
|
17
|
+
_props$zIndex = props.zIndex,
|
|
18
|
+
zIndex = _props$zIndex === void 0 ? 12 : _props$zIndex,
|
|
19
|
+
_props$draggable = props.draggable,
|
|
20
|
+
draggable = _props$draggable === void 0 ? false : _props$draggable,
|
|
21
|
+
children = props.children;
|
|
22
|
+
var _useState = useState('customMarker::' + (propsId || shortid.generate())),
|
|
23
|
+
_useState2 = _slicedToArray(_useState, 1),
|
|
24
|
+
id = _useState2[0];
|
|
25
|
+
var somePropsRef = useRef();
|
|
26
|
+
var _useGetState = useGetState(),
|
|
27
|
+
_useGetState2 = _slicedToArray(_useGetState, 3),
|
|
28
|
+
marker = _useGetState2[0],
|
|
29
|
+
setMarker = _useGetState2[1],
|
|
30
|
+
getMarker = _useGetState2[2];
|
|
31
|
+
var domRef = useRef();
|
|
32
|
+
var countObj = useRef({});
|
|
33
|
+
function onClick(e) {
|
|
34
|
+
var _props$onClick;
|
|
35
|
+
e.stopPropagation();
|
|
36
|
+
(_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, e);
|
|
37
|
+
}
|
|
38
|
+
function onDrag(e) {
|
|
39
|
+
var _props$onDragging;
|
|
40
|
+
(_props$onDragging = props.onDragging) === null || _props$onDragging === void 0 || _props$onDragging.call(props, e);
|
|
41
|
+
}
|
|
42
|
+
function onRightClick(e) {
|
|
43
|
+
var _props$onRightClick;
|
|
44
|
+
e.preventDefault();
|
|
45
|
+
e.stopPropagation();
|
|
46
|
+
(_props$onRightClick = props.onRightClick) === null || _props$onRightClick === void 0 || _props$onRightClick.call(props, e);
|
|
47
|
+
}
|
|
48
|
+
useEffect(function () {
|
|
49
|
+
if (!map) return;
|
|
50
|
+
var el = domRef.current;
|
|
51
|
+
var newMarker = getMarker();
|
|
52
|
+
var somePropsObj = {
|
|
53
|
+
pos: pos,
|
|
54
|
+
offset: offset,
|
|
55
|
+
draggable: draggable
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
// 如果Marker已经存在,则更新位置和其他属性
|
|
59
|
+
if (newMarker) {
|
|
60
|
+
var _somePropsRef$current, _somePropsRef$current2;
|
|
61
|
+
if (isEqual(somePropsObj, somePropsRef.current)) return;
|
|
62
|
+
|
|
63
|
+
// 只在位置真正发生变化时更新
|
|
64
|
+
if (!isEqual(pos, (_somePropsRef$current = somePropsRef.current) === null || _somePropsRef$current === void 0 ? void 0 : _somePropsRef$current.pos) || !isEqual(offset, (_somePropsRef$current2 = somePropsRef.current) === null || _somePropsRef$current2 === void 0 ? void 0 : _somePropsRef$current2.offset)) {
|
|
65
|
+
newMarker.setLngLat([Number(pos[0]), Number(pos[1])]).setOffset(offset).setDraggable(draggable);
|
|
66
|
+
somePropsRef.current = somePropsObj;
|
|
67
|
+
}
|
|
68
|
+
} else {
|
|
69
|
+
// 初始化新的Marker
|
|
70
|
+
if (props.onClick && !countObj.current.click) {
|
|
71
|
+
el.addEventListener('click', onClick);
|
|
72
|
+
countObj.current.click = true;
|
|
73
|
+
}
|
|
74
|
+
if (props.onRightClick && !countObj.current.contextmenu) {
|
|
75
|
+
el.addEventListener('contextmenu', onRightClick);
|
|
76
|
+
countObj.current.contextmenu = true;
|
|
77
|
+
}
|
|
78
|
+
newMarker = new mapabcgl.Marker({
|
|
79
|
+
element: el
|
|
80
|
+
}).setLngLat([Number(pos[0]), Number(pos[1])]).setOffset(offset).setDraggable(draggable).addTo(map);
|
|
81
|
+
if (draggable) {
|
|
82
|
+
newMarker.on('drag', onDrag);
|
|
83
|
+
}
|
|
84
|
+
somePropsRef.current = somePropsObj;
|
|
85
|
+
setMarker(newMarker);
|
|
86
|
+
|
|
87
|
+
// 添加到全局标记对象
|
|
88
|
+
// @ts-ignore
|
|
89
|
+
if (!window.customMarkers) window.customMarkers = {};
|
|
90
|
+
// @ts-ignore
|
|
91
|
+
window.customMarkers[id] = newMarker;
|
|
92
|
+
}
|
|
93
|
+
}, [map, pos, offset, draggable]);
|
|
94
|
+
useEffect(function () {
|
|
95
|
+
if (!map) return;
|
|
96
|
+
return function () {
|
|
97
|
+
var _domRef$current, _domRef$current2, _getMarker, _getMarker2, _getMarker2$remove;
|
|
98
|
+
(_domRef$current = domRef.current) === null || _domRef$current === void 0 || _domRef$current.removeEventListener('click', onClick);
|
|
99
|
+
(_domRef$current2 = domRef.current) === null || _domRef$current2 === void 0 || _domRef$current2.removeEventListener('contextmenu', onRightClick);
|
|
100
|
+
(_getMarker = getMarker()) === null || _getMarker === void 0 || _getMarker.off('drag', onDrag);
|
|
101
|
+
(_getMarker2 = getMarker()) === null || _getMarker2 === void 0 || (_getMarker2$remove = _getMarker2.remove) === null || _getMarker2$remove === void 0 || _getMarker2$remove.call(_getMarker2);
|
|
102
|
+
setMarker(null);
|
|
103
|
+
// @ts-ignore
|
|
104
|
+
if (window.customMarkers) {
|
|
105
|
+
// @ts-ignore
|
|
106
|
+
delete window.customMarkers[id];
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
}, [map]);
|
|
110
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
111
|
+
ref: domRef,
|
|
112
|
+
style: {
|
|
113
|
+
zIndex: zIndex
|
|
114
|
+
}
|
|
115
|
+
}, children));
|
|
116
|
+
};
|
|
117
|
+
var memoCom = /*#__PURE__*/memo(MapMarker);
|
|
118
|
+
export default memoCom;
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
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."); }
|
|
3
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
4
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
|
+
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; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import { useEffect, useState, memo } from 'react';
|
|
8
|
+
import { useGetState } from 'ahooks';
|
|
9
|
+
import { isEqual } from 'lodash-es';
|
|
10
|
+
import shortid from 'shortid';
|
|
11
|
+
var MapPolygon = function MapPolygon(props) {
|
|
12
|
+
var map = props.map,
|
|
13
|
+
_props$path = props.path,
|
|
14
|
+
path = _props$path === void 0 ? [] : _props$path,
|
|
15
|
+
_props$color = props.color,
|
|
16
|
+
color = _props$color === void 0 ? '#1890ff' : _props$color,
|
|
17
|
+
_props$opacity = props.opacity,
|
|
18
|
+
opacity = _props$opacity === void 0 ? 1 : _props$opacity;
|
|
19
|
+
var _useState = useState('customPolygon::' + (props.id || shortid.generate())),
|
|
20
|
+
_useState2 = _slicedToArray(_useState, 1),
|
|
21
|
+
id = _useState2[0];
|
|
22
|
+
var _useGetState = useGetState(),
|
|
23
|
+
_useGetState2 = _slicedToArray(_useGetState, 3),
|
|
24
|
+
sourceData = _useGetState2[0],
|
|
25
|
+
setSourceData = _useGetState2[1],
|
|
26
|
+
getSourceData = _useGetState2[2];
|
|
27
|
+
var _useGetState3 = useGetState(),
|
|
28
|
+
_useGetState4 = _slicedToArray(_useGetState3, 3),
|
|
29
|
+
polygon = _useGetState4[0],
|
|
30
|
+
setPolygon = _useGetState4[1],
|
|
31
|
+
getPolygon = _useGetState4[2];
|
|
32
|
+
useEffect(function () {
|
|
33
|
+
if (!map) return;
|
|
34
|
+
var sourceDataObj = {
|
|
35
|
+
type: 'FeatureCollection',
|
|
36
|
+
features: [{
|
|
37
|
+
type: 'Feature',
|
|
38
|
+
geometry: {
|
|
39
|
+
type: 'Polygon',
|
|
40
|
+
coordinates: [path]
|
|
41
|
+
}
|
|
42
|
+
}]
|
|
43
|
+
};
|
|
44
|
+
if (isEqual(getSourceData(), sourceDataObj)) return;
|
|
45
|
+
var source = map.getSource(id);
|
|
46
|
+
if (source) {
|
|
47
|
+
// console.log('更新source');
|
|
48
|
+
source.setData(sourceDataObj);
|
|
49
|
+
} else {
|
|
50
|
+
// console.log('添加source');
|
|
51
|
+
map.addSource(id, {
|
|
52
|
+
type: 'geojson',
|
|
53
|
+
data: sourceDataObj
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
setSourceData(sourceDataObj);
|
|
57
|
+
}, [map, path]);
|
|
58
|
+
function drawPolygon() {
|
|
59
|
+
var polygonObj = {
|
|
60
|
+
id: id,
|
|
61
|
+
type: 'fill',
|
|
62
|
+
source: id,
|
|
63
|
+
paint: {
|
|
64
|
+
'fill-color': color,
|
|
65
|
+
'fill-opacity': opacity
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
if (isEqual(getPolygon(), polygonObj)) return;
|
|
69
|
+
var layer = map.getLayer(id);
|
|
70
|
+
if (layer) {
|
|
71
|
+
// console.log('更新layer');
|
|
72
|
+
map.setPaintProperty(id, 'fill-color', color);
|
|
73
|
+
map.setPaintProperty(id, 'fill-opacity', opacity);
|
|
74
|
+
} else {
|
|
75
|
+
// console.log('添加layer');
|
|
76
|
+
map.addLayer(polygonObj);
|
|
77
|
+
}
|
|
78
|
+
setPolygon(polygonObj);
|
|
79
|
+
}
|
|
80
|
+
useEffect(function () {
|
|
81
|
+
if (!map || !sourceData) return;
|
|
82
|
+
drawPolygon();
|
|
83
|
+
}, [map, sourceData, color, opacity]);
|
|
84
|
+
function onMouseenter(e) {
|
|
85
|
+
var _props$onMouseenter;
|
|
86
|
+
(_props$onMouseenter = props.onMouseenter) === null || _props$onMouseenter === void 0 || _props$onMouseenter.call(props, e);
|
|
87
|
+
}
|
|
88
|
+
function onMouseleave(e) {
|
|
89
|
+
var _props$onMouseleave;
|
|
90
|
+
(_props$onMouseleave = props.onMouseleave) === null || _props$onMouseleave === void 0 || _props$onMouseleave.call(props, e);
|
|
91
|
+
}
|
|
92
|
+
function onClick(e) {
|
|
93
|
+
var _props$onClick;
|
|
94
|
+
(_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, e);
|
|
95
|
+
}
|
|
96
|
+
function onRightClick(e) {
|
|
97
|
+
var _e$stopPropagation, _props$onRightClick;
|
|
98
|
+
(_e$stopPropagation = e.stopPropagation) === null || _e$stopPropagation === void 0 || _e$stopPropagation.call(e);
|
|
99
|
+
(_props$onRightClick = props.onRightClick) === null || _props$onRightClick === void 0 || _props$onRightClick.call(props, e);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// 事件处理
|
|
103
|
+
useEffect(function () {
|
|
104
|
+
if (map) {
|
|
105
|
+
if (props.onMouseenter) {
|
|
106
|
+
map.on('mouseenter', id, onMouseenter);
|
|
107
|
+
}
|
|
108
|
+
if (props.onMouseleave) {
|
|
109
|
+
map.on('mouseleave', id, onMouseleave);
|
|
110
|
+
}
|
|
111
|
+
if (props.onClick) {
|
|
112
|
+
map.on('click', id, onClick);
|
|
113
|
+
}
|
|
114
|
+
if (props.onRightClick) {
|
|
115
|
+
map.on('contextmenu', id, onRightClick);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}, [map]);
|
|
119
|
+
useEffect(function () {
|
|
120
|
+
return function () {
|
|
121
|
+
// console.log(id + '组件销毁')
|
|
122
|
+
map === null || map === void 0 || map.removeLayerAndSource(id);
|
|
123
|
+
map === null || map === void 0 || map.off('mouseenter', id, onMouseenter);
|
|
124
|
+
map === null || map === void 0 || map.off('mouseleave', id, onMouseleave);
|
|
125
|
+
map === null || map === void 0 || map.off('click', id, onClick);
|
|
126
|
+
map === null || map === void 0 || map.off('contextmenu', id, onClick);
|
|
127
|
+
};
|
|
128
|
+
}, []);
|
|
129
|
+
return null;
|
|
130
|
+
};
|
|
131
|
+
|
|
132
|
+
// export default MapPolygon
|
|
133
|
+
|
|
134
|
+
var memoCom = /*#__PURE__*/memo(MapPolygon);
|
|
135
|
+
export default memoCom;
|
|
@@ -0,0 +1,342 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
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."); }
|
|
3
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
4
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
|
+
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; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import { useEffect, useRef, useState, memo } from 'react';
|
|
8
|
+
import { useGetState } from 'ahooks';
|
|
9
|
+
import { isEqual } from 'lodash-es';
|
|
10
|
+
import shortid from 'shortid';
|
|
11
|
+
import { getAllLineLayers } from "../utils";
|
|
12
|
+
function findKeyWithMinValueGreaterThan(obj, a) {
|
|
13
|
+
var minValue = Infinity;
|
|
14
|
+
var resultKey = null;
|
|
15
|
+
for (var key in obj) {
|
|
16
|
+
if (obj.hasOwnProperty(key)) {
|
|
17
|
+
var val = obj[key];
|
|
18
|
+
if (val > a && val < minValue) {
|
|
19
|
+
minValue = val;
|
|
20
|
+
resultKey = key;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
return resultKey;
|
|
25
|
+
}
|
|
26
|
+
var MapPolyline = function MapPolyline(props) {
|
|
27
|
+
var map = props.map,
|
|
28
|
+
_props$path = props.path,
|
|
29
|
+
path = _props$path === void 0 ? [] : _props$path,
|
|
30
|
+
_props$color = props.color,
|
|
31
|
+
color = _props$color === void 0 ? '#00A4B2' : _props$color,
|
|
32
|
+
_props$lineEndColor = props.lineEndColor,
|
|
33
|
+
lineEndColor = _props$lineEndColor === void 0 ? '' : _props$lineEndColor,
|
|
34
|
+
_props$width = props.width,
|
|
35
|
+
width = _props$width === void 0 ? 6 : _props$width,
|
|
36
|
+
_props$opacity = props.opacity,
|
|
37
|
+
opacity = _props$opacity === void 0 ? 1 : _props$opacity,
|
|
38
|
+
_props$isOutline = props.isOutline,
|
|
39
|
+
isOutline = _props$isOutline === void 0 ? false : _props$isOutline,
|
|
40
|
+
_props$outlineColor = props.outlineColor,
|
|
41
|
+
outlineColor = _props$outlineColor === void 0 ? '#ffa7a5' : _props$outlineColor,
|
|
42
|
+
_props$outlineWidth = props.outlineWidth,
|
|
43
|
+
outlineWidth = _props$outlineWidth === void 0 ? 12 : _props$outlineWidth,
|
|
44
|
+
_props$outlineOpacity = props.outlineOpacity,
|
|
45
|
+
outlineOpacity = _props$outlineOpacity === void 0 ? 1 : _props$outlineOpacity,
|
|
46
|
+
_props$zIndex = props.zIndex,
|
|
47
|
+
zIndex = _props$zIndex === void 0 ? 12 : _props$zIndex,
|
|
48
|
+
_props$isArrow = props.isArrow,
|
|
49
|
+
isArrow = _props$isArrow === void 0 ? false : _props$isArrow;
|
|
50
|
+
var _useState = useState('customLine::' + (props.id || shortid.generate())),
|
|
51
|
+
_useState2 = _slicedToArray(_useState, 1),
|
|
52
|
+
id = _useState2[0];
|
|
53
|
+
var outlineId = id + '_outline';
|
|
54
|
+
var allowLayerId = id + '_allow';
|
|
55
|
+
var _useGetState = useGetState(),
|
|
56
|
+
_useGetState2 = _slicedToArray(_useGetState, 3),
|
|
57
|
+
sourceData = _useGetState2[0],
|
|
58
|
+
setSourceData = _useGetState2[1],
|
|
59
|
+
getSourceData = _useGetState2[2];
|
|
60
|
+
var _useGetState3 = useGetState(),
|
|
61
|
+
_useGetState4 = _slicedToArray(_useGetState3, 3),
|
|
62
|
+
line = _useGetState4[0],
|
|
63
|
+
setLine = _useGetState4[1],
|
|
64
|
+
getLine = _useGetState4[2];
|
|
65
|
+
var _useGetState5 = useGetState(),
|
|
66
|
+
_useGetState6 = _slicedToArray(_useGetState5, 3),
|
|
67
|
+
outline = _useGetState6[0],
|
|
68
|
+
setOutline = _useGetState6[1],
|
|
69
|
+
getOutline = _useGetState6[2];
|
|
70
|
+
var _useGetState7 = useGetState(),
|
|
71
|
+
_useGetState8 = _slicedToArray(_useGetState7, 3),
|
|
72
|
+
arrowLine = _useGetState8[0],
|
|
73
|
+
setArrowLine = _useGetState8[1],
|
|
74
|
+
getArrowLine = _useGetState8[2];
|
|
75
|
+
useEffect(function () {
|
|
76
|
+
if (!map) return;
|
|
77
|
+
var sourceDataObj = {
|
|
78
|
+
type: 'FeatureCollection',
|
|
79
|
+
features: [{
|
|
80
|
+
type: 'Feature',
|
|
81
|
+
geometry: {
|
|
82
|
+
type: 'LineString',
|
|
83
|
+
coordinates: path
|
|
84
|
+
}
|
|
85
|
+
}]
|
|
86
|
+
};
|
|
87
|
+
if (isEqual(getSourceData(), sourceDataObj)) return;
|
|
88
|
+
var source = map.getSource(id);
|
|
89
|
+
if (source) {
|
|
90
|
+
// console.log('更新source')
|
|
91
|
+
source.setData(sourceDataObj);
|
|
92
|
+
} else {
|
|
93
|
+
// console.log('添加source')
|
|
94
|
+
map.addSource(id, {
|
|
95
|
+
type: 'geojson',
|
|
96
|
+
data: sourceDataObj,
|
|
97
|
+
lineMetrics: true
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
setSourceData(sourceDataObj);
|
|
101
|
+
}, [map, path]);
|
|
102
|
+
useEffect(function () {
|
|
103
|
+
if (map && line) {
|
|
104
|
+
var lineObj = {
|
|
105
|
+
id: id,
|
|
106
|
+
type: 'line',
|
|
107
|
+
source: id,
|
|
108
|
+
layout: {
|
|
109
|
+
'line-join': 'round',
|
|
110
|
+
'line-cap': 'round'
|
|
111
|
+
},
|
|
112
|
+
paint: {
|
|
113
|
+
'line-color': color,
|
|
114
|
+
'line-width': width,
|
|
115
|
+
'line-opacity': opacity
|
|
116
|
+
},
|
|
117
|
+
zIndex: zIndex,
|
|
118
|
+
metadata: {
|
|
119
|
+
zIndex: zIndex
|
|
120
|
+
}
|
|
121
|
+
};
|
|
122
|
+
if (isEqual(getLine(), lineObj)) return;
|
|
123
|
+
var layers = getAllLineLayers(map);
|
|
124
|
+
var obj = {};
|
|
125
|
+
layers.forEach(function (item) {
|
|
126
|
+
obj[item.id] = item.metadata.zIndex;
|
|
127
|
+
});
|
|
128
|
+
var fKey = findKeyWithMinValueGreaterThan(obj, zIndex);
|
|
129
|
+
if (fKey) {
|
|
130
|
+
map.moveLayer(id, fKey);
|
|
131
|
+
if (getOutline()) {
|
|
132
|
+
map.moveLayer(outlineId, fKey);
|
|
133
|
+
}
|
|
134
|
+
if (getArrowLine()) {
|
|
135
|
+
map.moveLayer(allowLayerId, fKey);
|
|
136
|
+
}
|
|
137
|
+
} else {
|
|
138
|
+
map.moveLayer(id);
|
|
139
|
+
if (getOutline()) {
|
|
140
|
+
map.moveLayer(outlineId);
|
|
141
|
+
}
|
|
142
|
+
if (getArrowLine()) {
|
|
143
|
+
map.moveLayer(allowLayerId);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}, [zIndex, map, line]);
|
|
148
|
+
useEffect(function () {
|
|
149
|
+
return function () {
|
|
150
|
+
// @ts-ignore
|
|
151
|
+
delete window.layerZIndexConfig[id];
|
|
152
|
+
// @ts-ignore
|
|
153
|
+
delete window.layerZIndexConfig[outlineId];
|
|
154
|
+
// @ts-ignore
|
|
155
|
+
delete window.layerZIndexConfig[allowLayerId];
|
|
156
|
+
};
|
|
157
|
+
}, []);
|
|
158
|
+
function drawLine() {
|
|
159
|
+
var lineObj = {
|
|
160
|
+
id: id,
|
|
161
|
+
type: 'line',
|
|
162
|
+
source: id,
|
|
163
|
+
layout: {
|
|
164
|
+
'line-join': 'round',
|
|
165
|
+
'line-cap': 'round'
|
|
166
|
+
},
|
|
167
|
+
paint: {
|
|
168
|
+
'line-color': color,
|
|
169
|
+
'line-width': width,
|
|
170
|
+
'line-opacity': opacity
|
|
171
|
+
},
|
|
172
|
+
zIndex: zIndex,
|
|
173
|
+
metadata: {
|
|
174
|
+
zIndex: zIndex
|
|
175
|
+
}
|
|
176
|
+
};
|
|
177
|
+
if (lineEndColor) {
|
|
178
|
+
lineObj.paint['line-gradient'] = ['interpolate', ['linear'], ['line-progress'], 0, color, 1, lineEndColor];
|
|
179
|
+
}
|
|
180
|
+
if (isEqual(getLine(), lineObj)) return;
|
|
181
|
+
var layer = map.getLayer(id);
|
|
182
|
+
if (layer) {
|
|
183
|
+
// console.log('更新layer')
|
|
184
|
+
map.setPaintProperty(id, 'line-color', color);
|
|
185
|
+
map.setPaintProperty(id, 'line-width', width);
|
|
186
|
+
map.setPaintProperty(id, 'line-opacity', opacity);
|
|
187
|
+
} else {
|
|
188
|
+
// console.log('添加layer')
|
|
189
|
+
map.addLayer(lineObj);
|
|
190
|
+
if (isArrow) {
|
|
191
|
+
var arrowLineObj = {
|
|
192
|
+
id: allowLayerId,
|
|
193
|
+
type: 'symbol',
|
|
194
|
+
source: id,
|
|
195
|
+
layout: {
|
|
196
|
+
'icon-image': 'custom-arrow',
|
|
197
|
+
// 箭头图标
|
|
198
|
+
'symbol-placement': 'line',
|
|
199
|
+
'symbol-spacing': 25,
|
|
200
|
+
// 图标间隔,默认为250
|
|
201
|
+
'icon-size': 1
|
|
202
|
+
},
|
|
203
|
+
metadata: {
|
|
204
|
+
zIndex: zIndex
|
|
205
|
+
}
|
|
206
|
+
};
|
|
207
|
+
map.addLayer(arrowLineObj);
|
|
208
|
+
setArrowLine(arrowLineObj);
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
setLine(JSON.parse(JSON.stringify(lineObj)));
|
|
212
|
+
}
|
|
213
|
+
function drawOutLine() {
|
|
214
|
+
var outlineObj = {
|
|
215
|
+
id: outlineId,
|
|
216
|
+
type: 'line',
|
|
217
|
+
source: id,
|
|
218
|
+
layout: {
|
|
219
|
+
'line-join': 'round',
|
|
220
|
+
'line-cap': 'round'
|
|
221
|
+
},
|
|
222
|
+
paint: {
|
|
223
|
+
'line-color': outlineColor,
|
|
224
|
+
'line-width': outlineWidth,
|
|
225
|
+
'line-opacity': outlineOpacity
|
|
226
|
+
},
|
|
227
|
+
isOutline: isOutline,
|
|
228
|
+
metadata: {
|
|
229
|
+
zIndex: zIndex
|
|
230
|
+
}
|
|
231
|
+
};
|
|
232
|
+
if (isOutline) {
|
|
233
|
+
if (isEqual(getOutline(), outlineObj)) return;
|
|
234
|
+
var layer = map.getLayer(outlineId);
|
|
235
|
+
if (layer) {
|
|
236
|
+
// console.log('更新layer')
|
|
237
|
+
// console.log('更新outline')
|
|
238
|
+
map.setPaintProperty(id, 'line-color', outlineColor);
|
|
239
|
+
map.setPaintProperty(id, 'line-width', outlineWidth);
|
|
240
|
+
map.setPaintProperty(id, 'line-opacity', outlineOpacity);
|
|
241
|
+
} else {
|
|
242
|
+
// console.log('添加layer')
|
|
243
|
+
// console.log('添加outline')
|
|
244
|
+
map.addLayer(outlineObj);
|
|
245
|
+
map.moveLayer(outlineId, id);
|
|
246
|
+
}
|
|
247
|
+
} else {
|
|
248
|
+
var _layer = map.getLayer(outlineId);
|
|
249
|
+
if (_layer) {
|
|
250
|
+
// console.log('删除outline')
|
|
251
|
+
map === null || map === void 0 || map.removeLayerAndSource(outlineId);
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
setOutline(outlineObj);
|
|
255
|
+
}
|
|
256
|
+
useEffect(function () {
|
|
257
|
+
if (!map || !sourceData) return;
|
|
258
|
+
drawLine();
|
|
259
|
+
drawOutLine();
|
|
260
|
+
}, [map, sourceData, color, width, opacity, isOutline]);
|
|
261
|
+
var flagRef = useRef(false);
|
|
262
|
+
function onMouseenter(e) {
|
|
263
|
+
if (flagRef.current) return;
|
|
264
|
+
flagRef.current = true;
|
|
265
|
+
setTimeout(function () {
|
|
266
|
+
flagRef.current = false;
|
|
267
|
+
}, 150);
|
|
268
|
+
var features = map.queryRenderedFeatures(e.point);
|
|
269
|
+
if (!features.length) return;
|
|
270
|
+
var item = features.find(function (item) {
|
|
271
|
+
return item.source.includes('customLine::');
|
|
272
|
+
});
|
|
273
|
+
if (item && item.source === id) {
|
|
274
|
+
var _props$onMouseenter;
|
|
275
|
+
(_props$onMouseenter = props.onMouseenter) === null || _props$onMouseenter === void 0 || _props$onMouseenter.call(props, e);
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
function onMouseleave(e) {
|
|
279
|
+
var _props$onMouseleave;
|
|
280
|
+
(_props$onMouseleave = props.onMouseleave) === null || _props$onMouseleave === void 0 || _props$onMouseleave.call(props, e);
|
|
281
|
+
}
|
|
282
|
+
function onClick(e) {
|
|
283
|
+
var features = map.queryRenderedFeatures(e.point);
|
|
284
|
+
if (!features.length) return;
|
|
285
|
+
var item = features.find(function (item) {
|
|
286
|
+
return item.source.includes('customLine::');
|
|
287
|
+
});
|
|
288
|
+
if (item && item.source === id) {
|
|
289
|
+
var _props$onClick;
|
|
290
|
+
(_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, e);
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
function onRightClick(e) {
|
|
294
|
+
var _e$stopPropagation;
|
|
295
|
+
(_e$stopPropagation = e.stopPropagation) === null || _e$stopPropagation === void 0 || _e$stopPropagation.call(e);
|
|
296
|
+
var features = map.queryRenderedFeatures(e.point);
|
|
297
|
+
if (!features.length) return;
|
|
298
|
+
var item = features.find(function (item) {
|
|
299
|
+
return item.source.includes('customLine::');
|
|
300
|
+
});
|
|
301
|
+
if (item && item.source === id) {
|
|
302
|
+
var _props$onRightClick;
|
|
303
|
+
(_props$onRightClick = props.onRightClick) === null || _props$onRightClick === void 0 || _props$onRightClick.call(props, e);
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
// 事件处理
|
|
308
|
+
useEffect(function () {
|
|
309
|
+
if (map) {
|
|
310
|
+
if (props.onMouseenter) {
|
|
311
|
+
map.on('mouseenter', id, onMouseenter);
|
|
312
|
+
}
|
|
313
|
+
if (props.onMouseleave) {
|
|
314
|
+
map.on('mouseleave', id, onMouseleave);
|
|
315
|
+
}
|
|
316
|
+
if (props.onClick) {
|
|
317
|
+
map.on('click', id, onClick);
|
|
318
|
+
}
|
|
319
|
+
if (props.onRightClick) {
|
|
320
|
+
map.on('contextmenu', id, onRightClick);
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
}, [map]);
|
|
324
|
+
useEffect(function () {
|
|
325
|
+
return function () {
|
|
326
|
+
// console.log(id + '组件销毁')
|
|
327
|
+
map === null || map === void 0 || map.removeLayerAndSource(allowLayerId);
|
|
328
|
+
map === null || map === void 0 || map.removeLayerAndSource(outlineId);
|
|
329
|
+
map === null || map === void 0 || map.removeLayerAndSource(id);
|
|
330
|
+
map === null || map === void 0 || map.off('mouseenter', id, onMouseenter);
|
|
331
|
+
map === null || map === void 0 || map.off('mouseleave', id, onMouseleave);
|
|
332
|
+
map === null || map === void 0 || map.off('click', id, onClick);
|
|
333
|
+
map === null || map === void 0 || map.off('contextmenu', id, onClick);
|
|
334
|
+
};
|
|
335
|
+
}, []);
|
|
336
|
+
return null;
|
|
337
|
+
};
|
|
338
|
+
|
|
339
|
+
// export default MapPolyline
|
|
340
|
+
|
|
341
|
+
var memoCom = /*#__PURE__*/memo(MapPolyline);
|
|
342
|
+
export default memoCom;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
declare const mapabcgl: any;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* title: 用法
|
|
3
|
+
* description:
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import React from 'react';
|
|
7
|
+
// import { Map2D } from '@deepinnet-components/pc'
|
|
8
|
+
|
|
9
|
+
// const { Map, MapMarker, MapPolyline, MapPolygon } = Map2D
|
|
10
|
+
|
|
11
|
+
var App = function App() {
|
|
12
|
+
return /*#__PURE__*/React.createElement("div", null, "\u8FD9\u4E2A\u6587\u6863\u4E0D\u597D\u641E\u4F8B\u5B50");
|
|
13
|
+
};
|
|
14
|
+
export default App;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
// import Map from './Map';
|
|
2
|
+
import MapMarker from "./MapMarker";
|
|
3
|
+
import MapPolyline from "./MapPolyline";
|
|
4
|
+
import MapPolygon from "./MapPolygon";
|
|
5
|
+
var Map2D = {
|
|
6
|
+
// Map,
|
|
7
|
+
MapMarker: MapMarker,
|
|
8
|
+
MapPolyline: MapPolyline,
|
|
9
|
+
MapPolygon: MapPolygon
|
|
10
|
+
};
|
|
11
|
+
export default Map2D;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function getAllLineLayers(map: any): any;
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default as AddressSelect } from "./AddressSelect";
|
|
2
2
|
export { default as OrgSelect } from "./OrgSelect";
|
|
3
3
|
export { default as ShenduTable } from "./Table";
|
|
4
|
-
export { default as UserCenter } from "./UserCenter";
|
|
4
|
+
export { default as UserCenter } from "./UserCenter";
|
|
5
|
+
export { default as Map2D } from "./Map2D";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deepinnet-components/pc",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.13",
|
|
4
4
|
"description": "A react library developed with dumi",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -49,12 +49,15 @@
|
|
|
49
49
|
"@formily/core": "^2.3.2",
|
|
50
50
|
"@formily/react": "^2.3.2",
|
|
51
51
|
"@types/md5": "^2.3.5",
|
|
52
|
+
"@types/shortid": "^2.2.0",
|
|
53
|
+
"ahooks": "^3.9.0",
|
|
52
54
|
"antd": "^5.16.1",
|
|
53
55
|
"axios": "^1.5.1",
|
|
54
56
|
"dayjs": "^1.11.13",
|
|
55
57
|
"lodash-es": "^4.17.21",
|
|
56
58
|
"md5": "^2.3.0",
|
|
57
|
-
"react-router-dom": "^7.6.2"
|
|
59
|
+
"react-router-dom": "^7.6.2",
|
|
60
|
+
"shortid": "^2.2.17"
|
|
58
61
|
},
|
|
59
62
|
"devDependencies": {
|
|
60
63
|
"@commitlint/cli": "^17.6.7",
|