home page
This commit is contained in:
parent
65ac2098ee
commit
b0c4d472d7
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))
|
||||
|
|
|
|||
|
|
@ -8,10 +8,7 @@
|
|||
<title>Vite App</title>
|
||||
|
||||
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.21/skins/default/aliplayer-min.css" />
|
||||
<link rel="stylesheet" href="src/assets/mapbox/mapbox-gl.css" />
|
||||
|
||||
|
||||
<script type="text/javascript" src="src/assets/mapbox/mapbox-gl.js"></script>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -518,7 +518,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"
|
||||
|
|
@ -581,8 +580,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",
|
||||
|
|
@ -1272,6 +1270,11 @@
|
|||
"integrity": "sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ==",
|
||||
"dev": true
|
||||
},
|
||||
"at-least-node": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
|
||||
"integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg=="
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.26.1",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
|
||||
|
|
@ -1430,6 +1433,11 @@
|
|||
"integrity": "sha512-e4BF2RlCVELKx8+RmklSEIVub1TWrmdhvA5kEUueummz1XyySW0DVk+3x9HyhU9MuWTa2BhqLgEuEmUwASAdCA==",
|
||||
"dev": true
|
||||
},
|
||||
"cesium": {
|
||||
"version": "1.92.0",
|
||||
"resolved": "https://registry.npmjs.org/cesium/-/cesium-1.92.0.tgz",
|
||||
"integrity": "sha512-qU2EIV3M+ru6uF5UQUjUWXeq9UVieMBeq+Q8fzzNbFgeSbLrvnJ7jSJq0vvgaVDPe0PnmN72FZKMDiJdTFpMnQ=="
|
||||
},
|
||||
"chalk": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.0.1.tgz",
|
||||
|
|
@ -1861,8 +1869,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",
|
||||
|
|
@ -2449,6 +2456,11 @@
|
|||
"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
|
||||
"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
|
||||
},
|
||||
"etag": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
|
||||
"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
|
||||
},
|
||||
"event-pubsub": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/event-pubsub/-/event-pubsub-4.3.0.tgz",
|
||||
|
|
@ -2713,6 +2725,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"fresh": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
|
||||
"integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="
|
||||
},
|
||||
"fs-extra": {
|
||||
"version": "10.1.0",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
|
||||
|
|
@ -3154,6 +3171,14 @@
|
|||
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
|
||||
"dev": true
|
||||
},
|
||||
"is-reference": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
|
||||
"integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
|
||||
"requires": {
|
||||
"@types/estree": "*"
|
||||
}
|
||||
},
|
||||
"is-stream": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
|
||||
|
|
@ -3387,7 +3412,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"
|
||||
|
|
@ -3549,6 +3573,11 @@
|
|||
"picomatch": "^2.3.1"
|
||||
}
|
||||
},
|
||||
"mime": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
|
||||
"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
|
||||
},
|
||||
"mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
|
|
@ -3940,8 +3969,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",
|
||||
|
|
@ -4004,8 +4032,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",
|
||||
|
|
@ -4158,6 +4185,11 @@
|
|||
"safe-buffer": "^5.1.0"
|
||||
}
|
||||
},
|
||||
"range-parser": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
|
||||
"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
|
||||
},
|
||||
"raw-body": {
|
||||
"version": "2.4.3",
|
||||
"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.3.tgz",
|
||||
|
|
@ -4297,6 +4329,17 @@
|
|||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"rollup-plugin-external-globals": {
|
||||
"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==",
|
||||
"requires": {
|
||||
"@rollup/pluginutils": "^4.0.0",
|
||||
"estree-walker": "^2.0.1",
|
||||
"is-reference": "^1.2.1",
|
||||
"magic-string": "^0.25.7"
|
||||
}
|
||||
},
|
||||
"run-parallel": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
|
||||
|
|
@ -4369,6 +4412,83 @@
|
|||
"lru-cache": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"send": {
|
||||
"version": "0.18.0",
|
||||
"resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
|
||||
"integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
|
||||
"requires": {
|
||||
"debug": "2.6.9",
|
||||
"depd": "2.0.0",
|
||||
"destroy": "1.2.0",
|
||||
"encodeurl": "~1.0.2",
|
||||
"escape-html": "~1.0.3",
|
||||
"etag": "~1.8.1",
|
||||
"fresh": "0.5.2",
|
||||
"http-errors": "2.0.0",
|
||||
"mime": "1.6.0",
|
||||
"ms": "2.1.3",
|
||||
"on-finished": "2.4.1",
|
||||
"range-parser": "~1.2.1",
|
||||
"statuses": "2.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
||||
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"depd": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
|
||||
"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
|
||||
},
|
||||
"destroy": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
|
||||
"integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
|
||||
},
|
||||
"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==",
|
||||
"requires": {
|
||||
"depd": "2.0.0",
|
||||
"inherits": "2.0.4",
|
||||
"setprototypeof": "1.2.0",
|
||||
"statuses": "2.0.1",
|
||||
"toidentifier": "1.0.1"
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
|
||||
},
|
||||
"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==",
|
||||
"requires": {
|
||||
"ee-first": "1.1.1"
|
||||
}
|
||||
},
|
||||
"statuses": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
|
||||
"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"serialize-javascript": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
|
||||
|
|
@ -4378,6 +4498,17 @@
|
|||
"randombytes": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"serve-static": {
|
||||
"version": "1.15.0",
|
||||
"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
|
||||
"integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
|
||||
"requires": {
|
||||
"encodeurl": "~1.0.2",
|
||||
"escape-html": "~1.0.3",
|
||||
"parseurl": "~1.3.3",
|
||||
"send": "0.18.0"
|
||||
}
|
||||
},
|
||||
"setprototypeof": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
|
||||
|
|
@ -4759,21 +4890,6 @@
|
|||
"thenify": ">= 3.1.0 < 4"
|
||||
}
|
||||
},
|
||||
"three": {
|
||||
"version": "0.146.0",
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.146.0.tgz",
|
||||
"integrity": "sha512-1lvNfLezN6OJ9NaFAhfX4sm5e9YCzHtaRgZ1+B4C+Hv6TibRMsuBAM5/wVKzxjpYIlMymvgsHEFrrigEfXnb2A=="
|
||||
},
|
||||
"threebox": {
|
||||
"version": "0.1.5",
|
||||
"resolved": "https://registry.npmjs.org/threebox/-/threebox-0.1.5.tgz",
|
||||
"integrity": "sha512-SAxLgJ6Qwqvzehic25DFkhJT7dPvWnwwHPgrAHoDZiIzlO5uG0CD1XPkv4kq6/lA94yK2Nf7BI8q5xCKdXBalw=="
|
||||
},
|
||||
"threebox-plugin": {
|
||||
"version": "2.2.7",
|
||||
"resolved": "https://registry.npmjs.org/threebox-plugin/-/threebox-plugin-2.2.7.tgz",
|
||||
"integrity": "sha512-H87Nm4w1PfisHPHzavTGXlwIoJpx2+QU57GooQYIhF51lsg+U5A0KGf3Jrv/HWsLCGOwV2BTnv7UTLfpO1EccQ=="
|
||||
},
|
||||
"through": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
|
||||
|
|
@ -4880,8 +4996,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",
|
||||
|
|
@ -5073,6 +5188,29 @@
|
|||
"rollup": "^2.59.0"
|
||||
}
|
||||
},
|
||||
"vite-plugin-cesium": {
|
||||
"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==",
|
||||
"requires": {
|
||||
"fs-extra": "^9.1.0",
|
||||
"rollup-plugin-external-globals": "^0.6.1",
|
||||
"serve-static": "^1.14.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"fs-extra": {
|
||||
"version": "9.1.0",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
|
||||
"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
|
||||
"requires": {
|
||||
"at-least-node": "^1.0.0",
|
||||
"graceful-fs": "^4.2.0",
|
||||
"jsonfile": "^6.0.1",
|
||||
"universalify": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"vite-plugin-html": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-html/-/vite-plugin-html-2.1.2.tgz",
|
||||
|
|
|
|||
|
|
@ -14,14 +14,13 @@
|
|||
"@vicons/ionicons5": "^0.10.0",
|
||||
"ali-oss": "^6.17.1",
|
||||
"axios": "^0.26.1",
|
||||
"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-router": "^4.0.14",
|
||||
"vuedraggable": "^4.1.0"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
-->
|
||||
<template>
|
||||
<div>
|
||||
<Dashboard/>
|
||||
<Dashboard />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -20,7 +20,7 @@ import messageContent from '@/components/Message/index.vue'
|
|||
import dialogContent from '@/components/Dialog/index.vue'
|
||||
import Dashboard from './views/dashboard/index.vue'
|
||||
export default {
|
||||
components:{
|
||||
components: {
|
||||
Dashboard
|
||||
}
|
||||
}
|
||||
|
|
@ -32,5 +32,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>
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue