Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 5f26a564 作者: 陈楚尹
操作

upd: 更新降水模块

上级 952f71ef
正在显示 包含 1348 行增加 和 19 行删除
package.json
......@@ -81,12 +81,15 @@
"@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3080320230523001",
"@dcloudio/uni-ui": "^1.4.27",
"@faker-js/faker": "^8.0.2",
"@types/mapbox-gl": "^2.7.11",
"@vue/runtime-core": "~3.2.47",
"@vueuse/core": "^10.1.2",
"axios": "^1.4.0",
"crypto-js": "^4.1.1",
"dayjs": "^1.11.7",
"lodash-es": "^4.17.21",
"mapbox-gl": "^2.15.0",
"mapbox-gl-controls": "^2.3.5",
"nanoid": "^4.0.2",
"pinia": "~2.0.36",
"qs": "~6.9.7",
......
pnpm-lock.yaml
......@@ -50,6 +50,9 @@ dependencies:
'@faker-js/faker':
specifier: ^8.0.2
version: 8.0.2
'@types/mapbox-gl':
specifier: ^2.7.11
version: 2.7.11
'@vue/runtime-core':
specifier: ~3.2.47
version: 3.2.47
......@@ -68,6 +71,12 @@ dependencies:
lodash-es:
specifier: ^4.17.21
version: 4.17.21
mapbox-gl:
specifier: ^2.15.0
version: 2.15.0
mapbox-gl-controls:
specifier: ^2.3.5
version: 2.3.5(mapbox-gl@2.15.0)
nanoid:
specifier: ^4.0.2
version: 4.0.2
......@@ -3364,6 +3373,46 @@ packages:
'@jridgewell/resolve-uri': 3.1.1
'@jridgewell/sourcemap-codec': 1.4.15
/@mapbox/geojson-rewind@0.5.2:
resolution: {integrity: sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==}
hasBin: true
dependencies:
get-stream: 6.0.1
minimist: 1.2.8
dev: false
/@mapbox/jsonlint-lines-primitives@2.0.2:
resolution: {integrity: sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==}
engines: {node: '>= 0.6'}
dev: false
/@mapbox/mapbox-gl-supported@2.0.1:
resolution: {integrity: sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ==}
dev: false
/@mapbox/point-geometry@0.1.0:
resolution: {integrity: sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==}
dev: false
/@mapbox/tiny-sdf@2.0.6:
resolution: {integrity: sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA==}
dev: false
/@mapbox/unitbezier@0.0.1:
resolution: {integrity: sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==}
dev: false
/@mapbox/vector-tile@1.3.1:
resolution: {integrity: sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==}
dependencies:
'@mapbox/point-geometry': 0.1.0
dev: false
/@mapbox/whoots-js@3.1.0:
resolution: {integrity: sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==}
engines: {node: '>=6.0.0'}
dev: false
/@meoc/utils@0.2.4:
resolution: {integrity: sha512-BzJZ0sBDPleIkghDPyPfz5VPnVF8QEe4FkBRmcHxUVMyz2eavVIA7tWq4w+0CwSZavu6xXWNxN2yT4PvaYjJkQ==}
dependencies:
......@@ -3461,6 +3510,23 @@ packages:
/@tsconfig/node16@1.0.4:
resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
/@turf/distance@6.3.0:
resolution: {integrity: sha512-basi24ssNFnH3iXPFjp/aNUrukjObiFWoIyDRqKyBJxVwVOwAWvfk4d38QQyBj5nDo5IahYRq/Q+T47/5hSs9w==}
dependencies:
'@turf/helpers': 6.5.0
'@turf/invariant': 6.5.0
dev: false
/@turf/helpers@6.5.0:
resolution: {integrity: sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw==}
dev: false
/@turf/invariant@6.5.0:
resolution: {integrity: sha512-Wv8PRNCtPD31UVbdJE/KVAWKe7l6US+lJItRR/HOEW3eh+U/JwRCSUl/KZ7bmjM/C+zLNoreM2TU6OoLACs4eg==}
dependencies:
'@turf/helpers': 6.5.0
dev: false
/@types/babel__core@7.20.1:
resolution: {integrity: sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==}
dependencies:
......@@ -3502,6 +3568,10 @@ packages:
resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
dev: true
/@types/geojson@7946.0.10:
resolution: {integrity: sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==}
dev: false
/@types/graceful-fs@4.1.6:
resolution: {integrity: sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==}
dependencies:
......@@ -3546,6 +3616,12 @@ packages:
resolution: {integrity: sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==}
dev: true
/@types/mapbox-gl@2.7.11:
resolution: {integrity: sha512-4vSwPSTQIawZTFRiTY2R74aZwAiM9gE6KGj871xdyAPpa+DmEObXxQQXqL2PsMH31/rP9nxJ2Kv0boeTVJMXVw==}
dependencies:
'@types/geojson': 7946.0.10
dev: false
/@types/mdast@3.0.11:
resolution: {integrity: sha512-Y/uImid8aAwrEA24/1tcRZwpxX3pIFTSilcNDKSPn+Y2iDywSEachzRuvgAYYLR3wpGXAsMbv5lvKLDZLeYPAw==}
dependencies:
......@@ -5287,6 +5363,10 @@ packages:
source-map-js: 1.0.2
dev: true
/csscolorparser@1.0.3:
resolution: {integrity: sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==}
dev: false
/cssesc@3.0.0:
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
engines: {node: '>=4'}
......@@ -5602,6 +5682,10 @@ packages:
resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
dev: true
/earcut@2.2.4:
resolution: {integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==}
dev: false
/eastasianwidth@0.2.0:
resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
dev: true
......@@ -6653,6 +6737,10 @@ packages:
resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
engines: {node: '>=6.9.0'}
/geojson-vt@3.2.1:
resolution: {integrity: sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==}
dev: false
/get-caller-file@2.0.5:
resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
engines: {node: 6.* || 8.* || >= 10.*}
......@@ -6686,7 +6774,6 @@ packages:
/get-stream@6.0.1:
resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
engines: {node: '>=10'}
dev: true
/get-symbol-description@1.0.0:
resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
......@@ -6741,6 +6828,10 @@ packages:
ini: 1.3.8
dev: true
/gl-matrix@3.4.3:
resolution: {integrity: sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==}
dev: false
/glob-parent@5.1.2:
resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
engines: {node: '>= 6'}
......@@ -6889,6 +6980,10 @@ packages:
resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
dev: true
/grid-index@1.1.0:
resolution: {integrity: sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==}
dev: false
/gzip-size@6.0.0:
resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
engines: {node: '>=10'}
......@@ -8199,6 +8294,10 @@ packages:
verror: 1.10.0
dev: true
/kdbush@4.0.2:
resolution: {integrity: sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==}
dev: false
/kind-of@6.0.3:
resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
engines: {node: '>=0.10.0'}
......@@ -8531,6 +8630,42 @@ packages:
engines: {node: '>=8'}
dev: true
/mapbox-gl-controls@2.3.5(mapbox-gl@2.15.0):
resolution: {integrity: sha512-FP4c7WhNoE+5JicMkq8TSqJwaxEpkhJlsq4Ye1lIGBy7ubS/l6EZ15ZRumrICpDZGOMMlfKKCpaCo+Kt5omkTg==}
peerDependencies:
mapbox-gl: '>=1.0.0 <3.0.0'
dependencies:
'@turf/distance': 6.3.0
mapbox-gl: 2.15.0
dev: false
/mapbox-gl@2.15.0:
resolution: {integrity: sha512-fjv+aYrd5TIHiL7wRa+W7KjtUqKWziJMZUkK5hm8TvJ3OLeNPx4NmW/DgfYhd/jHej8wWL+QJBDbdMMAKvNC0A==}
dependencies:
'@mapbox/geojson-rewind': 0.5.2
'@mapbox/jsonlint-lines-primitives': 2.0.2
'@mapbox/mapbox-gl-supported': 2.0.1
'@mapbox/point-geometry': 0.1.0
'@mapbox/tiny-sdf': 2.0.6
'@mapbox/unitbezier': 0.0.1
'@mapbox/vector-tile': 1.3.1
'@mapbox/whoots-js': 3.1.0
csscolorparser: 1.0.3
earcut: 2.2.4
geojson-vt: 3.2.1
gl-matrix: 3.4.3
grid-index: 1.1.0
kdbush: 4.0.2
murmurhash-js: 1.0.0
pbf: 3.2.1
potpack: 2.0.0
quickselect: 2.0.0
rw: 1.3.3
supercluster: 8.0.1
tinyqueue: 2.0.3
vt-pbf: 3.1.3
dev: false
/mathml-tag-names@2.1.3:
resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
dev: true
......@@ -8760,6 +8895,10 @@ packages:
/ms@2.1.3:
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
/murmurhash-js@1.0.0:
resolution: {integrity: sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==}
dev: false
/mute-stream@0.0.7:
resolution: {integrity: sha512-r65nCZhrbXXb6dXOACihYApHw2Q6pV0M3V0PSxd74N0+D8nzAdEAITq2oAjA1jVnKI+tGvEBUpqiMh0+rW6zDQ==}
dev: true
......@@ -9256,6 +9395,14 @@ packages:
resolution: {integrity: sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==}
dev: true
/pbf@3.2.1:
resolution: {integrity: sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==}
hasBin: true
dependencies:
ieee754: 1.2.1
resolve-protobuf-schema: 2.1.0
dev: false
/perfect-debounce@1.0.0:
resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
dev: true
......@@ -9519,6 +9666,10 @@ packages:
picocolors: 1.0.0
source-map-js: 1.0.2
/potpack@2.0.0:
resolution: {integrity: sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw==}
dev: false
/prelude-ls@1.1.2:
resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==}
engines: {node: '>= 0.8.0'}
......@@ -9568,6 +9719,10 @@ packages:
sisteransi: 1.0.5
dev: true
/protocol-buffers-schema@3.6.0:
resolution: {integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==}
dev: false
/proxy-addr@2.0.7:
resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
engines: {node: '>= 0.10'}
......@@ -9650,6 +9805,10 @@ packages:
engines: {node: '>=8'}
dev: true
/quickselect@2.0.0:
resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
dev: false
/range-parser@1.2.1:
resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
engines: {node: '>= 0.6'}
......@@ -9878,6 +10037,12 @@ packages:
global-dirs: 0.1.1
dev: true
/resolve-protobuf-schema@2.1.0:
resolution: {integrity: sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==}
dependencies:
protocol-buffers-schema: 3.6.0
dev: false
/resolve.exports@1.1.1:
resolution: {integrity: sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==}
engines: {node: '>=10'}
......@@ -9954,6 +10119,10 @@ packages:
dependencies:
queue-microtask: 1.2.3
/rw@1.3.3:
resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
dev: false
/rxjs@6.6.7:
resolution: {integrity: sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==}
engines: {npm: '>=2.0.0'}
......@@ -10544,6 +10713,12 @@ packages:
- supports-color
dev: true
/supercluster@8.0.1:
resolution: {integrity: sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==}
dependencies:
kdbush: 4.0.2
dev: false
/supports-color@5.5.0:
resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
engines: {node: '>=4'}
......@@ -10697,6 +10872,10 @@ packages:
resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
dev: false
/tinyqueue@2.0.3:
resolution: {integrity: sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==}
dev: false
/tmp@0.0.33:
resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
engines: {node: '>=0.6.0'}
......@@ -11287,6 +11466,14 @@ packages:
optionalDependencies:
fsevents: 2.3.2
/vt-pbf@3.1.3:
resolution: {integrity: sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==}
dependencies:
'@mapbox/point-geometry': 0.1.0
'@mapbox/vector-tile': 1.3.1
pbf: 3.2.1
dev: false
/vue-demi@0.14.5(vue@3.2.47):
resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
engines: {node: '>=12'}
......
src/components/CustomPicker/index.vue
<script setup lang="ts"></script>
<template>
<view class="h-84 lh-10 flex text-28">
<view class="h-84 lh-10 flex text-28 bg-#fff p-2 pt-0 pb-0 pos-relative">
<fui-icon name="wait" size="45" />
<text class="ml-1">时间：</text>
<text class="text-#1890FF">11月30日09时30分-12月1日09时30分</text>
<fui-icon name="arrowright" size="45" class="absolute right-16" />
</view>
</template>
......
src/components/Map/Mapbox/Map.vue 0 → 100644
<script>
export default {
props: {
info: {
type: Object,
default: () => {},
},
},
data() {
return {
id: nanoid(),
options: {},
data: {},
location: {},
cloudImage: {},
}
},
async mounted() {
uni.showLoading({ title: '加载中...', mask: true })
const data = this.info
this.options = {
container: this.id,
control: {
navigation: {
zoom: false,
compass: false,
},
info: false,
reset: true,
geolocate: true,
},
style: {
zoom: data.radius <= 380 ? 14 : data.radius <= 1000 ? 12.7 : data.radius < 2000 ? 12.7 : 11.5,
center: [data.lon, data.lat],
},
}
},
methods: {
onMapLoad(_data) {
uni.hideLoading()
this.data = this.info
// this.getLocation().then((res) => (this.location = res))
},
onLoadCloudImage(data) {
if (data.open) {
this.findCloudImage()
} else {
this.cloudImage = ''
}
},
async getLocation() {
return new Promise((resolve) => {
uni.getLocation({
type: 'gcj02',
geocode: true,
success(res) {
resolve(res)
},
fail() {
Message.toast('获取定位信息失败！')
// FEXID: 默认定位
resolve({
latitude: 111.866827,
longitude: 26.848348,
})
},
})
})
},
findCloudImage() {},
},
}
</script>
<script module="mapbox" lang="renderjs">
import * as turf from '@turf/turf'
import { appendScript, appendStylesheet } from '/@/utils/dom'
import { accessToken, defaultStyle, loadMapControl, PopupImage, buildTdtTileUrl, EmptyImage, CustomControl } from '/@/components/Map/Mapbox'
import { getResourceUrl } from '/@/utils/proxy'
import { strawForestMatchExpression } from '/@/pages/tabbar/check/data'
// renderjs 官方文档
// https://uniapp.dcloud.io/tutorial/renderjs.html
// renderjs 的一些细节问题
// https://juejin.cn/post/7049185827582115870
export default {
mounted() {},
data() {
return {
data: {}
}
},
methods: {
loadLibs() {
const id = 'mapbox-gl'
const resource = 'static/mapbox-gl-js/v2.10.0/mapbox-gl'
return Promise.all([appendScript(id, `${resource}.js`), appendStylesheet(id, `${resource}.css`)])
},
initMap(options) {
// 移除地图
if (this.map && this.map.remove) {
this.map.remove()
}
// 加载地图
const mapboxgl = window.mapboxgl
const map = new mapboxgl.Map({
accessToken,
container: options.container,
style: Object.assign({
...defaultStyle,
...options?.style,
}),
localIdeographFontFamily: "'Noto Sans', 'Noto Sans CJK SC', sans-serif",
})
// 绑定作用域
this.map = map
// 加载地图控件
map.on('load', () => {
// 加载地图图层
this.initMapBasicLayers().then(() => {
// 调用逻辑层方法
this.loaded = true
this.$ownerInstance.callMethod('onMapLoad', {
center: map.getCenter(),
})
// 加载地图控件
loadMapControl(mapboxgl, map, options?.control)
// 添加云图切换控件
map.addControl(new CustomControl({
onOpen: () => {
this.$ownerInstance.callMethod('onLoadCloudImage', {
open: true,
})
return Promise.resolve()
},
onClose: () => {
this.$ownerInstance.callMethod('onLoadCloudImage', {
open: false,
})
}
}), 'top-right')
// 地图是否加载完成
this.mapLoaded = true
// debug
}).catch()
})
},
// 初始化各类底层图层
initMapBasicLayers() {
const map = this.map
return new Promise((resolve) => {
// 添加脉冲点
map.addImage('plusingDot', this.buildPlusingDot(), { pixelRatio: 2 })
// 云图数据源
map.addSource('cloud-image-source', {
type: 'image',
url: EmptyImage,
coordinates: [
[108, 31],
[116, 31],
[116, 23],
[108, 23],
],
})
// 云图图层
map.addLayer({
id: 'cloud-image-layer',
type: 'raster',
source: 'cloud-image-source',
layout: {
visibility: 'none',
},
paint: {
'raster-fade-duration': 0,
},
},
'100000-line')
// 核查范围图层
map.addSource('maine', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [],
},
})
map.addLayer({
id: 'maine',
type: 'fill',
source: 'maine',
layout: {},
paint: {
'fill-color': '#fff',
'fill-opacity': 0.02,
},
})
map.addLayer({
id: 'outline',
type: 'line',
source: 'maine',
layout: {
'line-cap': 'round',
'line-join': 'round',
},
paint: {
'line-color': '#09c8ff',
'line-dasharray': [0.2, 2],
'line-width': 2,
},
})
map.addLayer({
id: 'linetext',
type: 'symbol',
source: 'maine',
layout: {
'symbol-placement': 'line',
'text-field': '{radius}m',
},
paint: {
'text-color': '#ff0062',
'text-halo-width': 2,
'text-halo-color': '#fff',
},
})
// 火点图层
map.addSource('points', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [],
},
})
map.addLayer({
id: 'points',
type: 'symbol',
source: 'points',
layout: {
'icon-size': 0.25,
'icon-image': strawForestMatchExpression,
'icon-allow-overlap': true,
'icon-ignore-placement': true,
},
paint: {},
})
// 核查点图层
map.addSource('check-points', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [],
},
})
map.addLayer({
id: 'check-points',
type: 'symbol',
source: 'check-points',
layout: {
'icon-image': 'plusingDot',
'icon-allow-overlap': true,
'icon-ignore-placement': true,
},
paint: {},
})
resolve()
})
},
flyTo(data) {
const map = this.map
const center = [data.lon, data.lat]
const point = turf.point(center, {
code: data.code,
status: data.status,
radius: data.radius,
mapIconStatus: `INITIAL.${data.status}`,
})
const circle = turf.circle(point, Number(Number(data.radius / 1000).toFixed(2)))
// 更新核查半径数据源
map.getSource('maine').setData(circle)
// 更新火点信息数据源
map.getSource('points').setData(point)
// 移动视图
map.flyTo({
zoom: data.radius <= 380 ? 14 : (data.radius <= 1000 ? 12.7 : (data.radius < 2000 ? 12.7 : 11.5)),
center: [center[0], center[1]],
})
},
// 脉冲圆点
buildPlusingDot() {
const map = this.map
const size = 60
// 脉冲点
return {
width: size,
height: size,
data: new Uint8Array(size * size * 4),
onAdd: function() {
var canvas = document.createElement('canvas')
canvas.width = this.width
canvas.height = this.height
this.context = canvas.getContext('2d')
this.context.imageSmoothingEnabled = true
},
render: function() {
var duration = 1500
var t = (performance.now() % duration) / duration
var radius = (size / 2) * 0.4
var outerRadius = (size / 2) * 0.7 * t + radius
var context = this.context
// draw outer circle
context.clearRect(0, 0, this.width, this.height)
context.beginPath()
context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2)
context.fillStyle = 'rgba(255, 200, 200, ' + (1 - t) + ')'
context.fill()
// draw inner circle
context.beginPath()
context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2)
context.fillStyle = 'rgba(255, 100, 100, 1)'
context.strokeStyle = 'white'
context.lineWidth = 3 // 2 + 4 * (1 - t)
context.fill()
context.stroke()
// update this image's data with data from the canvas
this.data = context.getImageData(0, 0, this.width, this.height).data
// keep the map repainting
map.triggerRepaint()
// return `true` to let the map know that the image was updated
return true
},
}
},
changeOptions(options) {
if (!options.container) {
return
}
if (typeof window.mapboxgl === 'object') {
this.initMap(options)
} else {
this.loadLibs().then(() => {
this.initMap(options)
})
}
},
changeDataPoint(point) {
if (!this.loaded) {
return
}
// 更新数据源
this.map.getSource('point').setData({
type: 'FeatureCollection',
features: [point],
})
},
changeData(data) {
if (!this.loaded) {
return
}
this.data = data
this.flyTo(data)
},
changeLocation(location) {
if (!this.loaded) {
return
}
console.log('changeLocation', location)
// 更新火点信息数据源
this.map.getSource('check-points').setData({
type: "Feature",
geometry: { type: 'Point', coordinates: [location.latitude, location.longitude] }
})
},
changeCloudImage(image) {
if (!this.loaded) {
return
}
console.log('changeCloudImage', image)
const map = this.map
if (image) {
map.getSource('cloud-image-source').updateImage({ url: getResourceUrl(image.src) })
map.setLayoutProperty('cloud-image-layer', 'visibility', 'visible')
map.flyTo({
zoom: 4.7,
center: [111.866827, 26.848348],
})
} else {
map.setLayoutProperty('cloud-image-layer', 'visibility', 'none')
this.flyTo(this.data)
}
},
},
}
</script>
<!-- renderjs 视图层模块 -->
<template>
<!-- #ifdef APP-PLUS || H5 -->
<view
class="map wrap"
:id="id"
:options="options"
:change:options="mapbox.changeOptions"
:data="data"
:change:data="mapbox.changeData"
:location="location"
:change:location="mapbox.changeLocation"
:cloudImage="cloudImage"
:change:cloudImage="mapbox.changeCloudImage"
>
<!-- -->
</view>
<!-- #endif -->
<!-- #ifndef APP-PLUS || H5 -->
<view class="empty wrap">非 APP、H5 环境不支持</view>
<!-- #endif -->
</template>
<style lang="less" scoped>
.wrap {
display: flex;
width: 100%;
height: 100%;
}
</style>
src/components/Map/Mapbox/index.ts 0 → 100644
import type { Ref } from 'vue'
import { toRaw } from 'vue'
import type mapboxgl from 'mapbox-gl'
import { RulerControl } from 'mapbox-gl-controls'
// Mapbox accessToken
export const accessToken = 'pk.eyJ1IjoiaWZ6bSIsImEiOiJjamswc3M1a2gwYWEwM3Zxa3ZsMjh3djkwIn0.h93-XtdRdtoC1KbVv_ZIow'
// 天地图密钥
export const tk = 'aa0ccd36f2dbb86dbb16cbf63f0034a6'
// 自定义图层 host
// const host = 'http://192.168.0.156:1234'
// const host = 'https://gis.kshg.yiring.com'
const host = 'http://hb.straw.yiring.com:40051'
// 构建天地图图层地址
export function buildTdtTileUrl(id: string, tk: string) {
// return `${host}/api/tdt/cache/${id}/{z}/{y}/{x}/${tk}?v=2022`
return `${host}/straw/api/proxy/t/${id}/{z}/{y}/{x}/${tk}?v=2022`
}
/**
* 地图样式
*/
export const defaultStyle: mapboxgl.Style = {
version: 8,
zoom: 5.5,
center: [111.507082, 27.19464],
sprite: `${host}/api/sprites/straw.v2/sprite`,
glyphs: `${host}/api/fonts/{fontstack}/{range}.pbf`,
sources: {
'wms-img_w-source': {
type: 'raster',
tiles: [buildTdtTileUrl('img', tk)],
tileSize: 256,
maxzoom: 18,
},
'wms-cia_w-source': {
type: 'raster',
tiles: [buildTdtTileUrl('cia', tk)],
tileSize: 256,
maxzoom: 18,
},
'wms-vec_w-source': {
type: 'raster',
tiles: [buildTdtTileUrl('vec', tk)],
tileSize: 256,
maxzoom: 18,
},
'wms-cva_w-source': {
type: 'raster',
tiles: [buildTdtTileUrl('cva', tk)],
tileSize: 256,
maxzoom: 18,
},
'wms-ter_w-source': {
type: 'raster',
tiles: [buildTdtTileUrl('cva', tk)],
tileSize: 256,
maxzoom: 18,
},
'wms-cta_w-source': {
type: 'raster',
tiles: [buildTdtTileUrl('cva', tk)],
tileSize: 256,
maxzoom: 18,
},
'100000': {
type: 'vector',
url: `${host}/api/tilesets/100000/tilejson`,
},
'430000': {
type: 'vector',
url: `${host}/api/tilesets/430000/tilejson`,
},
'430000.mask': {
type: 'vector',
url: `${host}/api/tilesets/430000.mask/tilejson`,
},
},
layers: [
// 火点核查所需默认图层
{
id: 'wms-img_w-layer',
type: 'raster',
source: 'wms-img_w-source',
layout: { visibility: 'visible' },
},
{
id: 'wms-cia_w-layer',
type: 'raster',
source: 'wms-cia_w-source',
layout: { visibility: 'visible' },
},
{
id: 'wms-vec_w-layer',
type: 'raster',
source: 'wms-vec_w-source',
layout: { visibility: 'none' },
},
{
id: 'wms-cva_w-layer',
type: 'raster',
source: 'wms-cva_w-source',
layout: { visibility: 'none' },
},
{
id: 'wms-ter_w-layer',
type: 'raster',
source: 'wms-ter_w-source',
layout: { visibility: 'none' },
},
{
id: 'wms-cta_w-layer',
type: 'raster',
source: 'wms-cta_w-source',
layout: { visibility: 'none' },
},
// 占位图层
{
id: 'background',
type: 'background',
layout: { visibility: 'none' },
paint: { 'background-color': 'hsla(0, 0%, 0%, 0)' },
},
{
id: `100000-line`,
source: '100000',
'source-layer': '100000',
type: 'line',
paint: {
'line-width': 1,
},
},
{
id: '430000-mask',
type: 'fill',
source: '430000.mask',
'source-layer': '430000.mask',
layout: {
visibility: 'visible',
},
paint: {
'fill-color': '#fff',
'fill-opacity': 0.3,
},
minzoom: 5,
},
{
id: `430000-shadow`,
type: 'line',
source: '430000',
'source-layer': '430000',
layout: {
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-width': 8,
'line-blur': 92.7,
'line-offset': -4,
},
minzoom: 5,
},
{
id: `430000-line`,
source: '430000',
'source-layer': '430000',
type: 'line',
paint: {
'line-width': 2,
},
},
],
}
interface LayerOption {
label: string
value: string
image: string
active?: boolean
}
/**
* 图层控件
* 目前仅支持天地图图层
*/
class LayerControl implements mapboxgl.IControl {
map: mapboxgl.Map | undefined
container: HTMLElement | undefined
tk: string
layers?: LayerOption[]
constructor(options: Recordable) {
this.tk = options.tk
this.layers = options.layers
}
onAdd(map: mapboxgl.Map) {
this.map = map
this.container = document.createElement('div')
this.container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group mapbox-control'
const layersWrapHtml: string[] = []
if (this.layers) {
layersWrapHtml.push('<div class="mapboxgl-ctrl-layer-wrap">')
this.layers.forEach((layer) => {
layersWrapHtml.push(`
<div class="mapboxgl-ctrl-layer ${layer.active ? 'active' : ''}" data-layer-ids="${layer.value}">
<img src="${layer.image}" alt="${layer.label}" />
<span>${layer.label}</span>
</div>
`)
for (const id of layer.value.split(',')) {
map.addLayer(
{
id: `t_${id}`,
type: 'raster',
source: {
type: 'raster',
tiles: [buildTdtTileUrl(id, this.tk)],
tileSize: 256,
maxzoom: 18,
},
layout: { visibility: layer.active ? 'visible' : 'none' },
},
// 'background',
)
}
})
layersWrapHtml.push('</div>')
}
this.container.innerHTML = `
<button type="button" class="mapboxgl-ctrl-layer-button" title="地图样式选择">
<span class="iconify" data-icon="fluent:layer-20-filled" data-width="24" data-height="24"></span>
${layersWrapHtml.join('')}
</button>
`
this.container.addEventListener('click', (e) => {
const target = e.target as HTMLElement
const parent = target.parentElement as HTMLElement
if (parent.classList.contains('mapboxgl-ctrl-layer')) {
const ids = parent.getAttribute('data-layer-ids') as string
const list = parent.parentElement?.children as HTMLCollection
for (let i = 0; i < list.length; i++) {
const item = list[i] as HTMLElement
if (item.classList.contains('mapboxgl-ctrl-layer')) {
if (item.getAttribute('data-layer-ids') === ids) {
item.classList.toggle('active')
} else {
item.classList.remove('active')
}
}
}
this.layers?.forEach((layer) => {
for (const id of layer.value.split(',')) {
map.setLayoutProperty(`t_${id}`, 'visibility', 'none')
}
})
if (parent.classList.contains('active')) {
for (const id of ids.split(',')) {
map.setLayoutProperty(`t_${id}`, 'visibility', 'visible')
}
}
return
}
this.container?.querySelector('button')?.classList.toggle('-active')
})
return this.container
}
onRemove() {
this.container?.parentNode?.removeChild(this.container)
this.map = undefined
}
}
/**
* 经纬度坐标拾取控件
*/
class GeolocateInfoControl implements mapboxgl.IControl {
map: mapboxgl.Map | undefined
container: HTMLElement | undefined
toText(lngLat: mapboxgl.LngLat) {
return `经度：${lngLat.lng.toFixed(6)}, 纬度：${lngLat.lat.toFixed(6)}`
}
onAdd(map: mapboxgl.Map) {
this.map = map
this.container = document.createElement('div')
this.container.className = 'mapboxgl-ctrl mapboxgl-ctrl-lnglat'
this.container.textContent = this.toText(map.getCenter())
map.on('mousemove', (e) => {
const element = this.container as HTMLElement
element.textContent = this.toText(e.lngLat)
})
return this.container
}
onRemove() {
this.container?.parentNode?.removeChild(this.container)
this.map = undefined
}
}
/**
* 地图复位控件
*/
class ResetControl implements mapboxgl.IControl {
map: mapboxgl.Map | undefined
container: HTMLElement | undefined
options: mapboxgl.FlyToOptions
constructor(options: mapboxgl.FlyToOptions) {
this.options = options
}
onAdd(map: mapboxgl.Map) {
this.map = map
this.container = document.createElement('div')
this.container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group mapbox-control'
this.container.innerHTML = `
<button type="button" class="mapboxgl-ctrl-reset-button mapboxgl-ctrl-reset" title="地图复位">
<span class="mapboxgl-ctrl-icon" aria-hidden="true" title="Reset"></span>
</button>
`
this.container.addEventListener('click', () => {
this.map?.flyTo(this.options)
})
return this.container
}
onRemove() {
this.container?.parentNode?.removeChild(this.container)
this.map = undefined
}
}
/**
* 测量控件
*/
class MeasureControl implements mapboxgl.IControl {
map: mapboxgl.Map | undefined
container: HTMLElement | undefined
onAdd(map: mapboxgl.Map) {
this.map = map
this.container = document.createElement('div')
this.container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group mapbox-control'
this.container.innerHTML = `
<button type="button" class="mapboxgl-ctrl-reset-button" title="面积计算">
<span class="iconify" data-icon="carbon:area-custom" data-width="24" data-height="24"></span>
</button>
`
this.container.addEventListener('click', () => {
this.container?.querySelector('button')?.classList.toggle('-active')
console.log('TODO: 测量面积功能暂未实现, 敬请期待...')
})
return this.container
}
onRemove() {
this.container?.parentNode?.removeChild(this.container)
this.map = undefined
}
}
/**
* 风场控件
*/
export class WindyControl implements mapboxgl.IControl {
map: mapboxgl.Map | undefined
container: HTMLElement | undefined
onOpen: () => Promise<void>
onClose: Function
constructor(options: Recordable) {
this.onOpen = options.onOpen
this.onClose = options.onClose
}
onAdd(map: mapboxgl.Map) {
this.map = map
this.container = document.createElement('div')
this.container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group mapbox-control'
this.container.innerHTML = `
<button type="button" class="mapboxgl-ctrl-reset-button" title="风场">
<span class="iconify" data-icon="ph:wind-light" data-width="24" data-height="24"></span>
</button>
`
this.container.addEventListener('click', () => {
const button = this.container?.querySelector('button')
if (!button?.classList.contains('-active')) {
this.onOpen().then(() => {
button?.classList.add('-active')
})
} else {
this.onClose()
button?.classList.remove('-active')
}
})
return this.container
}
onRemove() {
this.container?.parentNode?.removeChild(this.container)
this.map = undefined
}
}
/**
* 自定义控件
*/
export class CustomControl implements mapboxgl.IControl {
map: mapboxgl.Map | undefined
container: HTMLElement | undefined
onOpen: () => Promise<void>
onClose: Function
constructor(options: Recordable) {
this.onOpen = options.onOpen
this.onClose = options.onClose
}
onAdd(map: mapboxgl.Map) {
this.map = map
this.container = document.createElement('div')
this.container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group mapbox-control'
this.container.innerHTML = `
<button type="button" class="mapboxgl-ctrl-cloud-button">
<span class="mapboxgl-ctrl-icon" aria-hidden="true" title="Reset"></span>
</button>
`
this.container.addEventListener('click', () => {
const button = this.container?.querySelector('button')
if (!button?.classList.contains('-active')) {
this.onOpen().then(() => {
button?.classList.add('-active')
})
} else {
this.onClose()
button?.classList.remove('-active')
}
})
return this.container
}
onRemove() {
this.container?.parentNode?.removeChild(this.container)
this.map = undefined
}
}
export interface MapOptions {
control?: MapControlOptions
style?: mapboxgl.Style | Recordable
}
export interface MapControlOptions {
// 导航控件
navigation?: {
zoom?: boolean
compass?: boolean
}
// 图层控制
layer?:
| boolean
| {
tk: string
layers: LayerOption[]
}
// 重置控件
reset?: boolean | mapboxgl.FlyToOptions
// 全屏控件
fullscreen?: boolean
// 比例尺
scale?: boolean
// 经纬度拾取
info?: boolean
// 定位控件
geolocate?: Recordable
// 面积测算控件
measure?: boolean
// 距离测算控件
ruler?: { show: boolean; callback: any }
// 风场控件
windy?: boolean
// 绘制控件
draw?: boolean
}
/**
* 加载地图控件
* @param map 地图实例
* @param options 控件配置
*/
export function loadMapControl(mapboxgl: any, map: mapboxgl.Map, options?: MapControlOptions) {
if (!options) {
return
}
// 导航控件
if (options.navigation) {
map.addControl(
new mapboxgl.NavigationControl({
showCompass: options.navigation.compass,
showZoom: options.navigation.zoom,
}),
)
}
// 全屏控件
if (options.fullscreen) {
map.addControl(new mapboxgl.FullscreenControl())
}
// 地图复位控件
if (options.reset) {
if (typeof options.reset === 'boolean') {
map.addControl(
new ResetControl({
zoom: map.getZoom(),
pitch: map.getPitch(),
bearing: map.getBearing(),
center: map.getCenter(),
}),
)
} else {
map.addControl(new ResetControl(options.reset))
}
}
// 图层选择控件
if (options.layer) {
if (typeof options.layer === 'boolean') {
map.addControl(
new LayerControl({
tk,
layers: [
{
label: '影像',
value: 'img,cia',
image: './resource/img/layers/img_w.png',
active: false,
},
{
label: '矢量',
value: 'vec,cva',
image: './resource/img/layers/vec_w.png',
},
{
label: '地形',
value: 'ter,cta',
image: './resource/img/layers/ter_w.png',
},
],
}),
)
} else {
map.addControl(new LayerControl(options.layer))
}
}
// 面积测量控件
if (options.measure) {
map.addControl(new MeasureControl())
}
// 经纬度信息控件
if (options.info) {
map.addControl(new GeolocateInfoControl(), 'bottom-left')
}
// 比例尺控件
if (options.scale) {
map.addControl(new mapboxgl.ScaleControl(), 'bottom-left')
}
// 测距控件
const rulers = toRaw(options.ruler)
if (rulers && rulers.show) {
const instance = new RulerControl({
font: ['Microsoft YaHei'],
fontHalo: 2,
units: 'kilometers',
labelFormat: (n) => `${n.toFixed(3)} km`,
})
map.addControl(instance, 'bottom-right')
if (rulers.callback) {
rulers.callback(instance)
}
return instance
}
// 定位
if (options.geolocate) {
const geolocate = new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true,
timeout: 10000,
},
trackUserLocation: true,
showUserHeading: true,
})
// #ifdef APP-PLUS
geolocate.geolocation = options.geolocate
// #endif
map.addControl(geolocate, 'top-right')
}
}
export function toPointGeoJSON(
data?: ({ lon: number; lat: number } & Recordable)[],
): GeoJSON.FeatureCollection<GeoJSON.Geometry, GeoJSON.GeoJsonProperties> {
return {
type: 'FeatureCollection',
features: !data
? []
: data.map((item) => {
return {
type: 'Feature',
properties: {
...item,
},
geometry: {
type: 'Point',
coordinates: [item.lon, item.lat],
},
}
}),
}
}
export function createPopupHtml(entry: Recordable, mapping: Recordable) {
const htmls: string[] = ['<div class="mapboxgl-custom-popup">']
for (const key in entry) {
const lable = mapping[key]
if (!lable) {
continue
}
const value = entry[key]
htmls.push(`
<div class="popup-row">
<span class="popup-title">${lable}：</span>
${value}
</div>
`)
}
htmls.push('</div>')
return htmls.join('')
}
export const getMapInstance = (ref: Ref<any>): mapboxgl.Map => toRaw(ref.value?.map) as mapboxgl.Map
export function getGeoJSONSource(map: mapboxgl.Map, sourceName: string): mapboxgl.GeoJSONSource {
return map.getSource(sourceName) as mapboxgl.GeoJSONSource
}
export function getImageSource(map: mapboxgl.Map, sourceName: string): mapboxgl.ImageSource {
return map.getSource(sourceName) as mapboxgl.ImageSource
}
export const EmptyImage =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAABlBMVEXMzMz/+v+u+uEzAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAACklEQVQImWNgAAAAAgAB9HFkpgAAAABJRU5ErkJggg=='
export const PopupImage = 'https://oss.kshg.yiring.com/kshg/public/popup.png'
src/pages.json
......@@ -26,13 +26,16 @@
"style": {
"navigationBarTitleText": "监测预报",
"enablePullDownRefresh": false,
// #ifdef H5
"navigationStyle": "custom",
// #endif
"navigationBarBackgroundColor": "#1890FF",
"app-plus": {
"titleNView": false
"titleNView": {
"backgroundImage": "/static/warnforecast.png",
"backgroundRepeat": "no-repeat"
}
},
"enableReachBottom": false
"SplitLineStyles": {
"height": "160px"
}
}
},
{
......@@ -40,13 +43,13 @@
"style": {
"navigationBarTitleText": "消息",
"enablePullDownRefresh": false,
// #ifdef H5
"navigationStyle": "custom",
// #endif
"navigationBarBackgroundColor": "#1890FF",
"app-plus": {
"titleNView": false
},
"enableReachBottom": false
"titleNView": {
"backgroundImage": "/static/warnforecast.png",
"backgroundRepeat": "no-repeat"
}
}
}
},
{
......
src/pages/business/index.vue
<script setup lang="ts">
import Header from '@/components/Layout/Header.vue'
import { climateModules, forecastModules, liveModules, weatherModules } from '@/utils/const/Navigation'
const navs = [
......@@ -16,7 +14,7 @@
<template>
<view class="">
<!-- 头部 -->
<Header title="监测预报" />
<!-- <Header title="监测预报" /> -->
<!-- 内容 -->
<view class="p-2 pt-3 pb-1">
<view class="box-shadow-def p-2 pt-3 b-rd-2 mb-3 bg-#fff" v-for="(item, index) in navs" :key="index">
......
src/pages/business/monitor/rain.vue
......@@ -10,7 +10,7 @@
</script>
<template>
<view class="bg">
<view class="bg h-100vh">
<CustomPicker />
</view>
</template>
src/pages/message/index.vue
<script setup lang="ts">
import Header from '@/components/Layout/Header.vue'
import MenuHeader from '@/components/Layout/MenuHeader.vue'
const options = ['全部消息', '应急响应', '预警信号', '临灾警报', '服务材料', '重要天气']
......@@ -12,7 +11,7 @@
<template>
<view class="bg-#fff">
<!-- 头部 -->
<Header title="消息" />
<!-- <Header title="消息" /> -->
<!-- tab -->
<view class="bg-#fff box-shadow-bottom pt-3.5 pl-3.2 pb-2.5">
<fui-data-tag
......
types/components.d.ts
......@@ -134,6 +134,7 @@ declare module '@vue/runtime-core' {
Grid: typeof import('./../src/components/Layout/Grid.vue')['default']
Header: typeof import('./../src/components/Layout/Header.vue')['default']
Icon: typeof import('./../src/components/Icon/index.vue')['default']
Map: typeof import('./../src/components/Map/Mapbox/Map.vue')['default']
MenuHeader: typeof import('./../src/components/Layout/MenuHeader.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论