Compare commits
22 Commits
e0b93a88c2
...
6a955b5921
| Author | SHA1 | Date |
|---|---|---|
 unknown
|
6a955b5921 | |
|
unknown
|
bcce2530aa | |
|
wangmengqi
|
65ac2098ee | |
|
unknown
|
012458b47c | |
|
unknown
|
4b69292063 | |
|
wangmengqi
|
d118c210f6 | |
|
unknown
|
a722837a11 | |
|
wangmengqi
|
3ac4d6698a | |
|
unknown
|
0ac683a25e | |
|
wangmengqi
|
b846f3cd40 | |
|
unknown
|
77aafac3e3 | |
|
wangmengqi
|
863b7866cb | |
|
unknown
|
3f23fbad32 | |
 lixin
|
889830aa1b | |
|
unknown
|
05c1116703 | |
|
unknown
|
4e2f51a0d2 | |
|
unknown
|
01e3800bea | |
|
lixin
|
7c49d9584e | |
|
unknown
|
7b0cf77b27 | |
|
unknown
|
449070ad2d | |
|
lixin
|
73607b7276 | |
|
unknown
|
26534c6360 |
|
|
@ -3,7 +3,8 @@ module.exports = {
|
||||||
env: {
|
env: {
|
||||||
browser: true,
|
browser: true,
|
||||||
node: true,
|
node: true,
|
||||||
es6: true
|
es6: true,
|
||||||
|
'vue/setup-compiler-macros': true
|
||||||
},
|
},
|
||||||
extends: [
|
extends: [
|
||||||
'plugin:vue/vue3-recommended',
|
'plugin:vue/vue3-recommended',
|
||||||
|
|
@ -285,7 +286,7 @@ module.exports = {
|
||||||
/* 要求或禁止语句块之前的空格 */
|
/* 要求或禁止语句块之前的空格 */
|
||||||
'space-before-blocks': [2, 'always'],
|
'space-before-blocks': [2, 'always'],
|
||||||
/* 要求或禁止函数圆括号之前有一个空格 */
|
/* 要求或禁止函数圆括号之前有一个空格 */
|
||||||
'space-before-function-paren': [2, 'never'],
|
// 'space-before-function-paren': [2, 'never'],
|
||||||
/* 禁止或强制圆括号内的空格 */
|
/* 禁止或强制圆括号内的空格 */
|
||||||
'space-in-parens': [2, 'never'],
|
'space-in-parens': [2, 'never'],
|
||||||
/* 要求中缀操作符周围有空格 */
|
/* 要求中缀操作符周围有空格 */
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
@ -5,9 +5,12 @@
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite App</title>
|
<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="https://g.alicdn.com/de/prismplayer/2.9.21/skins/default/aliplayer-min.css" />
|
||||||
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.21/aliplayer-h5-min.js"></script>
|
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.21/aliplayer-h5-min.js"></script>
|
||||||
|
<!-- Include the CesiumJS JavaScript and CSS files -->
|
||||||
|
<script src="https://cesium.com/downloads/cesiumjs/releases/1.101/Build/Cesium/Cesium.js"></script>
|
||||||
|
<link href="https://cesium.com/downloads/cesiumjs/releases/1.101/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,9 @@
|
||||||
{
|
{
|
||||||
"name": "vite_vue3",
|
"name": "vite_vue3",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
|
"globals": {
|
||||||
|
"Cesium": true
|
||||||
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite --mode localhost",
|
"dev": "vite --mode localhost",
|
||||||
"build:test": "vite build --mode test && esno ./build/script",
|
"build:test": "vite build --mode test && esno ./build/script",
|
||||||
|
|
@ -14,12 +17,17 @@
|
||||||
"@vicons/ionicons5": "^0.10.0",
|
"@vicons/ionicons5": "^0.10.0",
|
||||||
"ali-oss": "^6.17.1",
|
"ali-oss": "^6.17.1",
|
||||||
"axios": "^0.26.1",
|
"axios": "^0.26.1",
|
||||||
|
"cesium": "^1.102.0",
|
||||||
"dayjs": "^1.11.2",
|
"dayjs": "^1.11.2",
|
||||||
"mockjs": "^1.1.0",
|
"mockjs": "^1.1.0",
|
||||||
"pinia": "^2.0.13",
|
"pinia": "^2.0.13",
|
||||||
"pinia-plugin-persist": "^1.0.0",
|
"pinia-plugin-persist": "^1.0.0",
|
||||||
|
"three": "^0.146.0",
|
||||||
|
"threebox": "^0.1.5",
|
||||||
|
"threebox-plugin": "^2.2.7",
|
||||||
"tinymce": "^5.10.2",
|
"tinymce": "^5.10.2",
|
||||||
"vue": "^3.2.16",
|
"vue": "^3.2.16",
|
||||||
|
"vue-jstree": "^2.1.6",
|
||||||
"vue-router": "^4.0.14",
|
"vue-router": "^4.0.14",
|
||||||
"vuedraggable": "^4.1.0"
|
"vuedraggable": "^4.1.0"
|
||||||
},
|
},
|
||||||
|
|
@ -42,6 +50,7 @@
|
||||||
"unocss": "^0.16.4",
|
"unocss": "^0.16.4",
|
||||||
"unplugin-vue-components": "^0.18.5",
|
"unplugin-vue-components": "^0.18.5",
|
||||||
"vite": "^2.6.4",
|
"vite": "^2.6.4",
|
||||||
|
"vite-plugin-cesium": "^1.2.22",
|
||||||
"vite-plugin-html": "^2.1.2",
|
"vite-plugin-html": "^2.1.2",
|
||||||
"vite-plugin-mock": "^2.9.6",
|
"vite-plugin-mock": "^2.9.6",
|
||||||
"vite-plugin-vue-setup-extend": "^0.4.0"
|
"vite-plugin-vue-setup-extend": "^0.4.0"
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
29
src/App.vue
29
src/App.vue
|
|
@ -7,29 +7,16 @@
|
||||||
* @FilePath: \gis\src\App.vue
|
* @FilePath: \gis\src\App.vue
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<n-config-provider :locale="zhCN" :date-locale="dateZhCN" inline-theme-disabled :theme-overrides="themeOverrides">
|
<dash-board/>
|
||||||
<n-loading-bar-provider>
|
|
||||||
<loading-bar />
|
|
||||||
<n-dialog-provider>
|
|
||||||
<dialog-content />
|
|
||||||
<n-message-provider>
|
|
||||||
<message-content />
|
|
||||||
</n-message-provider>
|
|
||||||
<router-view v-slot="{ Component }">
|
|
||||||
<component :is="Component" />
|
|
||||||
</router-view>
|
|
||||||
</n-dialog-provider>
|
|
||||||
</n-loading-bar-provider>
|
|
||||||
</n-config-provider>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script>
|
||||||
import { zhCN, dateZhCN } from 'naive-ui'
|
import dashBoard from './views/dashboard/index.vue'
|
||||||
import themeOverrides from '@/utils/ui/theme.js'
|
export default {
|
||||||
import loadingBar from '@/components/LoadingBar/index.vue'
|
components:{
|
||||||
import messageContent from '@/components/Message/index.vue'
|
dashBoard
|
||||||
import dialogContent from '@/components/Dialog/index.vue'
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,161 @@
|
||||||
|
export default {
|
||||||
|
x_pi: Math.PI * 3000.0 / 180.0,
|
||||||
|
a: 6378245.0,
|
||||||
|
ee: 0.00669342162296594323,
|
||||||
|
/**
|
||||||
|
* 百度坐标系(BD-09)与火星坐标系(GCJ-02)的转换
|
||||||
|
* 即百度转谷歌,高德
|
||||||
|
* @param bd_lon
|
||||||
|
* @param bd_lat
|
||||||
|
* @returns {*[]}
|
||||||
|
*/
|
||||||
|
bd09togcj02 (bd_lon, bd_lat) {
|
||||||
|
const x = bd_lon - 0.0065
|
||||||
|
const y = bd_lat - 0.006
|
||||||
|
const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi)
|
||||||
|
const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi)
|
||||||
|
const gg_lng = z * Math.cos(theta)
|
||||||
|
const gg_lat = z * Math.sin(theta)
|
||||||
|
return [gg_lng, gg_lat]
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 火星坐标系(GCJ-02)与百度坐标系(BD-09)的转换
|
||||||
|
* 即谷歌,高德转百度
|
||||||
|
* @param lng
|
||||||
|
* @param lat
|
||||||
|
* @returns {*[]}
|
||||||
|
*/
|
||||||
|
gcj02tobd09 (lng, lat) {
|
||||||
|
const z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * this.x_pi)
|
||||||
|
const theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * this.x_pi)
|
||||||
|
const bd_lng = z * Math.cos(theta) + 0.0065
|
||||||
|
const bd_lat = z * Math.sin(theta) + 0.006
|
||||||
|
return [bd_lng, bd_lat]
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* WGS84转GCj02
|
||||||
|
* @param lng
|
||||||
|
* @param lat
|
||||||
|
* @returns {*[]}
|
||||||
|
*/
|
||||||
|
wgs84togcj02 (lng, lat) {
|
||||||
|
if (this.out_of_china(lng, lat)) {
|
||||||
|
return [lng, lat]
|
||||||
|
} else {
|
||||||
|
let dlat = this.transformlat(lng - 105.0, lat - 35.0)
|
||||||
|
let dlng = this.transformlng(lng - 105.0, lat - 35.0)
|
||||||
|
const radlat = lat / 180.0 * Math.PI
|
||||||
|
let magic = Math.sin(radlat)
|
||||||
|
magic = 1 - this.ee * magic * magic
|
||||||
|
const sqrtmagic = Math.sqrt(magic)
|
||||||
|
dlat = (dlat * 180.0) / ((this.a * (1 - this.ee)) / (magic * sqrtmagic) * Math.PI)
|
||||||
|
dlng = (dlng * 180.0) / (this.a / sqrtmagic * Math.cos(radlat) * Math.PI)
|
||||||
|
const mglat = lat + dlat
|
||||||
|
const mglng = lng + dlng
|
||||||
|
return [mglng, mglat]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* GCJ02转换为WGS84
|
||||||
|
* @param lng
|
||||||
|
* @param lat
|
||||||
|
* @returns {*[]}
|
||||||
|
*/
|
||||||
|
gcj02towgs84 (lng, lat) {
|
||||||
|
if (this.out_of_china(lng, lat)) {
|
||||||
|
return [lng, lat]
|
||||||
|
} else {
|
||||||
|
let dlat = this.transformlat(lng - 105.0, lat - 35.0)
|
||||||
|
let dlng = this.transformlng(lng - 105.0, lat - 35.0)
|
||||||
|
const radlat = lat / 180.0 * Math.PI
|
||||||
|
let magic = Math.sin(radlat)
|
||||||
|
magic = 1 - this.ee * magic * magic
|
||||||
|
const sqrtmagic = Math.sqrt(magic)
|
||||||
|
dlat = (dlat * 180.0) / ((this.a * (1 - this.ee)) / (magic * sqrtmagic) * Math.PI)
|
||||||
|
dlng = (dlng * 180.0) / (this.a / sqrtmagic * Math.cos(radlat) * Math.PI)
|
||||||
|
const mglat = lat + dlat
|
||||||
|
const mglng = lng + dlng
|
||||||
|
return [lng * 2 - mglng, lat * 2 - mglat]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 百度坐标系转wgs84坐标系
|
||||||
|
* @param {*} lng
|
||||||
|
* @param {*} lat
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
bd09towgs84 (lng, lat) {
|
||||||
|
// 百度坐标系先转为火星坐标系
|
||||||
|
const gcj02 = this.bd09togcj02(lng, lat)
|
||||||
|
// 火星坐标系转wgs84坐标系
|
||||||
|
const result = this.gcj02towgs84(gcj02[0], gcj02[1])
|
||||||
|
return result
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* wgs84坐标系转百度坐标系
|
||||||
|
* @param {*} lng
|
||||||
|
* @param {*} lat
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
wgs84tobd09 (lng, lat) {
|
||||||
|
// wgs84先转为火星坐标系
|
||||||
|
const gcj02 = this.wgs84togcj02(lng, lat)
|
||||||
|
// 火星坐标系转百度坐标系
|
||||||
|
const result = this.gcj02tobd09(gcj02[0], gcj02[1])
|
||||||
|
return result
|
||||||
|
},
|
||||||
|
transformlat (lng, lat) {
|
||||||
|
let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
|
||||||
|
ret += (20.0 * Math.sin(6.0 * lng * Math.PI) + 20.0 * Math.sin(2.0 * lng * Math.PI)) * 2.0 / 3.0
|
||||||
|
ret += (20.0 * Math.sin(lat * Math.PI) + 40.0 * Math.sin(lat / 3.0 * Math.PI)) * 2.0 / 3.0
|
||||||
|
ret += (160.0 * Math.sin(lat / 12.0 * Math.PI) + 320 * Math.sin(lat * Math.PI / 30.0)) * 2.0 / 3.0
|
||||||
|
return ret
|
||||||
|
},
|
||||||
|
transformlng (lng, lat) {
|
||||||
|
let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
|
||||||
|
ret += (20.0 * Math.sin(6.0 * lng * Math.PI) + 20.0 * Math.sin(2.0 * lng * Math.PI)) * 2.0 / 3.0
|
||||||
|
ret += (20.0 * Math.sin(lng * Math.PI) + 40.0 * Math.sin(lng / 3.0 * Math.PI)) * 2.0 / 3.0
|
||||||
|
ret += (150.0 * Math.sin(lng / 12.0 * Math.PI) + 300.0 * Math.sin(lng / 30.0 * Math.PI)) * 2.0 / 3.0
|
||||||
|
return ret
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 判断是否在国内,不在国内则不做偏移
|
||||||
|
* @param lng
|
||||||
|
* @param lat
|
||||||
|
* @returns {boolean}
|
||||||
|
*/
|
||||||
|
out_of_china (lng, lat) {
|
||||||
|
return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false)
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 经纬度转墨卡托
|
||||||
|
* @param poi 经纬度
|
||||||
|
* @returns {{}}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
LngLatToMercator (lng, lat) {
|
||||||
|
const mercator = {}
|
||||||
|
const earthRad = 6378137.0
|
||||||
|
mercator.x = lng * Math.PI / 180 * earthRad
|
||||||
|
const a = lat * Math.PI / 180
|
||||||
|
mercator.y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)))
|
||||||
|
|
||||||
|
return [mercator.x, mercator.y]
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 墨卡托转经纬度
|
||||||
|
* @param poi 墨卡托
|
||||||
|
* @returns {{}}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
MercatorToLngLat (x, y) {
|
||||||
|
const lnglat = {}
|
||||||
|
lnglat.lng = x / 20037508.34 * 180
|
||||||
|
const mmy = y / 20037508.34 * 180
|
||||||
|
lnglat.lat = 180 / Math.PI * (2 * Math.atan(Math.exp(mmy * Math.PI / 180)) - Math.PI / 2)
|
||||||
|
// console.log(lnglat, '经纬度')
|
||||||
|
return [lnglat.lng, lnglat.lat]
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,140 @@
|
||||||
|
import axios from 'axios'
|
||||||
|
import { removeLayer } from './service'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
sourceId: '',
|
||||||
|
layerId: '',
|
||||||
|
clusterCountId: '',
|
||||||
|
unclusteredId: '',
|
||||||
|
/**
|
||||||
|
* 加载聚合图层
|
||||||
|
* @param map
|
||||||
|
* @param url String 传递的后端服务地址
|
||||||
|
* @param sourceOption Object 只需传clusterMaxZoom和clusterRadius
|
||||||
|
* @param layerOption Object 只需传filter和paint
|
||||||
|
* @param clusterLayerOption Object 只需传filter layout paint
|
||||||
|
* @param unclusterLayerOption Object 只需传filter paint
|
||||||
|
*/
|
||||||
|
loadAggregationGraph (map, geodata, sourceOption, layerOption, clusterLayerOption, unclusterLayerOption) {
|
||||||
|
// axios.get(url).then((res) => {
|
||||||
|
// if (res) {
|
||||||
|
|
||||||
|
const data = geodata
|
||||||
|
const sourceId = 'sourceis_1'
|
||||||
|
const layerId = 'layerId_1'
|
||||||
|
// const sourceId = res.data.crs.properties.name
|
||||||
|
// this.sourceId = sourceId
|
||||||
|
// const layerId = sourceId + 'layer'
|
||||||
|
// this.layerId = layerId
|
||||||
|
// const clusterCountId = sourceId + 'clusterCount'
|
||||||
|
// this.clusterCountId = clusterCountId
|
||||||
|
// const unclusteredId = sourceId + 'unclustered'
|
||||||
|
// this.unclusteredId = unclusteredId
|
||||||
|
map.addSource(sourceId, {
|
||||||
|
type: 'geojson',
|
||||||
|
data: data,
|
||||||
|
cluster: true,
|
||||||
|
clusterMaxZoom: sourceOption.clusterMaxZoom ? sourceOption.clusterMaxZoom : 14, // 最大缩放到群集点
|
||||||
|
clusterRadius: sourceOption.clusterRadius ? sourceOption.clusterRadius : 50// 每一组点的半径
|
||||||
|
})
|
||||||
|
// 外围有数字的图层,加晕染
|
||||||
|
map.addLayer({
|
||||||
|
id: layerId,
|
||||||
|
type: 'circle',
|
||||||
|
source: sourceId,
|
||||||
|
// filter: ['has', 'poi_id'],
|
||||||
|
filter: layerOption.filter,
|
||||||
|
paint: layerOption.paint ? layerOption.paint : {
|
||||||
|
// 蓝色,当点数小于100时为20px圆
|
||||||
|
// 点计数在100到750之间时为黄色,21px圆
|
||||||
|
// 点计数大于或等于750时为22像素的粉红色圆圈
|
||||||
|
'circle-color': [
|
||||||
|
'step',
|
||||||
|
['get', 'poi_id'],
|
||||||
|
'rgba(81,187,214,0.8)',
|
||||||
|
100,
|
||||||
|
'rgba(241,240,117,0.8)',
|
||||||
|
750,
|
||||||
|
'rgba(242,140,177,0.8)'
|
||||||
|
],
|
||||||
|
'circle-radius': [
|
||||||
|
'step',
|
||||||
|
['get', 'poi_id'],
|
||||||
|
20, // 蓝色,当点数小于100时为20px圆
|
||||||
|
100, // 对应上面circle-color数字,意思为100以内
|
||||||
|
21, // 点计数在100到750之间为黄色,意思为750以内
|
||||||
|
750, // 对应上面circle-color数字,意思为750以内
|
||||||
|
22// 点计数大于或等于750时为22像素的粉红色圆圈
|
||||||
|
],
|
||||||
|
// 这个是外边框的颜色 circle-stroke-color这个对应了上面circle-color
|
||||||
|
'circle-stroke-color': [
|
||||||
|
'step',
|
||||||
|
['get', 'poi_id'],
|
||||||
|
'rgba(81,187,214,0.2)',
|
||||||
|
100,
|
||||||
|
'rgba(241,240,117,0.2)',
|
||||||
|
750,
|
||||||
|
'rgba(242,140,177,0.2)'
|
||||||
|
],
|
||||||
|
// 这个是外边框渲染的范围
|
||||||
|
'circle-stroke-width': [
|
||||||
|
'step',
|
||||||
|
['get', 'poi_id'],
|
||||||
|
5, // 蓝色晕染长度,当点数小于100时为5px晕染
|
||||||
|
100, // 对应上面circle-color数字,意思为100以内
|
||||||
|
6, // 点计数在100到750之间时为黄色,6px晕染
|
||||||
|
750, // 对应上面circle-color数字,意思为750以内
|
||||||
|
7// 点计数大于或等于750时为7px像素的粉红色晕染
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 聚合图圆圈中的数字
|
||||||
|
map.addLayer({
|
||||||
|
id: 'clusterCountId',
|
||||||
|
type: 'symbol',
|
||||||
|
source: sourceId,
|
||||||
|
// filter: ['has', 'poi_id'],
|
||||||
|
filter: clusterLayerOption.filter,
|
||||||
|
layout: clusterLayerOption.layout,
|
||||||
|
// layout:{
|
||||||
|
// 'text-field': '{poi_id}', // 文本内容来源字段
|
||||||
|
// 'text-font': ['Microsoft YaHei'],
|
||||||
|
// 'text-size': 12
|
||||||
|
// }
|
||||||
|
paint: clusterLayerOption.paint ? clusterLayerOption.paint : {
|
||||||
|
'text-color': 'hsl(0, 0%, 100%)',
|
||||||
|
'text-halo-color': '#54c081',
|
||||||
|
'text-halo-width': 100
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 聚合图中没有数字的显示小圆点
|
||||||
|
map.addLayer({
|
||||||
|
id: 'unclusteredId',
|
||||||
|
type: 'circle',
|
||||||
|
source: sourceId,
|
||||||
|
// filter: ['!', ['has', 'poi_id']],
|
||||||
|
filter: unclusterLayerOption.filter,
|
||||||
|
paint: unclusterLayerOption.paint ? unclusterLayerOption.paint : {
|
||||||
|
'circle-color': '#11b4da',
|
||||||
|
'circle-radius': 4,
|
||||||
|
'circle-stroke-width': 1,
|
||||||
|
'circle-stroke-color': '#fff'
|
||||||
|
}
|
||||||
|
// paint: {
|
||||||
|
// 'circle-color': '#11b4da',
|
||||||
|
// 'circle-radius': 4,
|
||||||
|
// 'circle-stroke-width': 1,
|
||||||
|
// 'circle-stroke-color': '#fff'
|
||||||
|
// }
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 移除聚合图层
|
||||||
|
*/
|
||||||
|
removeLayer (map) {
|
||||||
|
map.removeLayer(this.layerId)
|
||||||
|
map.removeLayer(this.clusterCountId)
|
||||||
|
map.removeLayer(this.unclusteredId)
|
||||||
|
map.removeSource(this.sourceId)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,182 @@
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description:加载WMS服务
|
||||||
|
* @param map
|
||||||
|
* @param url String
|
||||||
|
* @param option Object
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
export function loadWMS (map, url, option) {
|
||||||
|
if (url) {
|
||||||
|
const id = url.split('layer=')[1]
|
||||||
|
const source = map.getSource(option.source)
|
||||||
|
const layer = map.getLayer(option.id)
|
||||||
|
if (source === undefined && layer === undefined) {
|
||||||
|
map.addSource(option.source, {
|
||||||
|
|
||||||
|
type: 'raster',
|
||||||
|
tiles: [url],
|
||||||
|
tileSize: 512
|
||||||
|
})
|
||||||
|
map.addLayer({
|
||||||
|
id: id,
|
||||||
|
type: option.type,
|
||||||
|
source: option.source,
|
||||||
|
paint: option.paint
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
alert('该图层已存在!请勿重复添加。')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
alert('请输入WMS服务地址!')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description:根据id删除指定图层
|
||||||
|
* @param map
|
||||||
|
* @param url
|
||||||
|
*/
|
||||||
|
export function removeLayer (map, url, option) {
|
||||||
|
const id = url.split('layer=')[1]
|
||||||
|
|
||||||
|
map.removeLayer(id)
|
||||||
|
map.removeSource(option.source)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description:移除WFS服务图层
|
||||||
|
* @param {*} map
|
||||||
|
* @param {*} url
|
||||||
|
* @param {*} option
|
||||||
|
*/
|
||||||
|
export function removeWFSLayer (map, option) {
|
||||||
|
map.removeLayer(option.id)
|
||||||
|
map.removeSource(option.id)
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @description:加载WFS服务
|
||||||
|
* @param url String
|
||||||
|
* @param option Object
|
||||||
|
*/
|
||||||
|
export function loadWFSLayer (map, url, option) {
|
||||||
|
const source = map.getSource(option.id)
|
||||||
|
const layer = map.getLayer(option.id)
|
||||||
|
if (source === undefined && layer === undefined) {
|
||||||
|
if (url) {
|
||||||
|
axios.get(url).then((res) => {
|
||||||
|
const features = res.data.features
|
||||||
|
// console.log(features, "元素层");
|
||||||
|
// let layerType = null;
|
||||||
|
// let geometryType = features[0].geometry.type;
|
||||||
|
const addLayerOption = {
|
||||||
|
id: option.id,
|
||||||
|
type: option.type,
|
||||||
|
source: {
|
||||||
|
type: 'geojson',
|
||||||
|
data: {
|
||||||
|
type: 'FeatureCollection',
|
||||||
|
features: features
|
||||||
|
}
|
||||||
|
},
|
||||||
|
layout: {
|
||||||
|
visibility: 'visible'
|
||||||
|
},
|
||||||
|
paint: option.paint
|
||||||
|
}
|
||||||
|
// 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)",
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
|
||||||
|
map.addLayer(addLayerOption)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
alert('请输入WFS地址!')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
alert('该图层已存在!请勿重复添加')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description:加载WMTS服务
|
||||||
|
* @param map
|
||||||
|
* @param url String
|
||||||
|
* @param option Object
|
||||||
|
*/
|
||||||
|
export function loadWMTS (map, url, option) {
|
||||||
|
const source = map.getSource(option.source)
|
||||||
|
const layer = map.getLayer(option.id)
|
||||||
|
if (source === undefined && layer === undefined) {
|
||||||
|
if (url) {
|
||||||
|
const id = url.split('layer=')[1]
|
||||||
|
map.addSource(option.source, {
|
||||||
|
type: 'raster',
|
||||||
|
tiles: [url],
|
||||||
|
|
||||||
|
tileSize: 256
|
||||||
|
})
|
||||||
|
map.addLayer({
|
||||||
|
id: id,
|
||||||
|
type: option.type,
|
||||||
|
source: option.source,
|
||||||
|
paint: option.paint
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
alert('请输入WMTS服务地址!')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
alert('该图层已存在!请勿重复添加。')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description:加载TMS服务
|
||||||
|
* @param map
|
||||||
|
* @param url String
|
||||||
|
* @param option Object
|
||||||
|
*/
|
||||||
|
export function loadTMSLayer (map, url, option) {
|
||||||
|
const source = map.getSource(option.source)
|
||||||
|
const layer = map.getLayer(option.id)
|
||||||
|
if (source === undefined && layer === undefined) {
|
||||||
|
if (url) {
|
||||||
|
const id = url.split('layer=')[1]
|
||||||
|
map.addSource(option.source, {
|
||||||
|
type: 'raster',
|
||||||
|
tiles: [url],
|
||||||
|
scheme: 'tms',
|
||||||
|
tileSize: 256
|
||||||
|
})
|
||||||
|
map.addLayer({
|
||||||
|
id: id,
|
||||||
|
type: option.type,
|
||||||
|
source: option.source,
|
||||||
|
paint: option.paint
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
alert('请输入TMS服务地址!')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
alert('该图层已存在!请勿重复添加')
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
|
|
@ -0,0 +1,946 @@
|
||||||
|
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;
|
||||||
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
|
|
@ -0,0 +1,755 @@
|
||||||
|
.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
|
|
@ -0,0 +1,168 @@
|
||||||
|
<template>
|
||||||
|
<div class="searchOption">
|
||||||
|
<div>
|
||||||
|
<input id="keyword"
|
||||||
|
v-model="searchStyle"
|
||||||
|
type="radio"
|
||||||
|
value="keyword">
|
||||||
|
<label for="keyword">按关键字搜索</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input id="lnglat"
|
||||||
|
v-model="searchStyle"
|
||||||
|
type="radio"
|
||||||
|
value="lnglat">
|
||||||
|
<label for="lnglat">按经纬度搜索</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<img src="@/assets/img/location.png">
|
||||||
|
<input v-model="searchContent"
|
||||||
|
type="text"
|
||||||
|
placeholder="请输入搜索位置/坐标"
|
||||||
|
@input="searchPlace()">
|
||||||
|
<img src="@/assets/img/search.png"
|
||||||
|
@click="showList()">
|
||||||
|
</div>
|
||||||
|
<div ref="locationList"
|
||||||
|
class="my-click-transition">
|
||||||
|
<li v-for="(item,index) in localList"
|
||||||
|
:key="index"
|
||||||
|
class="itemLocation"
|
||||||
|
@click="flyTo(item.geometry,item.id)"><img src="@/assets/img/location.png">
|
||||||
|
<span class="locationName">{{ item.name }}</span>
|
||||||
|
<span class="locationAddress">{{ item.address }}</span>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from 'axios'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
searchType: '',
|
||||||
|
searchStyle: 'keyword',
|
||||||
|
searchContent: '',
|
||||||
|
localList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showList () {
|
||||||
|
// if (this.$refs.locationList.className == 'my-click-transition') {
|
||||||
|
// this.$refs.locationList.className = 'locationList'
|
||||||
|
// } else {
|
||||||
|
// this.$refs.locationList.className = 'my-click-transition'
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
// 实时查询
|
||||||
|
searchPlace () {
|
||||||
|
let url
|
||||||
|
if (this.searchStyle == 'keyword') {
|
||||||
|
console.log('111')
|
||||||
|
url = 'http://192.168.11.35:8500/thmap/poi/searchFeat/keywords?keywords=' + this.searchContent
|
||||||
|
} else {
|
||||||
|
console.log('222')
|
||||||
|
const arr = this.searchContent.split(',')
|
||||||
|
url = 'http://192.168.11.35:8500/thmap/poi/searchFeat/keywords?lat=' + arr[0] + '&lng=' + arr[1] + '&distance=' + 50
|
||||||
|
}
|
||||||
|
|
||||||
|
axios.get(url).then((res) => {
|
||||||
|
// console.log(res.data.data.datas, '数据集')
|
||||||
|
if (res.data.data.datas) {
|
||||||
|
// console.log('有数据了')
|
||||||
|
this.$refs.locationList.className = 'locationList'
|
||||||
|
this.localList = res.data.data.datas
|
||||||
|
} else {
|
||||||
|
this.$refs.locationList.className = 'my-click-transition'
|
||||||
|
}
|
||||||
|
}).catch((err) => {
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
flyTo (lonLatInfo, id) {
|
||||||
|
const Arr = lonLatInfo.split(' ')
|
||||||
|
|
||||||
|
// const Num1 = parseFloat(Arr[1])
|
||||||
|
const Num1 = Number(Arr[1].match(/\d+(\.\d+)?/g)[0])
|
||||||
|
const Num2 = Number(Arr[2].match(/\d+(\.\d+)?/g)[0])
|
||||||
|
const Arr1 = [Num1, Num2]
|
||||||
|
// console.log(this.$parent, '父组件')
|
||||||
|
this.$parent.flyTo(Arr1, id)
|
||||||
|
// // console.log(Arr1, '点位信息')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.searchOption {
|
||||||
|
width: 300px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 15px;
|
||||||
|
line-height: 50px;
|
||||||
|
input {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 300px;
|
||||||
|
height: 45px;
|
||||||
|
padding: 10px 10px;
|
||||||
|
background-color: rgba(245, 245, 245, 0.8);
|
||||||
|
box-shadow: 0px 15px 10px -15px #565656;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
input {
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 位置列表
|
||||||
|
.locationList {
|
||||||
|
margin-top: 5px;
|
||||||
|
width: 300px;
|
||||||
|
// height: 100px;
|
||||||
|
background-color: rgba(245, 245, 245, 0.8);
|
||||||
|
transition: height 0.5s ease-in;
|
||||||
|
-webkit-transform: height 0.5s ease-in;
|
||||||
|
}
|
||||||
|
.my-click-transition {
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: 5px;
|
||||||
|
transition: height 0.5s ease-out;
|
||||||
|
-webkit-transform: height 0.5s ease-out;
|
||||||
|
height: 0;
|
||||||
|
width: 300px;
|
||||||
|
background-color: rgba(245, 245, 245, 0.8);
|
||||||
|
}
|
||||||
|
.itemLocation {
|
||||||
|
width: 300px;
|
||||||
|
height: 32px;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 32px;
|
||||||
|
font-size: 13px;
|
||||||
|
overflow: hidden;
|
||||||
|
line-height: 32px;
|
||||||
|
list-style: none;
|
||||||
|
cursor: pointer;
|
||||||
|
img {
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
position: absolute;
|
||||||
|
top: 3px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
.locationName {
|
||||||
|
color: #0082e5;
|
||||||
|
}
|
||||||
|
.locationAddress {
|
||||||
|
color: #565656;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,154 @@
|
||||||
|
<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>
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import '@/styles/index.scss'
|
import '@/styles/index.scss'
|
||||||
import 'uno.css'
|
import 'uno.css'
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import { setupRouter } from '@/router'
|
import { setupRouter } from '@/router'
|
||||||
|
|
@ -7,6 +8,7 @@ import { setupStore } from '@/store'
|
||||||
|
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
|
|
||||||
|
|
||||||
function setupApp() {
|
function setupApp() {
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
|
|
@ -14,6 +16,7 @@ function setupApp() {
|
||||||
setupRouter(app)
|
setupRouter(app)
|
||||||
|
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setupApp()
|
setupApp()
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,25 +1,476 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div id='cesiumContainer'>
|
||||||
首页
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 底图切换按钮 -->
|
||||||
|
<div class="maptab">
|
||||||
|
<div class="maptabs_box" :style="cursor" @mouseover="expandMapList" @mouseleave="collapseMapList">
|
||||||
|
<div class="layer1" :style="{ backgroundImage: 'url(' + mapList[0].bg + ')' }" @click="switchMap(0)">
|
||||||
|
<div class="title">{{ mapList[0].name }}</div>
|
||||||
|
</div>
|
||||||
|
<div :class="[expand ? 'layer3' : 'layer2']" :style="{ backgroundImage: 'url(' + mapList[1].bg + ')' }" @click="switchMap(1)">
|
||||||
|
<div class="title">{{ mapList[1].name }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 工具栏 -->
|
||||||
|
<div class="tools">
|
||||||
|
<div class="item" @click="zoomIn">
|
||||||
|
<img src="@/assets/img/zoomIn.png" />
|
||||||
|
</div>
|
||||||
|
<div class="item" @click="zoomOut">
|
||||||
|
<img src="@/assets/img/zoomout.png" />
|
||||||
|
</div>
|
||||||
|
<div class="item" @click="reset">
|
||||||
|
<img src="@/assets/img/located.png" />
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<img src="@/assets/img/measureLength.png" />
|
||||||
|
</div>
|
||||||
|
<div class="item" style="border:0px">
|
||||||
|
<img src="@/assets/img/measureArea.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="maptabs_box" :style="cursor" @mouseover="expandMapList" @mouseleave="collapseMapList">
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="layer1"
|
||||||
|
:style="{backgroundImage:'url('+mapList[0].bg+')'}"
|
||||||
|
@click="switchMap(0)"
|
||||||
|
>
|
||||||
|
<div class="title">{{mapList[0].name}}</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
:class="[expand?'layer3':'layer2']"
|
||||||
|
:style="{backgroundImage:'url('+mapList[1].bg+')'}"
|
||||||
|
@click="switchMap(1)"
|
||||||
|
>
|
||||||
|
<div class="title">{{ mapList[1].name }}</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- 图层管理 -->
|
||||||
|
<n-tree block-line :data="treeData" :default-expanded-keys="defaultExpandedKeys" checkable expand-on-click selectable
|
||||||
|
class="layer-tree"></n-tree>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
|
import { ref, reactive, onMounted, toRefs } from 'vue'
|
||||||
|
import axios from 'axios'
|
||||||
|
import { repeat } from 'seemly'
|
||||||
|
import sallitePng from '@/assets/img/satelliteMap.png'
|
||||||
|
import TDMapPng from '@/assets/img/TDMap.png'
|
||||||
|
import AdministrtivePng from '@/assets/img/Administrative.png'
|
||||||
|
|
||||||
|
function createData(level = 4, baseKey = "") {
|
||||||
|
if (!level)
|
||||||
|
return void 0;
|
||||||
|
return repeat(6 - level, void 0).map((_, index) => {
|
||||||
|
const key = "" + baseKey + level + index;
|
||||||
|
return {
|
||||||
|
label: createLabel(level),
|
||||||
|
key,
|
||||||
|
children: createData(level - 1, key)
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function createLabel(level) {
|
||||||
|
if (level === 4)
|
||||||
|
return "图层四";
|
||||||
|
if (level === 3)
|
||||||
|
return "图层三";
|
||||||
|
if (level === 2)
|
||||||
|
return "图层二";
|
||||||
|
if (level === 1)
|
||||||
|
return "图层一";
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'HomePage',
|
name: 'HomePage',
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
viewer: null,
|
||||||
|
mapList: [
|
||||||
|
{ name: '电子图', bg: TDMapPng },
|
||||||
|
{ name: '影像图', bg: sallitePng },
|
||||||
|
{ name: '行政区划图', bg: AdministrtivePng }
|
||||||
|
],
|
||||||
|
cursor: { cursor: '' },
|
||||||
|
expand: false,
|
||||||
|
mapChooseIndex: 0,
|
||||||
|
currentChooseIndex: 0,
|
||||||
|
//测距
|
||||||
|
tempEntities: [],
|
||||||
|
pointNum: 0,
|
||||||
|
floatingPoint: undefined,
|
||||||
|
activeShape: undefined
|
||||||
|
}
|
||||||
function toSystem() {
|
function toSystem() {
|
||||||
router.push({ path: '/login' })
|
router.push({ path: '/login' })
|
||||||
}
|
}
|
||||||
return {
|
|
||||||
toSystem
|
|
||||||
|
const initMap = () => {
|
||||||
|
//设置相机初始飞到中国上空
|
||||||
|
// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90)
|
||||||
|
data.viewer = new Cesium.Viewer('cesiumContainer', {
|
||||||
|
// 右上角 搜索
|
||||||
|
geocoder: false,
|
||||||
|
// 右上角 Home
|
||||||
|
homeButton: false,
|
||||||
|
// 右上角 2D/3D切换
|
||||||
|
sceneModePicker: false,
|
||||||
|
// 右上角 地形
|
||||||
|
baseLayerPicker: false,
|
||||||
|
// 右上角 Help
|
||||||
|
navigationHelpButton: false,
|
||||||
|
// 左下角 圆盘动画控件
|
||||||
|
animation: false,
|
||||||
|
// 时间轴
|
||||||
|
timeline: false,
|
||||||
|
// 右小角 全屏
|
||||||
|
fullscreenButton: false,
|
||||||
|
vrButton: false,
|
||||||
|
// 点击要素后提示信息
|
||||||
|
infoBox: false,
|
||||||
|
selectionIndicator: false,
|
||||||
|
// 每个几何实例将只能以3D渲染以节省GPU内存
|
||||||
|
scene3DOnly: false,
|
||||||
|
// 关闭地球光环
|
||||||
|
skyAtmosphere: false,
|
||||||
|
// 初始化底图
|
||||||
|
// imageryProvider: new Cesium.SingleTileImageryProvider({
|
||||||
|
// url: 'https://gisdata.t-aaron.com/GlobalBkLayer.jpg'
|
||||||
|
// }),
|
||||||
|
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
|
||||||
|
url: "http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=f634525a82da65f715d168d7ba1899c0",
|
||||||
|
layer: "tdtImgLayer",
|
||||||
|
style: "default",
|
||||||
|
format: "image/jpeg",
|
||||||
|
tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
|
||||||
|
show: true
|
||||||
|
}),
|
||||||
|
shouldAnimate: true,
|
||||||
|
orderIndependentTranslucency: false,
|
||||||
|
contextOptions: {
|
||||||
|
webgl: {
|
||||||
|
alpha: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
//设置相机飞到中国上空
|
||||||
|
data.viewer.camera.flyTo({
|
||||||
|
destination: Cesium.Cartesian3.fromDegrees(116.435314, 40.960521, 10000000.0),
|
||||||
|
duration: 5
|
||||||
|
})
|
||||||
|
renderDistrict()
|
||||||
|
renderData()
|
||||||
|
// load3dtiles()
|
||||||
}
|
}
|
||||||
}
|
/**
|
||||||
|
* wms,wmts,tms,wfs服务的加载方法
|
||||||
|
*/
|
||||||
|
const renderDistrict = () => {
|
||||||
|
//加载wms服务
|
||||||
|
const wmsLayer = new Cesium.WebMapServiceImageryProvider({
|
||||||
|
url: 'https://geoserver.t-aaron.com:4080/geoserver/ows',
|
||||||
|
layers: 'liuyang:town',
|
||||||
|
parameters: {
|
||||||
|
service: 'WMS',
|
||||||
|
format: 'image/png',
|
||||||
|
transparent: true//务必设置为true,否则不显示底图
|
||||||
|
}
|
||||||
|
})
|
||||||
|
data.viewer.imageryLayers.addImageryProvider(wmsLayer)
|
||||||
|
|
||||||
|
//加载wmts服务
|
||||||
|
//加载arcgis server发布的wmts服务
|
||||||
|
const arcgisLayer = new Cesium.WebMapTileServiceImageryProvider({
|
||||||
|
url: 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSHydroCached/MapServer/WMTS',
|
||||||
|
layer: 'USGSHydroCached',
|
||||||
|
style: 'default',
|
||||||
|
format: 'image/png',
|
||||||
|
tileMatrixSetID: 'default028mm',
|
||||||
|
maximumLevel: 18,
|
||||||
|
credit: 'U. S. Geological Survey'
|
||||||
|
})
|
||||||
|
data.viewer.imageryLayers.addImageryProvider(arcgisLayer)
|
||||||
|
//加载 geoserver发布的wmts服务
|
||||||
|
const wmtsurl = 'http://192.168.11.35:8999/geoserver/gwc/service/wmts/rest/sz_pg:yaotanghe1/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png';
|
||||||
|
const wmtsLayer = new Cesium.WebMapTileServiceImageryProvider({
|
||||||
|
url: wmtsurl,
|
||||||
|
layer: 'sz_pg:yaotanghe1',
|
||||||
|
style: '',
|
||||||
|
format: "image/png",
|
||||||
|
|
||||||
|
tileMatrixSetID: "EPSG:4326",
|
||||||
|
tilingScheme: new Cesium.GeographicTilingScheme(),
|
||||||
|
// tilingScheme: new Cesium.GeographicTilingScheme()
|
||||||
|
|
||||||
|
//tileMatrixSetID:"EPSG:900913",//不能设置为4326,否则cesium中不显示
|
||||||
|
})
|
||||||
|
data.viewer.imageryLayers.addImageryProvider(wmtsLayer)
|
||||||
|
|
||||||
|
//加载wfs服务
|
||||||
|
axios.get('https://geoserver.t-aaron.com:4080/geoserver/lusong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=lusong%3Arivers&maxFeatures=50&outputFormat=application%2Fjson').then((res) => {
|
||||||
|
var datasource = Cesium.GeoJsonDataSource.load(res.data)
|
||||||
|
|
||||||
|
data.viewer.dataSources.add(datasource)
|
||||||
|
//改变所加载图层的样式
|
||||||
|
}).catch((err) => {
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
//加载tms服务
|
||||||
|
const urlTemplateImageryProvider = new Cesium.UrlTemplateImageryProvider({
|
||||||
|
url: "https://geoserver.t-aaron.com:4080/geoserver/gwc/service/tms/1.0.0/jiangning%3Avillage-lines@EPSG%3A4326@png",
|
||||||
|
})
|
||||||
|
data.viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider)
|
||||||
|
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* geojson,wkt,gml等数据的加载
|
||||||
|
*/
|
||||||
|
const renderData = () => {
|
||||||
|
//加载本地geojson/geoserver发布的geojson,本地的文件要放在public目录下
|
||||||
|
data.viewer.dataSources.add(
|
||||||
|
Cesium.GeoJsonDataSource.load(
|
||||||
|
//'https://geoserver.t-aaron.com:4080/geoserver/liuyang/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=liuyang%3Aclassification&maxFeatures=50&outputFormat=application%2Fjson',
|
||||||
|
'/liuyang.json',
|
||||||
|
{
|
||||||
|
stroke: Cesium.Color.White,//边框颜色
|
||||||
|
fill: Cesium.Color.RED.withAlpha(0.5),//填充颜色
|
||||||
|
strokeWidth: 3//边框宽度
|
||||||
|
}
|
||||||
|
)
|
||||||
|
)
|
||||||
|
//加载wkt数据
|
||||||
|
|
||||||
|
}
|
||||||
|
//加载3dtiles数据
|
||||||
|
const load3dtiles = () => {
|
||||||
|
//加载倾斜摄影b3dm格式
|
||||||
|
const palaceTileset = new Cesium.Cesium3DTileset({
|
||||||
|
url: 'https://gisdata.t-aaron.com/b3dm/lusongqu_b3dm/tileset.json',
|
||||||
|
//控制切片视角显示的数量，可调节性能
|
||||||
|
maximumScreenSpaceError: 2,
|
||||||
|
maximumNumberOfLoadedTiles: 100000
|
||||||
|
|
||||||
|
})
|
||||||
|
data.viewer.scene.primitives.add(palaceTileset)
|
||||||
|
//控制模型的位置
|
||||||
|
palaceTileset.readyPromise.then(function (palaceTileset) {
|
||||||
|
data.viewer.scene.primitives.add(palaceTileset)
|
||||||
|
var heightOffset = 0.0
|
||||||
|
var boundingSphere = palaceTileset.boundingSphere//获取3DTiles的bounds范围
|
||||||
|
var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center)//获取3DTiles的范围中心点的弧度
|
||||||
|
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0)//模型本身的位置
|
||||||
|
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset)//模型改变的位置
|
||||||
|
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())//定义模型的改变状态
|
||||||
|
palaceTileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)//修改模型的位置
|
||||||
|
data.viewer.zoomTo(palaceTileset, new Cesium.HeadingPitchRange(0.5, -0.2, palaceTileset.boundingSphere.radius * 1.0))
|
||||||
|
})
|
||||||
|
//定位到三维模型
|
||||||
|
data.viewer.zoomTo(palaceTileset)
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 鼠标移入展开地图栏
|
||||||
|
*/
|
||||||
|
const expandMapList = () => {
|
||||||
|
console.log('222')
|
||||||
|
data.cursor = { cursor: 'pointer' }
|
||||||
|
data.expand = true
|
||||||
|
if (data.currentChooseIndex !== data.mapChooseIndex) {
|
||||||
|
data.mapList = data.mapList.reverse()
|
||||||
|
data.currentChooseIndex = 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 鼠标移出收起地图栏
|
||||||
|
*/
|
||||||
|
const collapseMapList = () => {
|
||||||
|
console.log('111')
|
||||||
|
data.cursor = { cursor: '' }
|
||||||
|
data.expand = true
|
||||||
|
if (data.currentChooseIndex !== data.mapChooseIndex) {
|
||||||
|
//切换底图
|
||||||
|
data.mapList = data.mapList.reverse()
|
||||||
|
data.currentChooseIndex = 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//切换底图
|
||||||
|
const switchMap = (index) => {
|
||||||
|
console.log(index, '索引')
|
||||||
|
data.currentChooseIndex = index
|
||||||
|
|
||||||
|
// switch (data.mapList[index].name) {
|
||||||
|
// case '电子图':
|
||||||
|
// data.tdtImgMap.setVisible(false)
|
||||||
|
// data.tdtLineMap.setVisible(true)
|
||||||
|
// break
|
||||||
|
// case '影像图':
|
||||||
|
// data.tdtImgMap.setVisible(true)
|
||||||
|
// data.tdtLineMap.setVisible(false)
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
// 放大地图
|
||||||
|
const zoomIn = () => {
|
||||||
|
data.viewer.camera.zoomIn()
|
||||||
|
// let position=data.viewer.camera.position
|
||||||
|
// let cameraHeight=data.viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;
|
||||||
|
// //每次缩小20倍,参数可改
|
||||||
|
// let moveRate=cameraHeight/20.0
|
||||||
|
// data.viewer.camera.moveBackward(moveRate)
|
||||||
|
}
|
||||||
|
//缩小地图
|
||||||
|
const zoomOut = () => {
|
||||||
|
data.viewer.camera.zoomOut()
|
||||||
|
// let position=data.viewer.camera.position;
|
||||||
|
// let cameraHeight=data.viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height
|
||||||
|
// //每次缩小20倍,参数可改
|
||||||
|
// let moveRate=cameraHeight/20.0
|
||||||
|
// data.viewer.camera.moveForward(moveRate)
|
||||||
|
}
|
||||||
|
//复位
|
||||||
|
const reset = () => {
|
||||||
|
data.viewer.camera.flyTo({
|
||||||
|
destination: Cesium.Cartesian3.fromDegrees(116.435314, 40.960521, 10000000.0),
|
||||||
|
duration: 5
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//测量空间直线距离
|
||||||
|
//根据类型绘制对象
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initMap()
|
||||||
|
})
|
||||||
|
return {
|
||||||
|
toSystem,
|
||||||
|
...toRefs(data),
|
||||||
|
treeData: createData(),
|
||||||
|
defaultExpandedKeys: ref(['40', '41']),
|
||||||
|
collapseMapList,
|
||||||
|
expandMapList,
|
||||||
|
switchMap,
|
||||||
|
zoomIn,
|
||||||
|
zoomOut,
|
||||||
|
reset,
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.tabbar {
|
||||||
|
position: absolute;
|
||||||
|
width: 80px;
|
||||||
|
height: 100px;
|
||||||
|
bottom: 15px;
|
||||||
|
right: 15px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图层管理
|
||||||
|
.layer-tree {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
//底图切换按钮
|
||||||
|
.maptab {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 15px;
|
||||||
|
|
||||||
|
//底部切换按钮
|
||||||
|
.maptabs_box {
|
||||||
|
float: right;
|
||||||
|
position: relative;
|
||||||
|
width: 150px;
|
||||||
|
height: 60px;
|
||||||
|
|
||||||
|
.layer1,
|
||||||
|
.layer2,
|
||||||
|
.layer3 {
|
||||||
|
width: 74px;
|
||||||
|
height: 60px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
box-shadow: 0 2px 2px rgb(0 0 0 /25%);
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer1 {
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
z-index: 1005;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer2 {
|
||||||
|
right: 10px;
|
||||||
|
|
||||||
|
z-index: 1004;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer3 {
|
||||||
|
right: 84px;
|
||||||
|
|
||||||
|
z-index: 1004;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 20px;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 20px;
|
||||||
|
background: #2770d4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//工具栏
|
||||||
|
.tools {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
bottom: 100px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
padding: 5px;
|
||||||
|
border-bottom: 1px solid rgb(46, 46, 46);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
|
|
@ -0,0 +1,133 @@
|
||||||
|
export default {
|
||||||
|
tempEntities: [],
|
||||||
|
pointNum: 0,
|
||||||
|
floatingPoint: undefined,
|
||||||
|
activeShape: undefined,
|
||||||
|
viewer:null,
|
||||||
|
/**
|
||||||
|
* 根据类型绘制对象
|
||||||
|
* @param {} type 绘制类型
|
||||||
|
* @param {*} view cesium view
|
||||||
|
*/
|
||||||
|
draw(type, viewer) {
|
||||||
|
this.viewer=viewer
|
||||||
|
let position = []
|
||||||
|
let tempPoints = []
|
||||||
|
let activeShapePoints = []
|
||||||
|
//创建场景的canvas元素
|
||||||
|
let handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
|
||||||
|
switch(type){
|
||||||
|
//绘制线
|
||||||
|
case 'Polyline':
|
||||||
|
//监听鼠标移动
|
||||||
|
handler.setInputAction(function(movement){
|
||||||
|
if(Cesium.defined(this.floatingPoint)){
|
||||||
|
let newPosition=this.viewer.scene.pickPosition(movement.endPosition)
|
||||||
|
if(Cesium.defined(newPosition)){
|
||||||
|
this.floatingPoint.position.setValue(newPosition)
|
||||||
|
activeShapePoints.pop()
|
||||||
|
activeShapePoints.push(newPosition)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||||||
|
//左键单击开始画线
|
||||||
|
handler.setInputAction(function(click){
|
||||||
|
let earthPosition=viewer.scene.pickPosition(click.position)
|
||||||
|
if(Cesium.defined(earthPosition)){
|
||||||
|
this.floatingPoint=this.drawPoint(earthPosition)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取位置信息
|
||||||
|
//从相机位置创建一条射线,这条射线通过世界中movement.position像素所在的坐标,返回Cartesian3坐标
|
||||||
|
let ray=this.viewer.camera.getPickRay(click.position)
|
||||||
|
//找到射线与渲染的地球表面之间的交点,射线必须以世界坐标给出,返回Cartesian3坐标
|
||||||
|
position=this.viewer.scene.globe.pick(ray,this.viewer.scene)
|
||||||
|
tempPoints.push(position)//记录点位
|
||||||
|
this.pointNum+=1
|
||||||
|
let tempLength=tempPoints.length//记录点数
|
||||||
|
//调用绘制点的接口
|
||||||
|
let point=this.drawPointLabel(tempPoints[tempPoints.length-1],JSON.stringify(this.pointNum))
|
||||||
|
tempEntities.push(point)
|
||||||
|
//存在超过一个点的时候
|
||||||
|
if(tempLength>1){
|
||||||
|
//绘制线
|
||||||
|
let pointline=this.drawPolyline([temPoints[tempPoints.length-2],tempPoints[tempPoints.length-1]])
|
||||||
|
tempEntities.push(pointline)//保存记录
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//绘制点
|
||||||
|
drawPoint(position){
|
||||||
|
//本质上就是添加一个点的实体
|
||||||
|
return this.viewer.entities.add({
|
||||||
|
position:position,
|
||||||
|
point:{
|
||||||
|
color:Cesium.Color.WHEAT,
|
||||||
|
pixelSize:5,
|
||||||
|
outlineWidth:3,
|
||||||
|
disableDepthTestDistance:Number.POSITIVE_INFINITY,
|
||||||
|
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND//规定贴地
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//绘制面几何对象
|
||||||
|
drawPolygon(positions){
|
||||||
|
if(positions.length<2) return
|
||||||
|
return this.viewer.entities.add({
|
||||||
|
name:'面几何对象',
|
||||||
|
polygon:{
|
||||||
|
hierarchy:positions,
|
||||||
|
material:new Cesium.ColorMaterialProperty(
|
||||||
|
Cesium.Color.WHEAT.withAlpha(0.4)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
drawPointLabel(position,pointNum){
|
||||||
|
//本质上就是添加一个点的实体
|
||||||
|
return this.viewer.entities.add({
|
||||||
|
name:'点几何对象',
|
||||||
|
position:position,
|
||||||
|
point:{
|
||||||
|
color:Cesium.Color.WHEAT,
|
||||||
|
pixelSize:5,
|
||||||
|
outlineWidth:3,
|
||||||
|
disableDepthTestDistance:Number.POSITIVE_INFINITY,
|
||||||
|
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND//规定贴地
|
||||||
|
},
|
||||||
|
label:{
|
||||||
|
text:pointNum,
|
||||||
|
font:'30px sans-serif',
|
||||||
|
fillColor:Cesium.Color.WHITE,
|
||||||
|
outlineWidth:2,
|
||||||
|
backgroundColor:Cesium.Color.BLACK,
|
||||||
|
showBackground:true,
|
||||||
|
style:Cesium.LabelStyle.FILL,
|
||||||
|
verticalOrigin:Cesium.VerticalOrigin.BOTTOM,
|
||||||
|
horizontalOrigin:Cesium.HorizontalOrigin.CENTER
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
drawPolyline(positions){
|
||||||
|
if(positions.length<1) return
|
||||||
|
return this.viewer.entities.add({
|
||||||
|
name:'线几何对象',
|
||||||
|
polyline:{
|
||||||
|
position:positions,
|
||||||
|
width:5.0,
|
||||||
|
material:new Cesium.PolylineGlowMaterialProperty({
|
||||||
|
color:Cesium.Color.WHITE
|
||||||
|
}),
|
||||||
|
depthFailMaterial:new Cesium.PolylineGlowMaterialProperty({
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -16,10 +16,12 @@ export default defineConfig(({ command, mode }) => {
|
||||||
const env = loadEnv(mode, process.cwd())
|
const env = loadEnv(mode, process.cwd())
|
||||||
const viteEnv = wrapperEnv(env)
|
const viteEnv = wrapperEnv(env)
|
||||||
const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY } = viteEnv
|
const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY } = viteEnv
|
||||||
|
|
||||||
return {
|
return {
|
||||||
root,
|
root,
|
||||||
base: VITE_PUBLIC_PATH || '/',
|
base: VITE_PUBLIC_PATH || '/',
|
||||||
plugins: createVitePlugins(viteEnv, isBuild),
|
plugins: createVitePlugins(viteEnv, isBuild),
|
||||||
|
|
||||||
lintOnSave: false,
|
lintOnSave: false,
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue