Merge branch 'lixin' of zhangtao/gis into develop
This commit is contained in:
commit
49ed5e6a7d
2
.env
2
.env
|
|
@ -1,5 +1,5 @@
|
|||
# title
|
||||
VITE_APP_TITLE = '智飞'
|
||||
VITE_APP_TITLE = '时空大数据平台'
|
||||
|
||||
# 端口号
|
||||
VITE_PORT = 3050
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import VueSetupExtend from 'vite-plugin-vue-setup-extend'
|
|||
import { unocss } from './unocss'
|
||||
import { configHtmlPlugin } from './html'
|
||||
import { configMockPlugin } from './mock'
|
||||
import cesium from 'vite-plugin-cesium'
|
||||
|
||||
export function createVitePlugins(viteEnv, isBuild) {
|
||||
const plugins = [
|
||||
|
|
@ -17,7 +18,8 @@ export function createVitePlugins(viteEnv, isBuild) {
|
|||
}),
|
||||
VueSetupExtend(),
|
||||
unocss(),
|
||||
configHtmlPlugin(viteEnv, isBuild)
|
||||
configHtmlPlugin(viteEnv, isBuild),
|
||||
cesium()
|
||||
]
|
||||
|
||||
viteEnv?.VITE_APP_USE_MOCK && plugins.push(configMockPlugin(isBuild))
|
||||
|
|
|
|||
35
index.html
35
index.html
|
|
@ -1,19 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
|
||||
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.21/skins/default/aliplayer-min.css" />
|
||||
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.21/aliplayer-h5-min.js"></script>
|
||||
<!-- Include the CesiumJS JavaScript and CSS files -->
|
||||
<script src="https://cesium.com/downloads/cesiumjs/releases/1.101/Build/Cesium/Cesium.js"></script>
|
||||
<link href="https://cesium.com/downloads/cesiumjs/releases/1.101/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
|
||||
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.21/skins/default/aliplayer-min.css" />
|
||||
|
||||
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
|
||||
<script charset="utf-8" type="text/javascript"
|
||||
src="https://g.alicdn.com/de/prismplayer/2.9.21/aliplayer-h5-min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -606,7 +606,6 @@
|
|||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
|
||||
"integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"estree-walker": "^2.0.1",
|
||||
"picomatch": "^2.2.2"
|
||||
|
|
@ -674,8 +673,7 @@
|
|||
"@types/estree": {
|
||||
"version": "0.0.51",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
|
||||
"integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ=="
|
||||
},
|
||||
"@types/jest": {
|
||||
"version": "27.4.1",
|
||||
|
|
@ -1372,6 +1370,9 @@
|
|||
"at-least-node": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
|
||||
<<<<<<< HEAD
|
||||
"integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg=="
|
||||
=======
|
||||
"integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
|
||||
"dev": true
|
||||
},
|
||||
|
|
@ -1382,6 +1383,7 @@
|
|||
"requires": {
|
||||
"tslib": "^2.3.0"
|
||||
}
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.26.1",
|
||||
|
|
@ -1547,6 +1549,11 @@
|
|||
"dev": true
|
||||
},
|
||||
"cesium": {
|
||||
<<<<<<< HEAD
|
||||
"version": "1.92.0",
|
||||
"resolved": "https://registry.npmjs.org/cesium/-/cesium-1.92.0.tgz",
|
||||
"integrity": "sha512-qU2EIV3M+ru6uF5UQUjUWXeq9UVieMBeq+Q8fzzNbFgeSbLrvnJ7jSJq0vvgaVDPe0PnmN72FZKMDiJdTFpMnQ=="
|
||||
=======
|
||||
"version": "1.102.0",
|
||||
"resolved": "https://registry.npmjs.org/cesium/-/cesium-1.102.0.tgz",
|
||||
"integrity": "sha512-6reR5r2l9vkNClAEbK0NB+7vg27fzHplM1atdDM5CdUQUwKF3my9edi5BHcGRCgZ3ONmjU+ruGHwRXtmMG7dng==",
|
||||
|
|
@ -1554,6 +1561,7 @@
|
|||
"@cesium/engine": "2.0.0",
|
||||
"@cesium/widgets": "2.0.0"
|
||||
}
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
},
|
||||
"chalk": {
|
||||
"version": "5.0.1",
|
||||
|
|
@ -1996,8 +2004,7 @@
|
|||
"encodeurl": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
|
||||
"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
|
||||
"dev": true
|
||||
"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
|
||||
},
|
||||
"end-of-stream": {
|
||||
"version": "1.4.4",
|
||||
|
|
@ -2587,8 +2594,12 @@
|
|||
"etag": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
|
||||
<<<<<<< HEAD
|
||||
"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
|
||||
=======
|
||||
"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
|
||||
"dev": true
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
},
|
||||
"event-pubsub": {
|
||||
"version": "4.3.0",
|
||||
|
|
@ -2857,8 +2868,12 @@
|
|||
"fresh": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
|
||||
<<<<<<< HEAD
|
||||
"integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="
|
||||
=======
|
||||
"integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
|
||||
"dev": true
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
},
|
||||
"fs-extra": {
|
||||
"version": "10.1.0",
|
||||
|
|
@ -3310,7 +3325,10 @@
|
|||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
|
||||
"integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
"dev": true,
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
"requires": {
|
||||
"@types/estree": "*"
|
||||
}
|
||||
|
|
@ -3553,7 +3571,6 @@
|
|||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
|
||||
"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"graceful-fs": "^4.1.6",
|
||||
"universalify": "^2.0.0"
|
||||
|
|
@ -3748,8 +3765,12 @@
|
|||
"mime": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
|
||||
<<<<<<< HEAD
|
||||
"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
|
||||
=======
|
||||
"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
|
||||
"dev": true
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
},
|
||||
"mime-db": {
|
||||
"version": "1.52.0",
|
||||
|
|
@ -4152,8 +4173,7 @@
|
|||
"parseurl": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
|
||||
"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
|
||||
},
|
||||
"pascal-case": {
|
||||
"version": "3.1.2",
|
||||
|
|
@ -4216,8 +4236,7 @@
|
|||
"picomatch": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
|
||||
},
|
||||
"pinia": {
|
||||
"version": "2.0.14",
|
||||
|
|
@ -4397,8 +4416,12 @@
|
|||
"range-parser": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
|
||||
<<<<<<< HEAD
|
||||
"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
|
||||
=======
|
||||
"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
|
||||
"dev": true
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
},
|
||||
"raw-body": {
|
||||
"version": "2.4.3",
|
||||
|
|
@ -4551,7 +4574,10 @@
|
|||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/rollup-plugin-external-globals/-/rollup-plugin-external-globals-0.6.1.tgz",
|
||||
"integrity": "sha512-mlp3KNa5sE4Sp9UUR2rjBrxjG79OyZAh/QC18RHIjM+iYkbBwNXSo8DHRMZWtzJTrH8GxQ+SJvCTN3i14uMXIA==",
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
"dev": true,
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
"requires": {
|
||||
"@rollup/pluginutils": "^4.0.0",
|
||||
"estree-walker": "^2.0.1",
|
||||
|
|
@ -4635,7 +4661,10 @@
|
|||
"version": "0.18.0",
|
||||
"resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
|
||||
"integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
"dev": true,
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
"requires": {
|
||||
"debug": "2.6.9",
|
||||
"depd": "2.0.0",
|
||||
|
|
@ -4656,7 +4685,10 @@
|
|||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
||||
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
"dev": true,
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
},
|
||||
|
|
@ -4664,28 +4696,43 @@
|
|||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
<<<<<<< HEAD
|
||||
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
|
||||
=======
|
||||
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
|
||||
"dev": true
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
}
|
||||
}
|
||||
},
|
||||
"depd": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
|
||||
<<<<<<< HEAD
|
||||
"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
|
||||
=======
|
||||
"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
|
||||
"dev": true
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
},
|
||||
"destroy": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
|
||||
<<<<<<< HEAD
|
||||
"integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
|
||||
=======
|
||||
"integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
|
||||
"dev": true
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
},
|
||||
"http-errors": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
|
||||
"integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
"dev": true,
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
"requires": {
|
||||
"depd": "2.0.0",
|
||||
"inherits": "2.0.4",
|
||||
|
|
@ -4697,14 +4744,21 @@
|
|||
"ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
<<<<<<< HEAD
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
|
||||
=======
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
||||
"dev": true
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
},
|
||||
"on-finished": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
|
||||
"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
"dev": true,
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
"requires": {
|
||||
"ee-first": "1.1.1"
|
||||
}
|
||||
|
|
@ -4712,8 +4766,12 @@
|
|||
"statuses": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
|
||||
<<<<<<< HEAD
|
||||
"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
|
||||
=======
|
||||
"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
|
||||
"dev": true
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -4730,7 +4788,10 @@
|
|||
"version": "1.15.0",
|
||||
"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
|
||||
"integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
"dev": true,
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
"requires": {
|
||||
"encodeurl": "~1.0.2",
|
||||
"escape-html": "~1.0.3",
|
||||
|
|
@ -5240,8 +5301,7 @@
|
|||
"universalify": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
|
||||
"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
|
||||
},
|
||||
"unocss": {
|
||||
"version": "0.16.4",
|
||||
|
|
@ -5442,7 +5502,10 @@
|
|||
"version": "1.2.22",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-cesium/-/vite-plugin-cesium-1.2.22.tgz",
|
||||
"integrity": "sha512-OnS+VKNGck4kUu4/67Fdfhz0/zF9mDVNUp9hUWtX19C38O0mJsJy2MH1ev2QcrVLf6VieJ7vCGxkLchdB1n1HQ==",
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
"dev": true,
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
"requires": {
|
||||
"fs-extra": "^9.1.0",
|
||||
"rollup-plugin-external-globals": "^0.6.1",
|
||||
|
|
@ -5453,7 +5516,10 @@
|
|||
"version": "9.1.0",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
|
||||
"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
"dev": true,
|
||||
>>>>>>> 8f14e183188796c4598614c8814b3de6a2142915
|
||||
"requires": {
|
||||
"at-least-node": "^1.0.0",
|
||||
"graceful-fs": "^4.2.0",
|
||||
|
|
|
|||
|
|
@ -17,15 +17,13 @@
|
|||
"@vicons/ionicons5": "^0.10.0",
|
||||
"ali-oss": "^6.17.1",
|
||||
"axios": "^0.26.1",
|
||||
"cesium": "^1.102.0",
|
||||
"cesium": "^1.92.0",
|
||||
"dayjs": "^1.11.2",
|
||||
"mockjs": "^1.1.0",
|
||||
"pinia": "^2.0.13",
|
||||
"pinia-plugin-persist": "^1.0.0",
|
||||
"three": "^0.146.0",
|
||||
"threebox": "^0.1.5",
|
||||
"threebox-plugin": "^2.2.7",
|
||||
"tinymce": "^5.10.2",
|
||||
"vite-plugin-cesium": "^1.2.22",
|
||||
"vue": "^3.2.16",
|
||||
"vue-jstree": "^2.1.6",
|
||||
"vue-router": "^4.0.14",
|
||||
|
|
|
|||
14
src/App.vue
14
src/App.vue
|
|
@ -7,14 +7,16 @@
|
|||
* @FilePath: \gis\src\App.vue
|
||||
-->
|
||||
<template>
|
||||
<dash-board/>
|
||||
<div>
|
||||
<Dashboard />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dashBoard from './views/dashboard/index.vue'
|
||||
import Dashboard from './views/dashboard/index.vue'
|
||||
export default {
|
||||
components:{
|
||||
dashBoard
|
||||
components: {
|
||||
Dashboard
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -25,5 +27,9 @@ export default {
|
|||
.n-config-provider {
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-ms-user-select: none; /* IE 10+ and Edge */
|
||||
user-select: none; /* Standard syntax */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 244 B |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 865 B |
Binary file not shown.
|
After Width: | Height: | Size: 623 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 628 B |
Binary file not shown.
|
After Width: | Height: | Size: 564 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 499 B |
Binary file not shown.
|
After Width: | Height: | Size: 471 B |
Binary file not shown.
|
After Width: | Height: | Size: 296 B |
Binary file not shown.
|
After Width: | Height: | Size: 244 B |
Binary file not shown.
|
After Width: | Height: | Size: 155 B |
Binary file not shown.
|
After Width: | Height: | Size: 123 B |
Binary file not shown.
|
After Width: | Height: | Size: 164 B |
Binary file not shown.
|
After Width: | Height: | Size: 163 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 462 B |
Binary file not shown.
|
After Width: | Height: | Size: 599 B |
Binary file not shown.
|
After Width: | Height: | Size: 437 B |
Binary file not shown.
|
After Width: | Height: | Size: 547 B |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
|
|
@ -1,946 +0,0 @@
|
|||
const workSpaceName = 'sz_pg';
|
||||
const layerGroupName = 'sz_pg_mb';
|
||||
const mapurl =
|
||||
'http://192.168.11.35:8999/geoserver/gwc/service/tms/1.0.0/' +
|
||||
workSpaceName +
|
||||
':' +
|
||||
layerGroupName +
|
||||
'@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
|
||||
const chinaGroupName = 'sz_pg_china_mb';
|
||||
const chinaurl =
|
||||
'http://192.168.11.35:8999/geoserver/gwc/service/tms/1.0.0/' +
|
||||
workSpaceName +
|
||||
':' +
|
||||
chinaGroupName +
|
||||
'@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
|
||||
|
||||
const spriteurl = 'http://192.168.11.35:8089/assets/sprite-th/sprite';
|
||||
const glyphsurl = 'http://192.168.11.35:8089/assets/fonts/{fontstack}/{range}.pbf';
|
||||
const iconSize = 0.6;
|
||||
const normal_style = {
|
||||
version: 8,
|
||||
sources: {
|
||||
os: {
|
||||
type: 'vector',
|
||||
scheme: 'tms',
|
||||
tiles: [mapurl],
|
||||
pixelRatio: 2,
|
||||
},
|
||||
china: {
|
||||
type: 'vector',
|
||||
scheme: 'tms',
|
||||
tiles: [chinaurl],
|
||||
pixelRatio: 2,
|
||||
},
|
||||
},
|
||||
sprite: spriteurl,
|
||||
//字体.pbf文件获取
|
||||
glyphs: glyphsurl,
|
||||
layers: [
|
||||
{
|
||||
id: 'background',
|
||||
type: 'background',
|
||||
paint: { 'background-color': '#a9dbfe', 'background-opacity': 1 },
|
||||
},
|
||||
|
||||
{
|
||||
id: 'admin',
|
||||
type: 'fill',
|
||||
source: 'china',
|
||||
'source-layer': chinaGroupName + '_admin',
|
||||
minzoom: 3,
|
||||
// "maxzoom":8,
|
||||
layout: {},
|
||||
paint: {
|
||||
'fill-color': ['interpolate', ['linear'], ['zoom'], 9, '#fbf9f4', 11, '#f1f2f3'],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'building-area', //小区面
|
||||
type: 'fill',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_building_area',
|
||||
minzoom: 15,
|
||||
layout: { visibility: 'visible' },
|
||||
paint: {
|
||||
'fill-color': '#000000',
|
||||
'fill-opacity': 0.04,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'park', //公园、绿地、交通绿化、高尔夫球场
|
||||
type: 'fill',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_bg_area',
|
||||
minzoom: 8,
|
||||
filter: ['all', ['in', 'type', '31', '33']],
|
||||
paint: {
|
||||
'fill-color': 'hsl(102, 55%, 83%)',
|
||||
'fill-opacity': ['interpolate', ['linear'], ['zoom'], 8, 0, 9, 1],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'water', //海洋、水系
|
||||
type: 'fill',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_bg_area',
|
||||
minzoom: 8,
|
||||
filter: ['==', 'type', '12'],
|
||||
layout: { visibility: 'visible' },
|
||||
paint: {
|
||||
'fill-color': 'hsl(205, 98%, 83%)',
|
||||
'fill-opacity': ['interpolate', ['linear'], ['zoom'], 8, 0, 9, 1],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'railway-case', //铁路边框
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_bg_line',
|
||||
minzoom: 9,
|
||||
// "maxzoom": 20,
|
||||
filter: ['==', 'type', '92'],
|
||||
paint: { 'line-width': 3, 'line-color': '#999999' },
|
||||
},
|
||||
{
|
||||
id: 'railway', //铁路
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_bg_line',
|
||||
minzoom: 9,
|
||||
// "maxzoom": 20,
|
||||
filter: ['==', 'type', '92'],
|
||||
paint: {
|
||||
'line-width': 2,
|
||||
'line-dasharray': [3, 3],
|
||||
'line-color': 'hsl(0, 0%, 100%)',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-06-case', //六级道路（辅路）边框
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 15,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '2', '3', '20']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': 'hsl(0, 0%, 88%)',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 15, 0, 16, 4, 20, 16],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-06', //六级道路（辅路）
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 15,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '2', '3', '20']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': 'hsl(45, 0%, 100%)',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 15, 0, 16, 3, 20, 12],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-05-case', //五级道路（支路）边框
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 13,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '4', '8', '9']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#e0e0e0',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 13, 0, 14, 1, 16, 12, 20, 34],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-05', //五级道路（支路）
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 13,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '4', '8', '9']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': 'hsl(0, 0%, 100%)',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 13, 0, 14, 1, 16, 10, 20, 30],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-04-case', //四级道路（县道、次干道）边框
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 11,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '6', '5', '10']],
|
||||
layout: {
|
||||
'line-round-limit': 1,
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#e0e0e0',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 11, 0, 12, 1, 16, 12, 20, 64],
|
||||
'line-opacity': 1,
|
||||
'line-gap-width': 0,
|
||||
'line-offset': 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-04', //四级道路（县道、次干道）
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 11,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '6', '5', '10']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': 'hsl(45, 0%, 100%)',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 11, 0, 12, 1, 16, 10, 20, 60],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-03-case', //三级道路（省道、主干道）边框
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 10,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '11']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#f1c85f',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 10, 0, 11, 1, 16, 12, 20, 64],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-03', //三级道路（省道、主干道）
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 10,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '11']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': 'hsl(45, 94%, 86%)',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 10, 0, 11, 1, 16, 10, 20, 60],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-02-case', //二级道路（国道、快速路）边框
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 9,
|
||||
filter: ['all', ['in', 'road_grade', '7', '12']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#f0b92d',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 9, 1, 16, 12, 20, 64],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-02', ////二级道路（国道、快速路）
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 9,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '7', '12']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#ffdb70',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 9, 1, 16, 10, 20, 60],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-01-case', //一级道路（高速）边框
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 8,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '13']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#f57d2e',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 8, 0, 16, 12, 20, 64],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-01', //一级道路（高速）
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 8,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '13']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
'line-round-limit': 1.05,
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#f69655',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 8, 0, 16, 10, 20, 60],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'building', //3d建筑
|
||||
type: 'fill-extrusion',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_building',
|
||||
minzoom: 16,
|
||||
// "maxzoom": 20,
|
||||
layout: {},
|
||||
paint: {
|
||||
'fill-extrusion-color': '#e3e3e3',
|
||||
'fill-extrusion-opacity': 0.7,
|
||||
'fill-extrusion-vertical-gradient': false,
|
||||
'fill-extrusion-height': ['to-number', ['get', 'height']],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'railway-label',
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_bg_line',
|
||||
minzoom: 11,
|
||||
// "maxzoom": 20,
|
||||
filter: ['==', 'type', '92'],
|
||||
layout: {
|
||||
'text-field': '{name}',
|
||||
'symbol-placement': 'line-center',
|
||||
'text-size': 14,
|
||||
'symbol-spacing': 500,
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#666',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
id: 'level-05-label', //五级道路（支路）名称
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 15,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '4', '8', '9']],
|
||||
layout: {
|
||||
'text-field': '{name}',
|
||||
'symbol-placement': 'line',
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 15, 12, 18, 14],
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'symbol-spacing': ['interpolate', ['linear'], ['zoom'], 15, 300, 20, 1000],
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#666',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-04-label', //四级道路（县道、次干道）名称
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 13,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '6', '5', '10']],
|
||||
layout: {
|
||||
'text-field': '{name}',
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 13, 12, 14, 14],
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'symbol-placement': 'line',
|
||||
'symbol-spacing': ['interpolate', ['linear'], ['zoom'], 13, 300, 20, 1000],
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
'text-color': '#666',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-03-label', //三级道路（省道、主干道）名称
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 12,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '11']],
|
||||
layout: {
|
||||
'symbol-placement': 'line',
|
||||
'text-field': '{name}',
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 12, 12, 13, 14],
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'symbol-spacing': ['interpolate', ['linear'], ['zoom'], 12, 300, 20, 1000],
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#666',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-02-label', //二级道路（国道、快速路）名称
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 11,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '7', '12']],
|
||||
layout: {
|
||||
'text-field': '{name}',
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 11, 12, 12, 14],
|
||||
'symbol-placement': 'line',
|
||||
'symbol-spacing': ['interpolate', ['linear'], ['zoom'], 11, 300, 20, 1000],
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#666',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-01-label', //一级道路（高速）名称
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 9,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '13']],
|
||||
layout: {
|
||||
'text-field': '{name}',
|
||||
'symbol-placement': 'line',
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 9, 12, 12, 14],
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'symbol-spacing': ['interpolate', ['linear'], ['zoom'], 9, 300, 20, 1000],
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#333',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-03-num', //三级道路（国道、快速路）编号
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 13,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '11']],
|
||||
layout: {
|
||||
'symbol-placement': 'line',
|
||||
'text-field': '{road_num}',
|
||||
visibility: 'visible',
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'symbol-spacing': ['interpolate', ['linear'], ['zoom'], 12, 300, 20, 1000],
|
||||
'text-size': 12,
|
||||
},
|
||||
paint: {
|
||||
'text-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-color': '#ec914b',
|
||||
'text-halo-width': 100,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-02-num', //二级道路（国道、快速路）编号
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 11,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '7', '12']],
|
||||
layout: {
|
||||
'text-field': '{road_num}',
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'symbol-placement': 'line',
|
||||
visibility: 'visible',
|
||||
'symbol-spacing': ['interpolate', ['linear'], ['zoom'], 11, 300, 20, 1000],
|
||||
'text-size': 12,
|
||||
},
|
||||
paint: {
|
||||
'text-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-color': '#f47171',
|
||||
'text-halo-width': 100,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-01-num', //一级道路（高速）编号
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 11,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '13']],
|
||||
layout: {
|
||||
'text-field': '{road_num}',
|
||||
visibility: 'visible',
|
||||
'text-size': 12,
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'symbol-spacing': ['interpolate', ['linear'], ['zoom'], 11, 300, 20, 1000],
|
||||
'symbol-placement': 'line',
|
||||
'text-padding': 0,
|
||||
},
|
||||
paint: {
|
||||
'text-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-color': '#54c081',
|
||||
'text-halo-width': 100,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'park-label',
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_bg_area',
|
||||
minzoom: 10,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'type', '31', '33']],
|
||||
layout: {
|
||||
'text-field': '{name}',
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 13, 12, 16, 14],
|
||||
'text-padding': 2,
|
||||
'text-offset': [0, 1],
|
||||
'text-anchor': 'center',
|
||||
},
|
||||
paint: {
|
||||
'text-halo-width': 1,
|
||||
'text-color': '#257902',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'water-label', //水系名称
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_bg_area',
|
||||
minzoom: 13,
|
||||
// "maxzoom": 20,
|
||||
filter: ['==', 'type', '12'],
|
||||
layout: {
|
||||
'text-field': '{name}',
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 13, 12, 16, 14],
|
||||
visibility: 'visible',
|
||||
|
||||
'text-padding': 2,
|
||||
'text-offset': [0, 1],
|
||||
'text-anchor': 'center',
|
||||
},
|
||||
paint: {
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
'text-color': '#046ab4',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'county-label', //区名
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_label',
|
||||
filter: ['all', ['in', 'type', '18070200']],
|
||||
minzoom: 10,
|
||||
maxzoom: 14,
|
||||
layout: {
|
||||
'text-size': 12,
|
||||
'text-allow-overlap': false,
|
||||
'text-ignore-placement': false,
|
||||
'text-field': '{name}',
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-padding': 2,
|
||||
'text-offset': [0, 1],
|
||||
'text-anchor': 'top',
|
||||
'icon-image': '18000000',
|
||||
'icon-size': iconSize,
|
||||
'icon-ignore-placement': true,
|
||||
},
|
||||
paint: {
|
||||
'text-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-color': '#6ab9f6',
|
||||
'text-halo-width': 100,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'city-label', //市名
|
||||
type: 'symbol',
|
||||
source: 'china',
|
||||
'source-layer': chinaGroupName + '_china_poi',
|
||||
filter: ['all', ['==', 'type', '18070100'], ['==', 'grade', '2']],
|
||||
minzoom: 6,
|
||||
maxzoom: 12,
|
||||
layout: {
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 6, 14, 9, 16, 12, 18],
|
||||
'text-allow-overlap': false,
|
||||
'text-ignore-placement': false,
|
||||
'text-field': '{name}',
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-anchor': 'bottom',
|
||||
'text-offset': [0, -0.5],
|
||||
'icon-image': 'city',
|
||||
'icon-size': iconSize,
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#333333',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
id: 'capital-label',
|
||||
type: 'symbol',
|
||||
source: 'china',
|
||||
'source-layer': chinaGroupName + '_china_poi',
|
||||
minzoom: 3,
|
||||
maxzoom: 6,
|
||||
filter: ['all', ['==', 'type', '18070100'], ['==', 'grade', '1']],
|
||||
layout: {
|
||||
'text-field': '{name}',
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 3, 12, 6, 16],
|
||||
'icon-image': 'city',
|
||||
'icon-size': 0.4,
|
||||
'text-anchor': 'bottom',
|
||||
'text-offset': [0, -0.5],
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#333333',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'icon-opacity': 1,
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
//箭头df2
|
||||
id: 'road-arrow',
|
||||
minzoom: 17,
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
layout: {
|
||||
// "icon-allow-overlap": true,
|
||||
'icon-ignore-placement': true,
|
||||
'icon-image': 'road-arrow',
|
||||
'symbol-spacing': 800,
|
||||
'icon-size': 1,
|
||||
'icon-padding': 0,
|
||||
'symbol-placement': 'line',
|
||||
},
|
||||
filter: ['==', 'pass_code', '1'],
|
||||
'source-layer': layerGroupName + '_road',
|
||||
paint: {
|
||||
'text-color': '#333',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
'icon-opacity': 0.35,
|
||||
},
|
||||
},
|
||||
{
|
||||
//箭头df2
|
||||
id: 'road-arrow-rotate',
|
||||
minzoom: 17,
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
layout: {
|
||||
'icon-ignore-placement': true,
|
||||
'icon-image': 'road-arrow',
|
||||
'symbol-spacing': 800,
|
||||
'icon-size': 1,
|
||||
'icon-padding': 0,
|
||||
'symbol-placement': 'line',
|
||||
'icon-rotate': 180,
|
||||
},
|
||||
filter: ['==', 'pass_code', '2'],
|
||||
'source-layer': layerGroupName + '_road',
|
||||
paint: {
|
||||
'text-color': '#333',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
'icon-opacity': 0.35,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
id: 'label-6',
|
||||
minzoom: 13,
|
||||
maxzoom: 14,
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_label',
|
||||
filter: ['==', 'grade', '6'],
|
||||
layout: {
|
||||
'text-allow-overlap': false,
|
||||
'text-ignore-placement': false,
|
||||
'text-field': '{name}',
|
||||
'text-size': 12,
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-padding': 2,
|
||||
'text-offset': [0, 0.6],
|
||||
'text-anchor': 'top',
|
||||
'icon-image': ['get', 'featcode'],
|
||||
'icon-size': iconSize,
|
||||
'icon-ignore-placement': true,
|
||||
'icon-allow-overlap': false,
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#8a8a89',
|
||||
'text-halo-color': '#FFFFFF',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'label-5',
|
||||
minzoom: 14,
|
||||
maxzoom: 15,
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_label',
|
||||
filter: ['==', 'grade', '5'],
|
||||
layout: {
|
||||
'text-allow-overlap': false,
|
||||
'text-ignore-placement': false,
|
||||
'text-field': '{name}',
|
||||
'text-size': 12,
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-padding': 2,
|
||||
'text-offset': [0, 0.6],
|
||||
'text-anchor': 'top',
|
||||
'icon-image': ['get', 'featcode'],
|
||||
'icon-size': iconSize,
|
||||
'icon-ignore-placement': true,
|
||||
'icon-allow-overlap': false,
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#8a8a89',
|
||||
'text-halo-color': '#FFFFFF',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'label-4',
|
||||
minzoom: 15,
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_label',
|
||||
filter: ['==', 'grade', '4'],
|
||||
layout: {
|
||||
'text-allow-overlap': false,
|
||||
'text-ignore-placement': false,
|
||||
'text-field': '{name}',
|
||||
'text-size': 12,
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-padding': 2,
|
||||
'text-offset': [0, 0.6],
|
||||
'text-anchor': 'top',
|
||||
'icon-image': ['get', 'featcode'],
|
||||
'icon-size': iconSize,
|
||||
'icon-ignore-placement': true,
|
||||
'icon-allow-overlap': false,
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#8a8a89',
|
||||
'text-halo-color': '#FFFFFF',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'label-3',
|
||||
minzoom: 16,
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_label',
|
||||
filter: ['==', 'grade', '3'],
|
||||
layout: {
|
||||
'text-allow-overlap': false,
|
||||
'text-ignore-placement': false,
|
||||
'text-field': '{name}',
|
||||
'text-size': 12,
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-padding': 2,
|
||||
'text-offset': [0, 0.6],
|
||||
'text-anchor': 'top',
|
||||
'icon-image': ['get', 'featcode'],
|
||||
'icon-size': iconSize,
|
||||
'icon-ignore-placement': true,
|
||||
'icon-allow-overlap': false,
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#8a8a89',
|
||||
'text-halo-color': '#FFFFFF',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'label-2',
|
||||
minzoom: 17,
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_label',
|
||||
filter: ['==', 'grade', '2'],
|
||||
layout: {
|
||||
'text-allow-overlap': false,
|
||||
'text-ignore-placement': false,
|
||||
'text-field': '{name}',
|
||||
'text-size': 12,
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-padding': 2,
|
||||
'text-offset': [0, 0.6],
|
||||
'text-anchor': 'top',
|
||||
'icon-image': ['get', 'featcode'],
|
||||
'icon-size': iconSize,
|
||||
'icon-ignore-placement': true,
|
||||
'icon-allow-overlap': false,
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#8a8a89',
|
||||
'text-halo-color': '#FFFFFF',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'label-1',
|
||||
minzoom: 18,
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_label',
|
||||
filter: ['all', ['in', 'grade', '0', '1']],
|
||||
layout: {
|
||||
'text-allow-overlap': false,
|
||||
'text-ignore-placement': false,
|
||||
'text-field': '{name}',
|
||||
'text-size': 12,
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-padding': 2,
|
||||
'text-offset': [0, 0.6],
|
||||
'text-anchor': 'top',
|
||||
'icon-image': ['get', 'featcode'],
|
||||
'icon-size': iconSize,
|
||||
'icon-ignore-placement': true,
|
||||
'icon-allow-overlap': false,
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#8a8a89',
|
||||
'text-halo-color': '#FFFFFF',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'building-area-poi', //小区面标注
|
||||
minzoom: 15,
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_building_area_poi',
|
||||
layout: {
|
||||
'text-allow-overlap': false,
|
||||
'text-ignore-placement': false,
|
||||
'text-field': '{bd_name}',
|
||||
'text-size': 14,
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#8a8a89',
|
||||
'text-halo-color': '#FFFFFF',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'province-line',
|
||||
type: 'line',
|
||||
source: 'china',
|
||||
'source-layer': chinaGroupName + '_admin',
|
||||
minzoom: 3,
|
||||
filter: ['==', 'grade', '1'],
|
||||
layout: {},
|
||||
paint: {
|
||||
'line-color': '#d5d3cd',
|
||||
'line-blur': 0,
|
||||
'line-offset': 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'city-line',
|
||||
type: 'line',
|
||||
source: 'china',
|
||||
'source-layer': chinaGroupName + '_admin',
|
||||
filter: ['==', 'grade', '2'],
|
||||
minzoom: 6,
|
||||
layout: {},
|
||||
paint: { 'line-color': '#d5d3cd', 'line-dasharray': [4, 4] },
|
||||
},
|
||||
{
|
||||
id: 'county-line',
|
||||
type: 'line',
|
||||
source: 'china',
|
||||
'source-layer': chinaGroupName + '_admin',
|
||||
filter: ['==', 'grade', '3'],
|
||||
minzoom: 7,
|
||||
layout: {},
|
||||
paint: { 'line-color': '#d5d3cd', 'line-dasharray': [4, 4] },
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default normal_style;
|
||||
1901629
src/assets/json/aaa.json
1901629
src/assets/json/aaa.json
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,755 +0,0 @@
|
|||
.mapboxgl-map {
|
||||
font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
-webkit-tap-highlight-color: rgb(0 0 0/0)
|
||||
}
|
||||
|
||||
.mapboxgl-canvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.mapboxgl-map:-webkit-full-screen {
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.mapboxgl-canary {
|
||||
background-color: salmon
|
||||
}
|
||||
|
||||
.mapboxgl-canvas-container.mapboxgl-interactive,
|
||||
.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
|
||||
cursor: grab;
|
||||
-webkit-user-select: none;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.mapboxgl-canvas-container.mapboxgl-interactive:active,
|
||||
.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active {
|
||||
cursor: grabbing
|
||||
}
|
||||
|
||||
.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,
|
||||
.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas {
|
||||
touch-action: pan-x pan-y
|
||||
}
|
||||
|
||||
.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,
|
||||
.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas {
|
||||
touch-action: pinch-zoom
|
||||
}
|
||||
|
||||
.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
|
||||
.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
|
||||
touch-action: none
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-bottom-left,
|
||||
.mapboxgl-ctrl-bottom-right,
|
||||
.mapboxgl-ctrl-top-left,
|
||||
.mapboxgl-ctrl-top-right {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-top-left {
|
||||
top: 0;
|
||||
left: 0
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-top-right {
|
||||
top: 0;
|
||||
right: 0
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-bottom-left {
|
||||
bottom: 0;
|
||||
left: 0
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-bottom-right {
|
||||
right: 0;
|
||||
bottom: 0
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl {
|
||||
clear: both;
|
||||
pointer-events: auto;
|
||||
transform: translate(0)
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-top-left .mapboxgl-ctrl {
|
||||
margin: 10px 0 0 10px;
|
||||
float: left
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-top-right .mapboxgl-ctrl {
|
||||
margin: 10px 10px 0 0;
|
||||
float: right
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl {
|
||||
margin: 0 0 10px 10px;
|
||||
float: left
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl {
|
||||
margin: 0 10px 10px 0;
|
||||
float: right
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group {
|
||||
border-radius: 4px;
|
||||
background: #fff
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group:not(:empty) {
|
||||
box-shadow: 0 0 0 2px rgba(0, 0, 0, .1)
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:active) {
|
||||
.mapboxgl-ctrl-group:not(:empty) {
|
||||
box-shadow: 0 0 0 2px ButtonText
|
||||
}
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button {
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
display: block;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button+button {
|
||||
border-top: 1px solid #ddd
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button .mapboxgl-ctrl-icon {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:active) {
|
||||
.mapboxgl-ctrl-icon {
|
||||
background-color: transparent
|
||||
}
|
||||
.mapboxgl-ctrl-group button+button {
|
||||
border-top: 1px solid ButtonText
|
||||
}
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-attrib-button:focus,
|
||||
.mapboxgl-ctrl-group button:focus {
|
||||
box-shadow: 0 0 2px 2px #0096ff
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button:disabled {
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon {
|
||||
opacity: .25
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button:first-child {
|
||||
border-radius: 4px 4px 0 0
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button:last-child {
|
||||
border-radius: 0 0 4px 4px
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button:only-child {
|
||||
border-radius: inherit
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button:not(:disabled):hover {
|
||||
background-color: rgba(0, 0, 0, .05)
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button:focus:focus-visible {
|
||||
box-shadow: 0 0 2px 2px #0096ff
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button:focus:not(:focus-visible) {
|
||||
box-shadow: none
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:active) {
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:black-on-white) {
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:active) {
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:black-on-white) {
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:active) {
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23999'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:black-on-white) {
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23aaa'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon {
|
||||
animation: mapboxgl-spin 2s linear infinite
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:active) {
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23999'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:black-on-white) {
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23666'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mapboxgl-spin {
|
||||
0% {
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
to {
|
||||
transform: rotate(1turn)
|
||||
}
|
||||
}
|
||||
|
||||
a.mapboxgl-ctrl-logo {
|
||||
width: 88px;
|
||||
height: 23px;
|
||||
margin: 0 0 -4px -4px;
|
||||
display: block;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='0.3' stroke='%23000' stroke-width='3'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='0.9' fill='%23fff'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
a.mapboxgl-ctrl-logo.mapboxgl-compact {
|
||||
width: 23px
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:active) {
|
||||
a.mapboxgl-ctrl-logo {
|
||||
background-color: transparent;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='1' stroke='%23000' stroke-width='3'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='1' fill='%23fff'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:black-on-white) {
|
||||
a.mapboxgl-ctrl-logo {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='1' stroke='%23fff' stroke-width='3' fill='%23fff'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='1' fill='%23000'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
|
||||
padding: 0 5px;
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
margin: 0
|
||||
}
|
||||
|
||||
@media screen {
|
||||
.mapboxgl-ctrl-attrib.mapboxgl-compact {
|
||||
min-height: 20px;
|
||||
padding: 2px 24px 2px 0;
|
||||
margin: 10px;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border-radius: 12px
|
||||
}
|
||||
.mapboxgl-ctrl-attrib.mapboxgl-compact-show {
|
||||
padding: 2px 28px 2px 8px;
|
||||
visibility: visible
|
||||
}
|
||||
.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show,
|
||||
.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show {
|
||||
padding: 2px 8px 2px 28px;
|
||||
border-radius: 12px
|
||||
}
|
||||
.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner {
|
||||
display: none
|
||||
}
|
||||
.mapboxgl-ctrl-attrib-button {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E");
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 12px;
|
||||
outline: none;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: 0
|
||||
}
|
||||
.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button,
|
||||
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button {
|
||||
left: 0
|
||||
}
|
||||
.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner,
|
||||
.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button {
|
||||
display: block
|
||||
}
|
||||
.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button {
|
||||
background-color: rgba(0, 0, 0, .05)
|
||||
}
|
||||
.mapboxgl-ctrl-bottom-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after {
|
||||
bottom: 0;
|
||||
right: 0
|
||||
}
|
||||
.mapboxgl-ctrl-top-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after {
|
||||
top: 0;
|
||||
right: 0
|
||||
}
|
||||
.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after {
|
||||
top: 0;
|
||||
left: 0
|
||||
}
|
||||
.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after {
|
||||
bottom: 0;
|
||||
left: 0
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast:active) {
|
||||
.mapboxgl-ctrl-attrib.mapboxgl-compact:after {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' fill='%23fff'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast:black-on-white) {
|
||||
.mapboxgl-ctrl-attrib.mapboxgl-compact:after {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-attrib a {
|
||||
color: rgba(0, 0, 0, .75);
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-attrib a:hover {
|
||||
color: inherit;
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-attrib .mapbox-improve-map {
|
||||
font-weight: 700;
|
||||
margin-left: 2px
|
||||
}
|
||||
|
||||
.mapboxgl-attrib-empty {
|
||||
display: none
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-scale {
|
||||
background-color: hsla(0, 0%, 100%, .75);
|
||||
font-size: 10px;
|
||||
border: 2px solid #333;
|
||||
border-top: #333;
|
||||
padding: 0 5px;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.mapboxgl-popup {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
will-change: transform;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-top,
|
||||
.mapboxgl-popup-anchor-top-left,
|
||||
.mapboxgl-popup-anchor-top-right {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-bottom,
|
||||
.mapboxgl-popup-anchor-bottom-left,
|
||||
.mapboxgl-popup-anchor-bottom-right {
|
||||
flex-direction: column-reverse
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-left {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-right {
|
||||
flex-direction: row-reverse
|
||||
}
|
||||
|
||||
.mapboxgl-popup-tip {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 10px solid transparent;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
|
||||
align-self: center;
|
||||
border-top: none;
|
||||
border-bottom-color: #fff
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
|
||||
align-self: flex-start;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-bottom-color: #fff
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
|
||||
align-self: flex-end;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-bottom-color: #fff
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
|
||||
align-self: center;
|
||||
border-bottom: none;
|
||||
border-top-color: #fff
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
|
||||
align-self: flex-start;
|
||||
border-bottom: none;
|
||||
border-left: none;
|
||||
border-top-color: #fff
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
|
||||
align-self: flex-end;
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
border-top-color: #fff
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
|
||||
align-self: center;
|
||||
border-left: none;
|
||||
border-right-color: #fff
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
|
||||
align-self: center;
|
||||
border-right: none;
|
||||
border-left-color: #fff
|
||||
}
|
||||
|
||||
.mapboxgl-popup-close-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
border: 0;
|
||||
border-radius: 0 3px 0 0;
|
||||
cursor: pointer;
|
||||
background-color: transparent
|
||||
}
|
||||
|
||||
.mapboxgl-popup-close-button:hover {
|
||||
background-color: rgba(0, 0, 0, .05)
|
||||
}
|
||||
|
||||
.mapboxgl-popup-content {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
|
||||
padding: 10px 10px 15px;
|
||||
pointer-events: auto
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content {
|
||||
border-top-left-radius: 0
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content {
|
||||
border-top-right-radius: 0
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content {
|
||||
border-bottom-left-radius: 0
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content {
|
||||
border-bottom-right-radius: 0
|
||||
}
|
||||
|
||||
.mapboxgl-popup-track-pointer {
|
||||
display: none
|
||||
}
|
||||
|
||||
.mapboxgl-popup-track-pointer * {
|
||||
pointer-events: none;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
.mapboxgl-map:hover .mapboxgl-popup-track-pointer {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.mapboxgl-map:active .mapboxgl-popup-track-pointer {
|
||||
display: none
|
||||
}
|
||||
|
||||
.mapboxgl-marker {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
will-change: transform;
|
||||
opacity: 1;
|
||||
transition: opacity .2s
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-dot,
|
||||
.mapboxgl-user-location-dot:before {
|
||||
background-color: #1da1f2;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-dot:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
animation: mapboxgl-user-location-dot-pulse 2s infinite
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-dot:after {
|
||||
border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
content: "";
|
||||
height: 19px;
|
||||
left: -2px;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
width: 19px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, .35000000000000003)
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading {
|
||||
width: 0;
|
||||
height: 0
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after,
|
||||
.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before {
|
||||
content: "";
|
||||
border-bottom: 7.5px solid #4aa1eb;
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before {
|
||||
border-left: 7.5px solid transparent;
|
||||
transform: translateY(-28px) skewY(-20deg)
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after {
|
||||
border-right: 7.5px solid transparent;
|
||||
transform: translate(7.5px, -28px) skewY(20deg)
|
||||
}
|
||||
|
||||
@keyframes mapboxgl-user-location-dot-pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1
|
||||
}
|
||||
70% {
|
||||
transform: scale(3);
|
||||
opacity: 0
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-dot-stale {
|
||||
background-color: #aaa
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-dot-stale:after {
|
||||
display: none
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-accuracy-circle {
|
||||
background-color: rgba(29, 161, 242, .2);
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border-radius: 100%
|
||||
}
|
||||
|
||||
.mapboxgl-crosshair,
|
||||
.mapboxgl-crosshair .mapboxgl-interactive,
|
||||
.mapboxgl-crosshair .mapboxgl-interactive:active {
|
||||
cursor: crosshair
|
||||
}
|
||||
|
||||
.mapboxgl-boxzoom {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: #fff;
|
||||
border: 2px dotted #202020;
|
||||
opacity: .5
|
||||
}
|
||||
|
||||
@media print {
|
||||
.mapbox-improve-map {
|
||||
display: none
|
||||
}
|
||||
}
|
||||
|
||||
.mapboxgl-scroll-zoom-blocker,
|
||||
.mapboxgl-touch-pan-blocker {
|
||||
color: #fff;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, .7000000000000001);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .75s ease-in-out;
|
||||
transition-delay: 1s
|
||||
}
|
||||
|
||||
.mapboxgl-scroll-zoom-blocker-show,
|
||||
.mapboxgl-touch-pan-blocker-show {
|
||||
opacity: 1;
|
||||
transition: opacity .1s ease-in-out
|
||||
}
|
||||
|
||||
.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page,
|
||||
.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page .mapboxgl-canvas {
|
||||
touch-action: pan-x pan-y
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,154 +0,0 @@
|
|||
<template>
|
||||
<div id="map"
|
||||
class="content" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import normal_style from '../assets/js/normal_style.js'
|
||||
import axios from 'axios'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
map: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initMap()
|
||||
},
|
||||
methods: {
|
||||
initMap () {
|
||||
const that = this
|
||||
that.map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
center: [120.476913, 31.416667],
|
||||
zoom: 5,
|
||||
style: {
|
||||
version: 8,
|
||||
name: 'Mapbox Streets',
|
||||
sources: {
|
||||
'osm-tiles': {
|
||||
type: 'raster',
|
||||
tiles: ['http://c.tile.openstreetmap.org/{z}/{x}/{y}.png'],
|
||||
|
||||
tileSize: 256
|
||||
}
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
id: '123',
|
||||
type: 'raster',
|
||||
source: 'osm-tiles',
|
||||
'source-layer': 'osmtiles'
|
||||
}
|
||||
]
|
||||
}
|
||||
// style:normal_style
|
||||
})
|
||||
},
|
||||
loadWFS (url, option) {
|
||||
var geoJsonUrl =
|
||||
'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_china_mb_china_poi&outputFormat=application/json'
|
||||
// 线 var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_bg_line&outputFormat=application/json'
|
||||
// var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_admin&outputFormat=application/json';
|
||||
// var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_road&outputFormat=application/json';
|
||||
// var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_label&outputFormat=application/json';
|
||||
// var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_label&outputFormat=application/json';
|
||||
axios.get(geoJsonUrl).then((res) => {
|
||||
console.log(res)
|
||||
const features = res.data.features
|
||||
console.log(features, '元素层')
|
||||
const layerType = null
|
||||
const geometryType = features[0].geometry.type
|
||||
const addLayerOption = {
|
||||
id: 'points',
|
||||
type: layerType,
|
||||
source: {
|
||||
type: 'geojson',
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: features
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
visibility: 'visible'
|
||||
}
|
||||
}
|
||||
if (geometryType == 'MultiLineString') {
|
||||
addLayerOption.type = 'line'
|
||||
} else if (geometryType == 'Line') {
|
||||
addLayerOption.type = 'line'
|
||||
} else if (geometryType == 'Point') {
|
||||
addLayerOption.type = 'circle'
|
||||
} else if (geometryType == ' MultiPoint') {
|
||||
addLayerOption.type = 'circle'
|
||||
} else if (geometryType == 'Polygon') {
|
||||
addLayerOption.type = 'fill'
|
||||
addLayerOption.paint = {
|
||||
'fill-color': 'rgba(200,100,240,0.4)',
|
||||
'fill-outline-color': 'rgba(200,100,240,1)'
|
||||
}
|
||||
} else if (geometryType == 'MultiPolygon') {
|
||||
addLayerOption.type = 'fill'
|
||||
addLayerOption.paint = {
|
||||
'fill-color': 'rgba(200,100,240,0.4)',
|
||||
'fill-outline-color': 'rgba(200,100,240,1)'
|
||||
}
|
||||
}
|
||||
|
||||
this.map.addLayer(addLayerOption)
|
||||
})
|
||||
},
|
||||
loadWMS (url, option) {
|
||||
console.log('111')
|
||||
|
||||
this.map.addSource('wms-source', {
|
||||
'type': 'raster',
|
||||
'tiles': [url],
|
||||
'tileSize': 512
|
||||
})
|
||||
this.map.addLayer({
|
||||
'id': 'wms-layer',
|
||||
'type': 'raster',
|
||||
'source': 'wms-source',
|
||||
'paint': {}
|
||||
})
|
||||
},
|
||||
loadWMTS (url, option) {
|
||||
this.map.addSource('wmts-source', {
|
||||
'type': 'raster',
|
||||
'tiles': ['http://192.168.11.35:8999/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=dem_test%3Ajs'],
|
||||
|
||||
'tileSize': 256
|
||||
})
|
||||
this.map.addLayer({
|
||||
'id': 'wmts-layer',
|
||||
'type': 'raster',
|
||||
'source': 'wmts-source',
|
||||
'paint': {
|
||||
'raster-opacity': 0.8
|
||||
}
|
||||
})
|
||||
},
|
||||
loadTMS (url, option) {
|
||||
var tmsUrl = 'http://192.168.11.35:8999/geoserver/gwc/service/tms/1.0.0/sz_pg%3Asz_pg_mb@EPSG%3A900913@pbf'
|
||||
|
||||
this.map.addLayer({
|
||||
'id': 'tms-layer',
|
||||
'type': 'raster',
|
||||
'source': {
|
||||
'type': 'raster',
|
||||
'tiles': [tmsUrl]
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,717 @@
|
|||
<template>
|
||||
|
||||
<div id="cesiumContainer" class="cesium-viewer" />
|
||||
|
||||
<!-- 地图工具栏 -->
|
||||
<ToolBar @tool="handleToolBar" />
|
||||
|
||||
<!-- 图层管理 -->
|
||||
<LayerManage />
|
||||
|
||||
<!-- 底图切换 -->
|
||||
<!-- <MapSwitch /> -->
|
||||
|
||||
<!-- 版权、位置 -->
|
||||
<CopyRight :location="mouseLocation" />
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, toRefs, ref } from 'vue'
|
||||
import * as Cesium from 'cesium'
|
||||
// 地图工具组件
|
||||
import ToolBar from './maptools/ToolBar.vue'
|
||||
import LayerManage from './maptools/LayerManage.vue'
|
||||
import MapSwitch from './maptools/MapSwitch.vue'
|
||||
import CopyRight from './maptools/CopyRight.vue'
|
||||
export default {
|
||||
components: { ToolBar, LayerManage, MapSwitch, CopyRight },
|
||||
emits: ['complete-measure'],
|
||||
setup(props, { emit }) {
|
||||
const measureRef = ref()
|
||||
const data = reactive({
|
||||
viewer: null,
|
||||
scene: null,
|
||||
// 鼠标位置
|
||||
mouseLocation: {
|
||||
lng: 0,
|
||||
lat: 0
|
||||
// height: 0
|
||||
},
|
||||
handler: null,
|
||||
// 蓝底图
|
||||
arcMap: null,
|
||||
// 影像图
|
||||
imgMap: null,
|
||||
// 路网
|
||||
roadNet: null,
|
||||
// 距离量测
|
||||
measureLinePos: [],
|
||||
measureLineEntities: [],
|
||||
// 面积量测
|
||||
measureAreaPos: [],
|
||||
measureAreaEntities: [],
|
||||
// 高度测量
|
||||
measureHeightPos: [],
|
||||
measureHeightEntities: []
|
||||
})
|
||||
|
||||
const initMap = () => {
|
||||
data.viewer = new Cesium.Viewer('cesiumContainer', {
|
||||
// 右上角 搜索
|
||||
geocoder: false,
|
||||
// 右上角 Home
|
||||
homeButton: false,
|
||||
// 右上角 2D/3D切换
|
||||
sceneModePicker: false,
|
||||
// 右上角 地形
|
||||
baseLayerPicker: false,
|
||||
// 右上角 Help
|
||||
navigationHelpButton: false,
|
||||
// 左下角 圆盘动画控件
|
||||
animation: false,
|
||||
// 时间轴
|
||||
timeline: false,
|
||||
// 右小角 全屏
|
||||
fullscreenButton: false,
|
||||
vrButton: false,
|
||||
// 点击要素后提示信息
|
||||
infoBox: false,
|
||||
selectionIndicator: false,
|
||||
// 每个几何实例将只能以3D渲染以节省GPU内存
|
||||
scene3DOnly: false,
|
||||
// 关闭地球光环
|
||||
skyAtmosphere: false,
|
||||
// 初始化底图
|
||||
imageryProvider: new Cesium.SingleTileImageryProvider({
|
||||
url: 'https://gisdata.t-aaron.com/GlobalBkLayer.jpg'
|
||||
}),
|
||||
shouldAnimate: true,
|
||||
orderIndependentTranslucency: false,
|
||||
contextOptions: {
|
||||
webgl: {
|
||||
alpha: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
data.scene = data.viewer.scene
|
||||
|
||||
// 去除版权信息
|
||||
data.viewer._cesiumWidget._creditContainer.style.display = 'none'
|
||||
|
||||
// 取消双击事件-追踪该位置
|
||||
data.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
|
||||
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
|
||||
)
|
||||
|
||||
// //初始化视角
|
||||
data.viewer.camera.position = {
|
||||
x: -2610445.7358946367, y: 4754512.985081314, z: 3344995.579662871
|
||||
}
|
||||
data.viewer.camera.setView({
|
||||
orientation: {
|
||||
heading: 3.2814040916499394,
|
||||
pitch: -0.5626895458436971,
|
||||
roll: 6.283183261091251
|
||||
}
|
||||
})
|
||||
|
||||
// 添加二维底图
|
||||
// arcgis蓝底图
|
||||
// data.arcMap = data.viewer.imageryLayers.addImageryProvider(
|
||||
// new Cesium.ArcGisMapServerImageryProvider({
|
||||
// url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',
|
||||
// maximumLevel: 18
|
||||
// })
|
||||
// )
|
||||
// data.arcMap.show = false
|
||||
|
||||
// 天地图影像图
|
||||
const imgLayer = new Cesium.UrlTemplateImageryProvider({
|
||||
url: 'https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=f634525a82da65f715d168d7ba1899c0',
|
||||
maximumLevel: 18
|
||||
})
|
||||
data.imgMap = data.viewer.imageryLayers.addImageryProvider(imgLayer)
|
||||
|
||||
getMouseLocation()
|
||||
|
||||
load3DTiles('https://gisdata.t-aaron.com/b3dm/park/tileset.json')
|
||||
}
|
||||
|
||||
const handleToolBar = (info) => {
|
||||
console.log(info)
|
||||
}
|
||||
|
||||
// 销毁handler事件
|
||||
const destoryHandler = () => {
|
||||
data.handler = data.handler && data.handler.destroy()
|
||||
}
|
||||
|
||||
const clearMeasure = () => {
|
||||
clearMeasureLine()
|
||||
clearMeasureArea()
|
||||
clearMeasureHeight()
|
||||
emit('complete-measure')
|
||||
}
|
||||
|
||||
// 清除测距
|
||||
const clearMeasureLine = () => {
|
||||
data.measureLinePos = []
|
||||
if (data.measureLineEntities.length > 0) {
|
||||
data.measureLineEntities.map(entity => {
|
||||
data.viewer.entities.remove(entity)
|
||||
})
|
||||
data.measureLineEntities = []
|
||||
}
|
||||
}
|
||||
|
||||
// 测距
|
||||
const measureLine = () => {
|
||||
// 先清除上次绘制的线
|
||||
clearMeasureLine()
|
||||
|
||||
var poly = null
|
||||
var distance = 0
|
||||
var cartesian = null
|
||||
|
||||
// 鼠标事件
|
||||
data.handler = new Cesium.ScreenSpaceEventHandler(data.viewer.scene.canvas)
|
||||
|
||||
data.handler.setInputAction(function (movement) {
|
||||
cartesian = data.viewer.scene.camera.pickEllipsoid(movement.endPosition, data.viewer.scene.globe.ellipsoid)
|
||||
if (data.measureLinePos.length > 1) {
|
||||
// Cesium.defined: 如果定义了对象，则返回true，否则返回false。
|
||||
if (!Cesium.defined(poly)) {
|
||||
const polyline = new Cesium.Entity({
|
||||
name: '直线',
|
||||
polyline: {
|
||||
positions: new Cesium.CallbackProperty(() => {
|
||||
return data.measureLinePos
|
||||
}, false),
|
||||
material: Cesium.Color.CHARTREUSE,
|
||||
width: 10,
|
||||
clampToGround: true
|
||||
}
|
||||
})
|
||||
poly = data.viewer.entities.add(polyline)
|
||||
data.measureLineEntities.push(poly)
|
||||
} else {
|
||||
data.measureLinePos.pop()
|
||||
data.measureLinePos.push(cartesian)
|
||||
}
|
||||
distance = getSpaceDistance(data.measureLinePos)
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||||
|
||||
data.handler.setInputAction(function (movement) {
|
||||
cartesian = data.viewer.scene.camera.pickEllipsoid(movement.position, data.viewer.scene.globe.ellipsoid)
|
||||
if (data.measureLinePos.length === 0) {
|
||||
// 第一次先传入两个点, 生成 线entity
|
||||
data.measureLinePos.push(cartesian)
|
||||
}
|
||||
data.measureLinePos.push(cartesian)
|
||||
// 在三维场景中添加Label
|
||||
var textDisance = distance + '米'
|
||||
const label = data.viewer.entities.add({
|
||||
name: '空间直线距离',
|
||||
position: data.measureLinePos[data.measureLinePos.length - 1],
|
||||
point: {
|
||||
pixelSize: 5,
|
||||
color: Cesium.Color.RED,
|
||||
outlineColor: Cesium.Color.WHITE,
|
||||
outlineWidth: 2
|
||||
},
|
||||
label: {
|
||||
text: textDisance,
|
||||
font: '18px sans-serif',
|
||||
fillColor: Cesium.Color.GOLD,
|
||||
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||||
outlineWidth: 2,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
pixelOffset: new Cesium.Cartesian2(20, -20)
|
||||
}
|
||||
})
|
||||
data.measureLineEntities.push(label)
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||||
|
||||
data.handler.setInputAction(function (movement) {
|
||||
data.handler = data.handler && data.handler.destroy()
|
||||
// 最后一个点无效
|
||||
data.measureLinePos.pop()
|
||||
// 结束绘制
|
||||
emit('complete-measure')
|
||||
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
|
||||
|
||||
// 空间两点距离计算函数
|
||||
function getSpaceDistance(positions) {
|
||||
var distance = 0
|
||||
for (var i = 0; i < positions.length - 1; i++) {
|
||||
var point1cartographic = Cesium.Cartographic.fromCartesian(
|
||||
positions[i]
|
||||
)
|
||||
var point2cartographic = Cesium.Cartographic.fromCartesian(
|
||||
positions[i + 1]
|
||||
)
|
||||
/** 根据经纬度计算出距离**/
|
||||
var geodesic = new Cesium.EllipsoidGeodesic()
|
||||
geodesic.setEndPoints(point1cartographic, point2cartographic)
|
||||
var s = geodesic.surfaceDistance
|
||||
distance = distance + s
|
||||
}
|
||||
return distance.toFixed(2)
|
||||
}
|
||||
}
|
||||
|
||||
// 清除测面
|
||||
const clearMeasureArea = () => {
|
||||
data.measureAreaPos = []
|
||||
if (data.measureAreaEntities.length > 0) {
|
||||
data.measureAreaEntities.map(entity => {
|
||||
data.viewer.entities.remove(entity)
|
||||
})
|
||||
data.measureAreaEntities = []
|
||||
}
|
||||
}
|
||||
|
||||
// 测面
|
||||
const measureArea = () => {
|
||||
// 清除上次绘制的面
|
||||
clearMeasureArea()
|
||||
|
||||
var tempPoints = []
|
||||
var poly = null
|
||||
var cartesian = null
|
||||
|
||||
// 鼠标事件
|
||||
data.handler = new Cesium.ScreenSpaceEventHandler(data.viewer.scene.canvas)
|
||||
|
||||
data.handler.setInputAction(function (movement) {
|
||||
const ray = data.viewer.camera.getPickRay(movement.endPosition)
|
||||
cartesian = data.viewer.scene.globe.pick(ray, data.viewer.scene)
|
||||
if (data.measureAreaPos.length > 1) {
|
||||
if (!Cesium.defined(poly)) {
|
||||
const polygon = new Cesium.Entity({
|
||||
name: '多边形',
|
||||
polygon: {
|
||||
hierarchy: new Cesium.CallbackProperty(() => {
|
||||
return new Cesium.PolygonHierarchy(data.measureAreaPos)
|
||||
// 使用最新1.72的时候 必须返回PolygonHierarchy类型 Cannot read property 'length' of undefined
|
||||
// 低版本好像都可以
|
||||
}, false),
|
||||
material: Cesium.Color.RED.withAlpha(0.5)
|
||||
}
|
||||
})
|
||||
poly = data.viewer.entities.add(polygon)
|
||||
data.measureAreaEntities.push(poly)
|
||||
} else {
|
||||
data.measureAreaPos.pop()
|
||||
data.measureAreaPos.push(cartesian)
|
||||
}
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||||
|
||||
data.handler.setInputAction(function (movement) {
|
||||
const ray = data.viewer.camera.getPickRay(movement.position)
|
||||
cartesian = data.viewer.scene.globe.pick(ray, data.viewer.scene)
|
||||
if (data.measureAreaPos.length === 0) {
|
||||
data.measureAreaPos.push(cartesian)
|
||||
}
|
||||
data.measureAreaPos.push(cartesian)
|
||||
// 在三维场景中添加点
|
||||
var cartographic = Cesium.Cartographic.fromCartesian(
|
||||
data.measureAreaPos[data.measureAreaPos.length - 1]
|
||||
)
|
||||
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude)
|
||||
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude)
|
||||
var heightString = cartographic.height
|
||||
tempPoints.push({
|
||||
lon: longitudeString,
|
||||
lat: latitudeString,
|
||||
hei: heightString
|
||||
})
|
||||
const floatingPoint = data.viewer.entities.add({
|
||||
name: '多边形折点',
|
||||
position: data.measureAreaPos[data.measureAreaPos.length - 1],
|
||||
point: {
|
||||
pixelSize: 5,
|
||||
color: Cesium.Color.RED,
|
||||
outlineColor: Cesium.Color.WHITE,
|
||||
outlineWidth: 2,
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
}
|
||||
})
|
||||
data.measureAreaEntities.push(floatingPoint)
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||||
|
||||
data.handler.setInputAction(function (movement) {
|
||||
data.handler.destroy()
|
||||
data.measureAreaPos.pop()
|
||||
|
||||
var textArea = getArea(tempPoints) + '平方公里'
|
||||
const textLabel = data.viewer.entities.add({
|
||||
name: '多边形面积',
|
||||
position: data.measureAreaPos[data.measureAreaPos.length - 1],
|
||||
label: {
|
||||
text: textArea,
|
||||
font: '18px sans-serif',
|
||||
fillColor: Cesium.Color.GOLD,
|
||||
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||||
outlineWidth: 2,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
pixelOffset: new Cesium.Cartesian2(20, -40),
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
}
|
||||
})
|
||||
data.measureAreaEntities.push(textLabel)
|
||||
// 结束绘制
|
||||
emit('complete-measure')
|
||||
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
|
||||
|
||||
var radiansPerDegree = Math.PI / 180.0 // 角度转化为弧度(rad)
|
||||
var degreesPerRadian = 180.0 / Math.PI // 弧度转化为角度
|
||||
|
||||
// 计算多边形面积
|
||||
function getArea(points) {
|
||||
var res = 0
|
||||
// 拆分三角曲面
|
||||
for (var i = 0; i < points.length - 2; i++) {
|
||||
var j = (i + 1) % points.length
|
||||
var k = (i + 2) % points.length
|
||||
var totalAngle = Angle(points[i], points[j], points[k])
|
||||
|
||||
var dis_temp1 = distance(data.measureAreaPos[i], data.measureAreaPos[j])
|
||||
var dis_temp2 = distance(data.measureAreaPos[j], data.measureAreaPos[k])
|
||||
res += dis_temp1 * dis_temp2 * Math.abs(Math.sin(totalAngle))
|
||||
}
|
||||
|
||||
return (res / 1000000.0).toFixed(4)
|
||||
}
|
||||
|
||||
/* 角度*/
|
||||
function Angle(p1, p2, p3) {
|
||||
var bearing21 = Bearing(p2, p1)
|
||||
var bearing23 = Bearing(p2, p3)
|
||||
var angle = bearing21 - bearing23
|
||||
if (angle < 0) {
|
||||
angle += 360
|
||||
}
|
||||
return angle
|
||||
}
|
||||
/* 方向*/
|
||||
function Bearing(from, to) {
|
||||
var lat1 = from.lat * radiansPerDegree
|
||||
var lon1 = from.lon * radiansPerDegree
|
||||
var lat2 = to.lat * radiansPerDegree
|
||||
var lon2 = to.lon * radiansPerDegree
|
||||
var angle = -Math.atan2(
|
||||
Math.sin(lon1 - lon2) * Math.cos(lat2),
|
||||
Math.cos(lat1) * Math.sin(lat2) -
|
||||
Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2)
|
||||
)
|
||||
if (angle < 0) {
|
||||
angle += Math.PI * 2.0
|
||||
}
|
||||
angle = angle * degreesPerRadian // 角度
|
||||
return angle
|
||||
}
|
||||
|
||||
function distance(point1, point2) {
|
||||
var point1cartographic = Cesium.Cartographic.fromCartesian(point1)
|
||||
var point2cartographic = Cesium.Cartographic.fromCartesian(point2)
|
||||
/** 根据经纬度计算出距离**/
|
||||
var geodesic = new Cesium.EllipsoidGeodesic()
|
||||
geodesic.setEndPoints(point1cartographic, point2cartographic)
|
||||
var s = geodesic.surfaceDistance
|
||||
// 返回两点之间的距离
|
||||
s = Math.sqrt(
|
||||
Math.pow(s, 2) +
|
||||
Math.pow(point2cartographic.height - point1cartographic.height, 2)
|
||||
)
|
||||
return s
|
||||
}
|
||||
}
|
||||
|
||||
// 清除测高
|
||||
const clearMeasureHeight = () => {
|
||||
data.measureHeightPos = []
|
||||
if (data.measureHeightEntities.length > 0) {
|
||||
data.measureHeightEntities.map(entity => {
|
||||
data.viewer.entities.remove(entity)
|
||||
})
|
||||
data.measureHeightEntities = []
|
||||
}
|
||||
}
|
||||
|
||||
// 测高
|
||||
const measureHeight = () => {
|
||||
clearMeasureHeight()
|
||||
|
||||
var poly = null
|
||||
var height = 0
|
||||
var cartesian = null
|
||||
|
||||
// 鼠标事件
|
||||
data.handler = new Cesium.ScreenSpaceEventHandler(data.viewer.scene.canvas)
|
||||
|
||||
data.handler.setInputAction(function(movement) {
|
||||
cartesian = data.viewer.scene.pickPosition(movement.endPosition)
|
||||
if (data.measureHeightPos.length >= 2) {
|
||||
if (!Cesium.defined(poly)) {
|
||||
const entity = new Cesium.Entity({
|
||||
name: '直线',
|
||||
position: data.measureHeightPos[0],
|
||||
polyline: {
|
||||
show: true,
|
||||
positions: new Cesium.CallbackProperty(() => {
|
||||
var temp_position = []
|
||||
temp_position.push(data.measureHeightPos[0])
|
||||
var point1cartographic = Cesium.Cartographic.fromCartesian(data.measureHeightPos[0])
|
||||
var point2cartographic = Cesium.Cartographic.fromCartesian(data.measureHeightPos[1])
|
||||
var point_temp = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(point1cartographic.longitude), Cesium.Math.toDegrees(point1cartographic.latitude), point2cartographic.height)
|
||||
temp_position.push(point_temp)
|
||||
return temp_position
|
||||
}, false),
|
||||
material: Cesium.Color.RED,
|
||||
width: 2
|
||||
},
|
||||
ellipse: {
|
||||
show: true,
|
||||
material: Cesium.Color.GREEN.withAlpha(0.5),
|
||||
semiMinorAxis: _semiMinorAxis(data.measureHeightPos),
|
||||
semiMajorAxis: _semiMinorAxis(data.measureHeightPos),
|
||||
height: new Cesium.CallbackProperty(() => {
|
||||
const point2cartographic = Cesium.Cartographic.fromCartesian(data.measureHeightPos[1])// 终点
|
||||
return point2cartographic.height
|
||||
}, false),
|
||||
// height must be set for outline to display
|
||||
outline: true
|
||||
}
|
||||
})
|
||||
poly = data.viewer.entities.add(entity)
|
||||
data.measureHeightEntities.push(poly)
|
||||
} else {
|
||||
data.measureHeightPos.pop()
|
||||
data.measureHeightPos.push(cartesian)
|
||||
}
|
||||
height = getHeight(data.measureHeightPos)
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||||
|
||||
data.handler.setInputAction(function(movement) {
|
||||
cartesian = data.viewer.scene.pickPosition(movement.position)
|
||||
|
||||
if (data.measureHeightPos.length === 0) {
|
||||
data.measureHeightPos.push(cartesian)
|
||||
data.measureHeightPos.push(cartesian)
|
||||
|
||||
const startPoint = data.viewer.entities.add({
|
||||
name: '高度',
|
||||
position: data.measureHeightPos[0],
|
||||
point: {
|
||||
pixelSize: 5,
|
||||
color: Cesium.Color.RED,
|
||||
outlineColor: Cesium.Color.WHITE,
|
||||
outlineWidth: 2,
|
||||
heightReference: Cesium.HeightReference.none
|
||||
},
|
||||
label: {
|
||||
text: '0米',
|
||||
font: '18px sans-serif',
|
||||
fillColor: Cesium.Color.GOLD,
|
||||
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||||
outlineWidth: 2,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
pixelOffset: new Cesium.Cartesian2(20, -40)
|
||||
}
|
||||
})
|
||||
|
||||
data.measureHeightEntities.push(startPoint)
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||||
|
||||
data.handler.setInputAction(function(movement) {
|
||||
data.handler.destroy()
|
||||
var textDisance = height + '米'
|
||||
|
||||
var point1cartographic = Cesium.Cartographic.fromCartesian(data.measureHeightPos[0])
|
||||
var point2cartographic = Cesium.Cartographic.fromCartesian(data.measureHeightPos[1])
|
||||
var point_temp = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(point1cartographic.longitude), Cesium.Math.toDegrees(point1cartographic.latitude), point2cartographic.height)
|
||||
|
||||
const entity = data.viewer.entities.add({
|
||||
name: '直线距离',
|
||||
position: point_temp,
|
||||
point: {
|
||||
pixelSize: 5,
|
||||
color: Cesium.Color.RED,
|
||||
outlineColor: Cesium.Color.WHITE,
|
||||
outlineWidth: 2,
|
||||
heightReference: Cesium.HeightReference.none
|
||||
},
|
||||
label: {
|
||||
text: textDisance,
|
||||
font: '18px sans-serif',
|
||||
fillColor: Cesium.Color.GOLD,
|
||||
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||||
outlineWidth: 2,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
pixelOffset: new Cesium.Cartesian2(20, -20)
|
||||
}
|
||||
})
|
||||
data.measureHeightEntities.push(entity)
|
||||
|
||||
// 结束绘制
|
||||
emit('complete-measure')
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
|
||||
|
||||
function getHeight(_positions) {
|
||||
var cartographic = Cesium.Cartographic.fromCartesian(_positions[0])
|
||||
var cartographic1 = Cesium.Cartographic.fromCartesian(_positions[1])
|
||||
var height_temp = cartographic1.height - cartographic.height
|
||||
return height_temp.toFixed(2)
|
||||
}
|
||||
|
||||
function _semiMinorAxis(_positions) {
|
||||
return new Cesium.CallbackProperty(() => {
|
||||
var point1cartographic = Cesium.Cartographic.fromCartesian(_positions[0])
|
||||
var point2cartographic = Cesium.Cartographic.fromCartesian(_positions[1])
|
||||
/** 根据经纬度计算出距离**/
|
||||
var geodesic = new Cesium.EllipsoidGeodesic()
|
||||
geodesic.setEndPoints(point1cartographic, point2cartographic)
|
||||
var s = geodesic.surfaceDistance
|
||||
return s
|
||||
}, false)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载倾斜摄影
|
||||
* @param {tileset.json 路径} tilesetUrl
|
||||
*/
|
||||
const load3DTiles = (tilesetUrl) => {
|
||||
var tileset3D = new Cesium.Cesium3DTileset({
|
||||
url: tilesetUrl,
|
||||
skipScreenSpaceErrorFactor: 16,
|
||||
// 开启跳级加载
|
||||
skipLevelOfDetail: true,
|
||||
// preferLeaves
|
||||
preferLeaves: true,
|
||||
maximumMemoryUsage: 2800
|
||||
})
|
||||
|
||||
tileset3D.readyPromise.then((tileset) => {
|
||||
data.viewer.scene.primitives.add(tileset)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 地图控制
|
||||
* @param {*} order
|
||||
*/
|
||||
const mapControl = (order) => {
|
||||
// 存储地图相机初始值
|
||||
const x = data.viewer.camera.position.x
|
||||
const y = data.viewer.camera.position.y
|
||||
const z = data.viewer.camera.position.z
|
||||
|
||||
data.viewer.initCameraPosition = { x: x, y: y, z: z }
|
||||
data.viewer.initViewRectangle = data.viewer.camera.computeViewRectangle()
|
||||
data.viewer.initOrientation = {
|
||||
heading: data.viewer.camera.heading,
|
||||
pitch: data.viewer.camera.pitch,
|
||||
roll: data.viewer.camera.roll
|
||||
}
|
||||
if (order === 'turnLeft') {
|
||||
// 向左旋转
|
||||
data.viewer.camera.look(data.viewer.initCameraPosition, 0.4)
|
||||
} else if (order === 'turnRight') {
|
||||
// 向右旋转
|
||||
data.viewer.camera.look(data.viewer.initCameraPosition, -0.4)
|
||||
} else if (order === 'birdEye') {
|
||||
// 鸟瞰
|
||||
const pick1 = new Cesium.Cartesian2(document.body.clientWidth / 2, screen.height / 2)
|
||||
const cartesian3 = data.viewer.scene.globe.pick(data.viewer.camera.getPickRay(pick1), data.viewer.scene)
|
||||
const naokanEntity = data.viewer.entities.add(new Cesium.Entity({
|
||||
point: new Cesium.PointGraphics({}),
|
||||
position: cartesian3
|
||||
}))
|
||||
var promise = data.viewer.flyTo(naokanEntity, {
|
||||
offset: {
|
||||
heading: data.viewer.camera.heading,
|
||||
pitch: Cesium.Math.toRadians(-90),
|
||||
range: 5000
|
||||
}
|
||||
})
|
||||
// console.log(promise)
|
||||
// promise.then(() => {
|
||||
// data.viewer.entities.remove(naokanEntity)
|
||||
// })
|
||||
} else if (order === 'zoomIn') {
|
||||
data.viewer.scene.camera.zoomIn(2500)
|
||||
} else if (order === 'zoomOut') {
|
||||
data.viewer.scene.camera.zoomOut(2500)
|
||||
} else if (order === 'reset') {
|
||||
// //初始化视角
|
||||
data.viewer.camera.position = {
|
||||
x: -2610445.7358946367, y: 4754512.985081314, z: 3344995.579662871
|
||||
}
|
||||
data.viewer.camera.setView({
|
||||
orientation: {
|
||||
heading: 3.2814040916499394,
|
||||
pitch: -0.5626895458436971,
|
||||
roll: 6.283183261091251
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 获取鼠标所在位置
|
||||
const getMouseLocation = () => {
|
||||
// 得到当前三维场景的椭球体
|
||||
var ellipsoid = data.scene.globe.ellipsoid
|
||||
var handler = new Cesium.ScreenSpaceEventHandler(data.scene.canvas)
|
||||
// 设置鼠标移动事件的处理函数，这里负责监听x,y坐标值变化
|
||||
handler.setInputAction(function(movement) {
|
||||
// 通过指定的椭球或者地图对应的坐标系，将鼠标的二维坐标转换为对应椭球体三维坐标
|
||||
var cartesian = data.viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid)
|
||||
if (cartesian) {
|
||||
// 将笛卡尔坐标转换为地理坐标
|
||||
var cartographic = ellipsoid.cartesianToCartographic(cartesian)
|
||||
// 将弧度转为度的十进制度表示
|
||||
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude)
|
||||
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude)
|
||||
// 获取相机高度
|
||||
// var height = Math.ceil(data.viewer.camera.positionCartographic.height)
|
||||
data.mouseLocation.lng = longitudeString.toFixed(6) || 0
|
||||
data.mouseLocation.lat = latitudeString.toFixed(6) || 0
|
||||
// data.mouseLocation.height = height || 0
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initMap()
|
||||
})
|
||||
|
||||
return {
|
||||
...toRefs(data),
|
||||
mapControl,
|
||||
handleToolBar,
|
||||
measureRef,
|
||||
clearMeasure,
|
||||
measureLine,
|
||||
measureArea,
|
||||
measureHeight
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cesium-viewer{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div class="copyright-info">
|
||||
<span class="copyright-info-text">
|
||||
版权所有：拓恒技术有限公司 |
|
||||
问题反馈：张涛 17696850927（微信同号） |
|
||||
<span class="copyright-info-location">
|
||||
经度：<span class="copyright-info-lng">{{ getLocation.lng || 0 }}</span>
|
||||
</span> |
|
||||
<span class="copyright-info-location">
|
||||
纬度：<span class="copyright-info-lat">{{ getLocation.lat || 0 }}</span>
|
||||
</span>
|
||||
<!-- <span class="copyright-info-location">
|
||||
高度：<span class="copyright-info-camera">{{ getLocation.height }}</span>
|
||||
</span> -->
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { computed, toRaw } from 'vue'
|
||||
export default {
|
||||
props: {
|
||||
location: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const getLocation = computed(() => {
|
||||
return props.location
|
||||
})
|
||||
|
||||
return {
|
||||
getLocation
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.copyright-info{
|
||||
width:1200px;
|
||||
height:36px;
|
||||
background:linear-gradient(90deg,rgba(0,0,0,1),rgba(0,0,0,0));
|
||||
opacity:0.6;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.copyright-info-text{
|
||||
width:899px;
|
||||
height:13px;
|
||||
font-size:12px;
|
||||
font-family:Microsoft YaHei;
|
||||
font-weight:400;
|
||||
line-height:6px;
|
||||
line-height: 36px;
|
||||
margin-left: 19px;
|
||||
color:rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
.copyright-info-location{
|
||||
color: #4EFDFF
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!--
|
||||
* @Author: lixin
|
||||
* @Date: 2023-5-29
|
||||
* @Description: 图层管理(级联控制)
|
||||
-->
|
||||
<template>
|
||||
<div class="layer-tree">
|
||||
<n-tree
|
||||
block-line
|
||||
cascade
|
||||
checkable
|
||||
:data="data"
|
||||
:default-expanded-keys="defaultExpandedKeys"
|
||||
:default-checked-keys="defaultCheckedKeys"
|
||||
@update:checked-keys="updateCheckedKeys"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { repeat } from 'seemly'
|
||||
|
||||
function createData(level = 4, baseKey = '') {
|
||||
if (!level) { return void 0 }
|
||||
return repeat(6 - level, void 0).map((_, index) => {
|
||||
const key = '' + baseKey + level + index
|
||||
return {
|
||||
label: createLabel(level),
|
||||
key,
|
||||
children: createData(level - 1, key)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function createLabel(level) {
|
||||
if (level === 4) { return '道生一' }
|
||||
if (level === 3) { return '一生二' }
|
||||
if (level === 2) { return '二生三' }
|
||||
if (level === 1) { return '三生万物' }
|
||||
return ''
|
||||
}
|
||||
|
||||
export default ({
|
||||
setup() {
|
||||
console.log(createData())
|
||||
|
||||
return {
|
||||
data: createData(),
|
||||
defaultExpandedKeys: ref(['40', '4030', '403020']),
|
||||
defaultCheckedKeys: ref(['40302010']),
|
||||
updateCheckedKeys: (keys, options, meta) => {
|
||||
console.log('updateCheckedKeys', keys, options, meta)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.layer-tree {
|
||||
width: 270px;
|
||||
height: 430px;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 20px;
|
||||
background: url('../../../../assets/basemap/layer/tuceng_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
::v-deep(.n-tree-node-content__text){
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep(.n-tree-node--checkable:hover){
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!--
|
||||
* @Author: lixin
|
||||
* @Date: 2023-5-27
|
||||
* @Description: 地图控制：放大、缩小、复位、鸟瞰、向左旋转、向右旋转
|
||||
-->
|
||||
<template>
|
||||
<div class="contorl-list">
|
||||
<div
|
||||
v-for="(item, index) in controlList"
|
||||
:key="index"
|
||||
class="control-bar"
|
||||
>
|
||||
<p v-if="hoverIndex === index" class="title">{{ item.label }}</p>
|
||||
<img
|
||||
:src="hoverIndex === index ? getImageUrl(item.id + '_press'): getImageUrl(item.id)"
|
||||
@mouseover="hoverIndex = index"
|
||||
@mouseout="hoverIndex = null"
|
||||
@click="handleControl(item)"
|
||||
>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { reactive, toRefs } from 'vue'
|
||||
export default {
|
||||
emits: ['control'],
|
||||
setup(props, { emit }) {
|
||||
const data = reactive({
|
||||
controlList: [
|
||||
{ id: 'turnLeft', label: '向左旋转' },
|
||||
{ id: 'turnRight', label: '向右旋转' },
|
||||
{ id: 'birdEye', label: '鸟瞰' },
|
||||
{ id: 'reset', label: '复位' },
|
||||
{ id: 'zoomIn', label: '放大' },
|
||||
{ id: 'zoomOut', label: '缩小' }
|
||||
],
|
||||
hoverIndex: null
|
||||
})
|
||||
|
||||
const getImageUrl = (src) => {
|
||||
return new URL(`../../../../assets/basemap/mapcontrol/${src}.png`, import.meta.url).href
|
||||
}
|
||||
|
||||
const handleControl = (info) => {
|
||||
emit('control', info?.id)
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(data),
|
||||
getImageUrl,
|
||||
handleControl
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.contorl-list {
|
||||
width: 42px;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
.title {
|
||||
width: 80px;
|
||||
height: 0;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
left: -85px;
|
||||
bottom: -10px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,194 @@
|
|||
<!--
|
||||
* @Author: lixin
|
||||
* @Date: 2023-5-29
|
||||
* @Description: 底图切换和出图
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="tool-list">
|
||||
<p v-for="(item, index) in toolList" :key="index" class="map-tool" @click="handleTool(item.id)">
|
||||
<img :src="getImageUrl(item.id)">
|
||||
{{ item.label }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-show="containerShow" class="switch-container">
|
||||
<!-- <div class="road-net">
|
||||
地图
|
||||
<p class="net-switch">
|
||||
<n-switch :rail-style="railStyle" @update:value="handleRoadNet" />
|
||||
路网
|
||||
</p>
|
||||
</div> -->
|
||||
<div class="map-list">
|
||||
<p v-for="(item, index) in mapList" :key="index" :class="selectedType === item.id ? 'selected' : ''" class="map-server" @click="selectMap(item.id)">
|
||||
<img :src="getImageUrl(item.id)">
|
||||
{{ item.label }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs } from '@vue/reactivity'
|
||||
export default {
|
||||
emits: ['print', 'switch', 'road'],
|
||||
setup(props, { emit }) {
|
||||
const data = reactive({
|
||||
toolList: [
|
||||
{ id: 'switch', label: '切换' },
|
||||
{ id: 'print', label: '下载' }
|
||||
],
|
||||
mapList: [
|
||||
{ id: 'img', label: '卫星地图' },
|
||||
{ id: 'vec', label: '电子地图' }
|
||||
],
|
||||
containerShow: false,
|
||||
roadShow: false,
|
||||
selectedType: 'img'
|
||||
})
|
||||
|
||||
const selectMap = (type) => {
|
||||
if (type !== data.selectedType) {
|
||||
data.selectedType = type
|
||||
emit('switch', type)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRoadNet = (bool) => {
|
||||
emit('road', bool)
|
||||
}
|
||||
|
||||
const handleTool = (value) => {
|
||||
if (value === 'print') {
|
||||
emit('print')
|
||||
} else if (value === 'switch') {
|
||||
data.containerShow = !data.containerShow
|
||||
}
|
||||
}
|
||||
|
||||
const railStyle = (status) => {
|
||||
const style = {}
|
||||
if (status.checked) {
|
||||
style.background = '#1896FF'
|
||||
} else {
|
||||
style.background = '#C3C6CC'
|
||||
}
|
||||
|
||||
return style
|
||||
}
|
||||
|
||||
const getImageUrl = (src) => {
|
||||
return new URL(`../../../../assets/basemap/mapswitch/${src}.png`, import.meta.url).href
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(data),
|
||||
getImageUrl,
|
||||
railStyle,
|
||||
handleTool,
|
||||
selectMap,
|
||||
handleRoadNet
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.tool-list {
|
||||
width: 50px;
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
left: 40px;
|
||||
|
||||
.map-tool {
|
||||
width: 50px;
|
||||
height: 59px;
|
||||
background: rgba(13,32,67,0.8);
|
||||
border: 1px solid #0F61D4;
|
||||
border-radius: 10px;
|
||||
margin: 6px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-container {
|
||||
width: 163px;
|
||||
height: 145px;
|
||||
position: absolute;
|
||||
bottom: 75px;
|
||||
left: 95px;
|
||||
background: url('../../../../assets/basemap/mapswitch/switchback.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.road-net {
|
||||
width: 150px;
|
||||
height: 42px;
|
||||
border-bottom: 2px dashed #C3C6CC;
|
||||
font-size: 16px;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1896FF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-left: 12px;
|
||||
|
||||
.net-switch {
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #C3C6CC;
|
||||
}
|
||||
}
|
||||
|
||||
.map-list {
|
||||
width: 152px;
|
||||
height: 103px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-left: 12px;
|
||||
|
||||
.map-server{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
|
||||
img{
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
// border: 1px solid #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.map-server.selected {
|
||||
|
||||
color: #1896FF;
|
||||
|
||||
img{
|
||||
border: 2px solid #1896FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.n-switch .n-switch__rail){
|
||||
background-color: #C3C6CC;
|
||||
.n-switch__button {
|
||||
background-color: #1891F6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<!--
|
||||
* @Author: lixin
|
||||
* @Date: 2023-5-27
|
||||
* @Description: 测量工具: 测距、测面、测高
|
||||
-->
|
||||
<template>
|
||||
<div class="measure-list">
|
||||
<div
|
||||
v-for="(item, index) in controlList"
|
||||
:key="index"
|
||||
:class="selectedTool === item.id ? 'selceted' : ''"
|
||||
class="measure-bar"
|
||||
@click="handleTool(item)"
|
||||
>
|
||||
<img
|
||||
:src="selectedTool === item.id ? getImageUrl(item.id + '_press'): getImageUrl(item.id)"
|
||||
>
|
||||
<p
|
||||
:class="selectedTool === item.id ? 'selceted' : ''"
|
||||
class="measure-text"
|
||||
>{{ item.label }}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { reactive, toRefs } from 'vue'
|
||||
export default {
|
||||
emits: ['measure'],
|
||||
setup(props, { emit }) {
|
||||
const data = reactive({
|
||||
controlList: [
|
||||
{ id: 'distance', label: '测距' },
|
||||
{ id: 'area', label: '测面' },
|
||||
{ id: 'height', label: '测高' },
|
||||
{ id: 'clear', label: '清除' }
|
||||
],
|
||||
selectedTool: null
|
||||
})
|
||||
|
||||
const getImageUrl = (src) => {
|
||||
return new URL(`../../../../assets/basemap/measure/${src}.png`, import.meta.url).href
|
||||
}
|
||||
|
||||
const handleTool = (info) => {
|
||||
if (info?.id !== data.selectedTool) {
|
||||
data.selectedTool = info?.id
|
||||
}
|
||||
emit('measure', data.selectedTool)
|
||||
}
|
||||
|
||||
const cancelMeasure = () => {
|
||||
data.selectedTool = null
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(data),
|
||||
getImageUrl,
|
||||
handleTool,
|
||||
cancelMeasure
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.measure-list {
|
||||
position: absolute;
|
||||
top: 105px;
|
||||
right: 20px;
|
||||
width: 280px;
|
||||
height: 90px;
|
||||
cursor: pointer;
|
||||
background: url("../../../../assets/basemap/measure/celiang_bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.measure-bar{
|
||||
width:60px;
|
||||
height:60px;
|
||||
background:rgba(1,25,63,0.15);
|
||||
border:1px solid rgba(0,223,244,1);
|
||||
border-radius:2px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin: 0 5px;
|
||||
|
||||
.measure-text{
|
||||
font-size:12px;
|
||||
font-family:Microsoft YaHei;
|
||||
font-weight:400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.measure-text.selceted{
|
||||
color: #ffbb00;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.measure-bar.selceted{
|
||||
border:1px solid #ffbb00;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!--
|
||||
* @Author: lixin
|
||||
* @Date: 2023-5-27
|
||||
* @Description: 地图上半部分工具栏，包括: 图层、漫游、量测、在线标绘、卷帘、出图等
|
||||
-->
|
||||
<template>
|
||||
<div class="tool-list">
|
||||
<div v-for="(item, index) in toolList" :key="index" class="tool-bar">
|
||||
<img :src="item.id === selectedTool ? getImgUrl(item.id + '_press') : getImgUrl(item.id)">
|
||||
<span class="tool-text" :class="item.id === selectedTool ? 'press': ''" @click="handleTool(item)">{{ item.label }}</span>
|
||||
<b v-if="index !==(toolList.length -1)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs } from 'vue'
|
||||
export default {
|
||||
emits: ['tool'],
|
||||
setup(props, { emit }) {
|
||||
const data = reactive({
|
||||
toolList: [
|
||||
{ id: 'tuceng', label: '图层' },
|
||||
{ id: 'liangce', label: '量测' }
|
||||
],
|
||||
selectedTool: null
|
||||
})
|
||||
|
||||
const getImgUrl = (src) => {
|
||||
return new URL(`../../../../assets/basemap/toolbar/${src}.png`, import.meta.url).href
|
||||
}
|
||||
|
||||
const handleTool = (info) => {
|
||||
if (info?.id !== data.selectedTool) {
|
||||
data.selectedTool = info?.id
|
||||
} else {
|
||||
data.selectedTool = null
|
||||
}
|
||||
emit('tool', data.selectedTool)
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(data),
|
||||
getImgUrl,
|
||||
handleTool
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tool-list{
|
||||
// width: 592px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
background: url("../../../../assets/basemap/toolbar/caozuo_bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
|
||||
.tool-bar{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 15px;
|
||||
|
||||
.tool-text{
|
||||
font-size:14px;
|
||||
font-family:Microsoft YaHei;
|
||||
font-weight:400;
|
||||
/*color:rgba(78,253,255,1);*/
|
||||
color: #FFFFFF;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.tool-text.press{
|
||||
color: rgb(98,223,255);
|
||||
}
|
||||
|
||||
b {
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
border-right: 2px solid rgb(98,223,255);
|
||||
// border-right: 1px solid #eee;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,476 +1,15 @@
|
|||
<template>
|
||||
<div id='cesiumContainer'>
|
||||
</div>
|
||||
<!-- 底图切换按钮 -->
|
||||
<div class="maptab">
|
||||
<div class="maptabs_box" :style="cursor" @mouseover="expandMapList" @mouseleave="collapseMapList">
|
||||
<div class="layer1" :style="{ backgroundImage: 'url(' + mapList[0].bg + ')' }" @click="switchMap(0)">
|
||||
<div class="title">{{ mapList[0].name }}</div>
|
||||
</div>
|
||||
<div :class="[expand ? 'layer3' : 'layer2']" :style="{ backgroundImage: 'url(' + mapList[1].bg + ')' }" @click="switchMap(1)">
|
||||
<div class="title">{{ mapList[1].name }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- 工具栏 -->
|
||||
<div class="tools">
|
||||
<div class="item" @click="zoomIn">
|
||||
<img src="@/assets/img/zoomIn.png" />
|
||||
</div>
|
||||
<div class="item" @click="zoomOut">
|
||||
<img src="@/assets/img/zoomout.png" />
|
||||
</div>
|
||||
<div class="item" @click="reset">
|
||||
<img src="@/assets/img/located.png" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="@/assets/img/measureLength.png" />
|
||||
</div>
|
||||
<div class="item" style="border:0px">
|
||||
<img src="@/assets/img/measureArea.png" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="maptabs_box" :style="cursor" @mouseover="expandMapList" @mouseleave="collapseMapList">
|
||||
|
||||
<div
|
||||
class="layer1"
|
||||
:style="{backgroundImage:'url('+mapList[0].bg+')'}"
|
||||
@click="switchMap(0)"
|
||||
>
|
||||
<div class="title">{{mapList[0].name}}</div>
|
||||
</div>
|
||||
<div
|
||||
:class="[expand?'layer3':'layer2']"
|
||||
:style="{backgroundImage:'url('+mapList[1].bg+')'}"
|
||||
@click="switchMap(1)"
|
||||
>
|
||||
<div class="title">{{ mapList[1].name }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- 图层管理 -->
|
||||
<n-tree block-line :data="treeData" :default-expanded-keys="defaultExpandedKeys" checkable expand-on-click selectable
|
||||
class="layer-tree"></n-tree>
|
||||
<BaseMap />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ref, reactive, onMounted, toRefs } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { repeat } from 'seemly'
|
||||
import sallitePng from '@/assets/img/satelliteMap.png'
|
||||
import TDMapPng from '@/assets/img/TDMap.png'
|
||||
import AdministrtivePng from '@/assets/img/Administrative.png'
|
||||
|
||||
function createData(level = 4, baseKey = "") {
|
||||
if (!level)
|
||||
return void 0;
|
||||
return repeat(6 - level, void 0).map((_, index) => {
|
||||
const key = "" + baseKey + level + index;
|
||||
return {
|
||||
label: createLabel(level),
|
||||
key,
|
||||
children: createData(level - 1, key)
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function createLabel(level) {
|
||||
if (level === 4)
|
||||
return "图层四";
|
||||
if (level === 3)
|
||||
return "图层三";
|
||||
if (level === 2)
|
||||
return "图层二";
|
||||
if (level === 1)
|
||||
return "图层一";
|
||||
return "";
|
||||
}
|
||||
import BaseMap from './components/BaseMap.vue'
|
||||
|
||||
export default {
|
||||
name: 'HomePage',
|
||||
components: {
|
||||
|
||||
},
|
||||
setup(props) {
|
||||
const router = useRouter()
|
||||
|
||||
const data = {
|
||||
viewer: null,
|
||||
mapList: [
|
||||
{ name: '电子图', bg: TDMapPng },
|
||||
{ name: '影像图', bg: sallitePng },
|
||||
{ name: '行政区划图', bg: AdministrtivePng }
|
||||
],
|
||||
cursor: { cursor: '' },
|
||||
expand: false,
|
||||
mapChooseIndex: 0,
|
||||
currentChooseIndex: 0,
|
||||
//测距
|
||||
tempEntities: [],
|
||||
pointNum: 0,
|
||||
floatingPoint: undefined,
|
||||
activeShape: undefined
|
||||
}
|
||||
function toSystem() {
|
||||
router.push({ path: '/login' })
|
||||
}
|
||||
|
||||
|
||||
const initMap = () => {
|
||||
//设置相机初始飞到中国上空
|
||||
// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90)
|
||||
data.viewer = new Cesium.Viewer('cesiumContainer', {
|
||||
// 右上角 搜索
|
||||
geocoder: false,
|
||||
// 右上角 Home
|
||||
homeButton: false,
|
||||
// 右上角 2D/3D切换
|
||||
sceneModePicker: false,
|
||||
// 右上角 地形
|
||||
baseLayerPicker: false,
|
||||
// 右上角 Help
|
||||
navigationHelpButton: false,
|
||||
// 左下角 圆盘动画控件
|
||||
animation: false,
|
||||
// 时间轴
|
||||
timeline: false,
|
||||
// 右小角 全屏
|
||||
fullscreenButton: false,
|
||||
vrButton: false,
|
||||
// 点击要素后提示信息
|
||||
infoBox: false,
|
||||
selectionIndicator: false,
|
||||
// 每个几何实例将只能以3D渲染以节省GPU内存
|
||||
scene3DOnly: false,
|
||||
// 关闭地球光环
|
||||
skyAtmosphere: false,
|
||||
// 初始化底图
|
||||
// imageryProvider: new Cesium.SingleTileImageryProvider({
|
||||
// url: 'https://gisdata.t-aaron.com/GlobalBkLayer.jpg'
|
||||
// }),
|
||||
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
|
||||
url: "http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=f634525a82da65f715d168d7ba1899c0",
|
||||
layer: "tdtImgLayer",
|
||||
style: "default",
|
||||
format: "image/jpeg",
|
||||
tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
|
||||
show: true
|
||||
}),
|
||||
shouldAnimate: true,
|
||||
orderIndependentTranslucency: false,
|
||||
contextOptions: {
|
||||
webgl: {
|
||||
alpha: true
|
||||
}
|
||||
}
|
||||
})
|
||||
//设置相机飞到中国上空
|
||||
data.viewer.camera.flyTo({
|
||||
destination: Cesium.Cartesian3.fromDegrees(116.435314, 40.960521, 10000000.0),
|
||||
duration: 5
|
||||
})
|
||||
renderDistrict()
|
||||
renderData()
|
||||
// load3dtiles()
|
||||
}
|
||||
/**
|
||||
* wms,wmts,tms,wfs服务的加载方法
|
||||
*/
|
||||
const renderDistrict = () => {
|
||||
//加载wms服务
|
||||
const wmsLayer = new Cesium.WebMapServiceImageryProvider({
|
||||
url: 'https://geoserver.t-aaron.com:4080/geoserver/ows',
|
||||
layers: 'liuyang:town',
|
||||
parameters: {
|
||||
service: 'WMS',
|
||||
format: 'image/png',
|
||||
transparent: true//务必设置为true,否则不显示底图
|
||||
}
|
||||
})
|
||||
data.viewer.imageryLayers.addImageryProvider(wmsLayer)
|
||||
|
||||
//加载wmts服务
|
||||
//加载arcgis server发布的wmts服务
|
||||
const arcgisLayer = new Cesium.WebMapTileServiceImageryProvider({
|
||||
url: 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSHydroCached/MapServer/WMTS',
|
||||
layer: 'USGSHydroCached',
|
||||
style: 'default',
|
||||
format: 'image/png',
|
||||
tileMatrixSetID: 'default028mm',
|
||||
maximumLevel: 18,
|
||||
credit: 'U. S. Geological Survey'
|
||||
})
|
||||
data.viewer.imageryLayers.addImageryProvider(arcgisLayer)
|
||||
//加载 geoserver发布的wmts服务
|
||||
const wmtsurl = 'http://192.168.11.35:8999/geoserver/gwc/service/wmts/rest/sz_pg:yaotanghe1/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png';
|
||||
const wmtsLayer = new Cesium.WebMapTileServiceImageryProvider({
|
||||
url: wmtsurl,
|
||||
layer: 'sz_pg:yaotanghe1',
|
||||
style: '',
|
||||
format: "image/png",
|
||||
|
||||
tileMatrixSetID: "EPSG:4326",
|
||||
tilingScheme: new Cesium.GeographicTilingScheme(),
|
||||
// tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
|
||||
//tileMatrixSetID:"EPSG:900913",//不能设置为4326,否则cesium中不显示
|
||||
})
|
||||
data.viewer.imageryLayers.addImageryProvider(wmtsLayer)
|
||||
|
||||
//加载wfs服务
|
||||
axios.get('https://geoserver.t-aaron.com:4080/geoserver/lusong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=lusong%3Arivers&maxFeatures=50&outputFormat=application%2Fjson').then((res) => {
|
||||
var datasource = Cesium.GeoJsonDataSource.load(res.data)
|
||||
|
||||
data.viewer.dataSources.add(datasource)
|
||||
//改变所加载图层的样式
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
//加载tms服务
|
||||
const urlTemplateImageryProvider = new Cesium.UrlTemplateImageryProvider({
|
||||
url: "https://geoserver.t-aaron.com:4080/geoserver/gwc/service/tms/1.0.0/jiangning%3Avillage-lines@EPSG%3A4326@png",
|
||||
})
|
||||
data.viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider)
|
||||
|
||||
}
|
||||
/**
|
||||
* geojson,wkt,gml等数据的加载
|
||||
*/
|
||||
const renderData = () => {
|
||||
//加载本地geojson/geoserver发布的geojson,本地的文件要放在public目录下
|
||||
data.viewer.dataSources.add(
|
||||
Cesium.GeoJsonDataSource.load(
|
||||
//'https://geoserver.t-aaron.com:4080/geoserver/liuyang/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=liuyang%3Aclassification&maxFeatures=50&outputFormat=application%2Fjson',
|
||||
'/liuyang.json',
|
||||
{
|
||||
stroke: Cesium.Color.White,//边框颜色
|
||||
fill: Cesium.Color.RED.withAlpha(0.5),//填充颜色
|
||||
strokeWidth: 3//边框宽度
|
||||
}
|
||||
)
|
||||
)
|
||||
//加载wkt数据
|
||||
|
||||
}
|
||||
//加载3dtiles数据
|
||||
const load3dtiles = () => {
|
||||
//加载倾斜摄影b3dm格式
|
||||
const palaceTileset = new Cesium.Cesium3DTileset({
|
||||
url: 'https://gisdata.t-aaron.com/b3dm/lusongqu_b3dm/tileset.json',
|
||||
//控制切片视角显示的数量，可调节性能
|
||||
maximumScreenSpaceError: 2,
|
||||
maximumNumberOfLoadedTiles: 100000
|
||||
|
||||
})
|
||||
data.viewer.scene.primitives.add(palaceTileset)
|
||||
//控制模型的位置
|
||||
palaceTileset.readyPromise.then(function (palaceTileset) {
|
||||
data.viewer.scene.primitives.add(palaceTileset)
|
||||
var heightOffset = 0.0
|
||||
var boundingSphere = palaceTileset.boundingSphere//获取3DTiles的bounds范围
|
||||
var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center)//获取3DTiles的范围中心点的弧度
|
||||
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0)//模型本身的位置
|
||||
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset)//模型改变的位置
|
||||
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())//定义模型的改变状态
|
||||
palaceTileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)//修改模型的位置
|
||||
data.viewer.zoomTo(palaceTileset, new Cesium.HeadingPitchRange(0.5, -0.2, palaceTileset.boundingSphere.radius * 1.0))
|
||||
})
|
||||
//定位到三维模型
|
||||
data.viewer.zoomTo(palaceTileset)
|
||||
}
|
||||
/**
|
||||
* 鼠标移入展开地图栏
|
||||
*/
|
||||
const expandMapList = () => {
|
||||
console.log('222')
|
||||
data.cursor = { cursor: 'pointer' }
|
||||
data.expand = true
|
||||
if (data.currentChooseIndex !== data.mapChooseIndex) {
|
||||
data.mapList = data.mapList.reverse()
|
||||
data.currentChooseIndex = 0
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 鼠标移出收起地图栏
|
||||
*/
|
||||
const collapseMapList = () => {
|
||||
console.log('111')
|
||||
data.cursor = { cursor: '' }
|
||||
data.expand = true
|
||||
if (data.currentChooseIndex !== data.mapChooseIndex) {
|
||||
//切换底图
|
||||
data.mapList = data.mapList.reverse()
|
||||
data.currentChooseIndex = 0
|
||||
}
|
||||
}
|
||||
//切换底图
|
||||
const switchMap = (index) => {
|
||||
console.log(index, '索引')
|
||||
data.currentChooseIndex = index
|
||||
|
||||
// switch (data.mapList[index].name) {
|
||||
// case '电子图':
|
||||
// data.tdtImgMap.setVisible(false)
|
||||
// data.tdtLineMap.setVisible(true)
|
||||
// break
|
||||
// case '影像图':
|
||||
// data.tdtImgMap.setVisible(true)
|
||||
// data.tdtLineMap.setVisible(false)
|
||||
// }
|
||||
}
|
||||
// 放大地图
|
||||
const zoomIn = () => {
|
||||
data.viewer.camera.zoomIn()
|
||||
// let position=data.viewer.camera.position
|
||||
// let cameraHeight=data.viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;
|
||||
// //每次缩小20倍,参数可改
|
||||
// let moveRate=cameraHeight/20.0
|
||||
// data.viewer.camera.moveBackward(moveRate)
|
||||
}
|
||||
//缩小地图
|
||||
const zoomOut = () => {
|
||||
data.viewer.camera.zoomOut()
|
||||
// let position=data.viewer.camera.position;
|
||||
// let cameraHeight=data.viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height
|
||||
// //每次缩小20倍,参数可改
|
||||
// let moveRate=cameraHeight/20.0
|
||||
// data.viewer.camera.moveForward(moveRate)
|
||||
}
|
||||
//复位
|
||||
const reset = () => {
|
||||
data.viewer.camera.flyTo({
|
||||
destination: Cesium.Cartesian3.fromDegrees(116.435314, 40.960521, 10000000.0),
|
||||
duration: 5
|
||||
})
|
||||
}
|
||||
//测量空间直线距离
|
||||
//根据类型绘制对象
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
initMap()
|
||||
})
|
||||
return {
|
||||
toSystem,
|
||||
...toRefs(data),
|
||||
treeData: createData(),
|
||||
defaultExpandedKeys: ref(['40', '41']),
|
||||
collapseMapList,
|
||||
expandMapList,
|
||||
switchMap,
|
||||
zoomIn,
|
||||
zoomOut,
|
||||
reset,
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
components: { BaseMap }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tabbar {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 100px;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// 图层管理
|
||||
.layer-tree {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
//底图切换按钮
|
||||
.maptab {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 15px;
|
||||
|
||||
//底部切换按钮
|
||||
.maptabs_box {
|
||||
float: right;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
|
||||
.layer1,
|
||||
.layer2,
|
||||
.layer3 {
|
||||
width: 74px;
|
||||
height: 60px;
|
||||
border: 1px solid #fff;
|
||||
box-shadow: 0 2px 2px rgb(0 0 0 /25%);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.layer1 {
|
||||
right: 0;
|
||||
|
||||
z-index: 1005;
|
||||
}
|
||||
|
||||
.layer2 {
|
||||
right: 10px;
|
||||
|
||||
z-index: 1004;
|
||||
}
|
||||
|
||||
.layer3 {
|
||||
right: 84px;
|
||||
|
||||
z-index: 1004;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
background: #2770d4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//工具栏
|
||||
.tools {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 100px;
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
|
||||
.item {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid rgb(46, 46, 46);
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,133 +0,0 @@
|
|||
export default {
|
||||
tempEntities: [],
|
||||
pointNum: 0,
|
||||
floatingPoint: undefined,
|
||||
activeShape: undefined,
|
||||
viewer:null,
|
||||
/**
|
||||
* 根据类型绘制对象
|
||||
* @param {} type 绘制类型
|
||||
* @param {*} view cesium view
|
||||
*/
|
||||
draw(type, viewer) {
|
||||
this.viewer=viewer
|
||||
let position = []
|
||||
let tempPoints = []
|
||||
let activeShapePoints = []
|
||||
//创建场景的canvas元素
|
||||
let handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
|
||||
switch(type){
|
||||
//绘制线
|
||||
case 'Polyline':
|
||||
//监听鼠标移动
|
||||
handler.setInputAction(function(movement){
|
||||
if(Cesium.defined(this.floatingPoint)){
|
||||
let newPosition=this.viewer.scene.pickPosition(movement.endPosition)
|
||||
if(Cesium.defined(newPosition)){
|
||||
this.floatingPoint.position.setValue(newPosition)
|
||||
activeShapePoints.pop()
|
||||
activeShapePoints.push(newPosition)
|
||||
}
|
||||
}
|
||||
},Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||||
//左键单击开始画线
|
||||
handler.setInputAction(function(click){
|
||||
let earthPosition=viewer.scene.pickPosition(click.position)
|
||||
if(Cesium.defined(earthPosition)){
|
||||
this.floatingPoint=this.drawPoint(earthPosition)
|
||||
|
||||
}
|
||||
|
||||
//获取位置信息
|
||||
//从相机位置创建一条射线,这条射线通过世界中movement.position像素所在的坐标,返回Cartesian3坐标
|
||||
let ray=this.viewer.camera.getPickRay(click.position)
|
||||
//找到射线与渲染的地球表面之间的交点,射线必须以世界坐标给出,返回Cartesian3坐标
|
||||
position=this.viewer.scene.globe.pick(ray,this.viewer.scene)
|
||||
tempPoints.push(position)//记录点位
|
||||
this.pointNum+=1
|
||||
let tempLength=tempPoints.length//记录点数
|
||||
//调用绘制点的接口
|
||||
let point=this.drawPointLabel(tempPoints[tempPoints.length-1],JSON.stringify(this.pointNum))
|
||||
tempEntities.push(point)
|
||||
//存在超过一个点的时候
|
||||
if(tempLength>1){
|
||||
//绘制线
|
||||
let pointline=this.drawPolyline([temPoints[tempPoints.length-2],tempPoints[tempPoints.length-1]])
|
||||
tempEntities.push(pointline)//保存记录
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
//绘制点
|
||||
drawPoint(position){
|
||||
//本质上就是添加一个点的实体
|
||||
return this.viewer.entities.add({
|
||||
position:position,
|
||||
point:{
|
||||
color:Cesium.Color.WHEAT,
|
||||
pixelSize:5,
|
||||
outlineWidth:3,
|
||||
disableDepthTestDistance:Number.POSITIVE_INFINITY,
|
||||
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND//规定贴地
|
||||
}
|
||||
})
|
||||
},
|
||||
//绘制面几何对象
|
||||
drawPolygon(positions){
|
||||
if(positions.length<2) return
|
||||
return this.viewer.entities.add({
|
||||
name:'面几何对象',
|
||||
polygon:{
|
||||
hierarchy:positions,
|
||||
material:new Cesium.ColorMaterialProperty(
|
||||
Cesium.Color.WHEAT.withAlpha(0.4)
|
||||
)
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPointLabel(position,pointNum){
|
||||
//本质上就是添加一个点的实体
|
||||
return this.viewer.entities.add({
|
||||
name:'点几何对象',
|
||||
position:position,
|
||||
point:{
|
||||
color:Cesium.Color.WHEAT,
|
||||
pixelSize:5,
|
||||
outlineWidth:3,
|
||||
disableDepthTestDistance:Number.POSITIVE_INFINITY,
|
||||
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND//规定贴地
|
||||
},
|
||||
label:{
|
||||
text:pointNum,
|
||||
font:'30px sans-serif',
|
||||
fillColor:Cesium.Color.WHITE,
|
||||
outlineWidth:2,
|
||||
backgroundColor:Cesium.Color.BLACK,
|
||||
showBackground:true,
|
||||
style:Cesium.LabelStyle.FILL,
|
||||
verticalOrigin:Cesium.VerticalOrigin.BOTTOM,
|
||||
horizontalOrigin:Cesium.HorizontalOrigin.CENTER
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
drawPolyline(positions){
|
||||
if(positions.length<1) return
|
||||
return this.viewer.entities.add({
|
||||
name:'线几何对象',
|
||||
polyline:{
|
||||
position:positions,
|
||||
width:5.0,
|
||||
material:new Cesium.PolylineGlowMaterialProperty({
|
||||
color:Cesium.Color.WHITE
|
||||
}),
|
||||
depthFailMaterial:new Cesium.PolylineGlowMaterialProperty({
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue