Compare commits
19 Commits
master
...
wangmengqi
| Author | SHA1 | Date |
|---|---|---|
 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 |
|
|
@ -285,7 +285,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'],
|
||||||
/* 要求中缀操作符周围有空格 */
|
/* 要求中缀操作符周围有空格 */
|
||||||
|
|
|
||||||
19
index.html
19
index.html
|
|
@ -1,16 +1,25 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<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>
|
<link rel="stylesheet" href="src/assets/mapbox/mapbox-gl.css" />
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
<script type="text/javascript" src="src/assets/mapbox/mapbox-gl.js"></script>
|
||||||
|
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
|
||||||
|
<script charset="utf-8" type="text/javascript"
|
||||||
|
src="https://g.alicdn.com/de/prismplayer/2.9.21/aliplayer-h5-min.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script type="module" src="/src/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -18,6 +18,9 @@
|
||||||
"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-router": "^4.0.14",
|
"vue-router": "^4.0.14",
|
||||||
|
|
|
||||||
26
src/App.vue
26
src/App.vue
|
|
@ -7,29 +7,23 @@
|
||||||
* @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">
|
<div>
|
||||||
<n-loading-bar-provider>
|
<Dashboard/>
|
||||||
<loading-bar />
|
</div>
|
||||||
<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 { zhCN, dateZhCN } from 'naive-ui'
|
||||||
import themeOverrides from '@/utils/ui/theme.js'
|
import themeOverrides from '@/utils/ui/theme.js'
|
||||||
import loadingBar from '@/components/LoadingBar/index.vue'
|
import loadingBar from '@/components/LoadingBar/index.vue'
|
||||||
import messageContent from '@/components/Message/index.vue'
|
import messageContent from '@/components/Message/index.vue'
|
||||||
import dialogContent from '@/components/Dialog/index.vue'
|
import dialogContent from '@/components/Dialog/index.vue'
|
||||||
|
import Dashboard from './views/dashboard/index.vue'
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
Dashboard
|
||||||
|
}
|
||||||
|
}
|
||||||
</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: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 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)
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Loading…
Reference in New Issue