Compare commits
22 Commits
e0b93a88c2
...
6a955b5921
| Author | SHA1 | Date |
|---|---|---|
 unknown
|
6a955b5921 | |
|
unknown
|
bcce2530aa | |
|
wangmengqi
|
65ac2098ee | |
|
unknown
|
012458b47c | |
|
unknown
|
4b69292063 | |
|
wangmengqi
|
d118c210f6 | |
|
unknown
|
a722837a11 | |
|
wangmengqi
|
3ac4d6698a | |
|
unknown
|
0ac683a25e | |
|
wangmengqi
|
b846f3cd40 | |
|
unknown
|
77aafac3e3 | |
|
wangmengqi
|
863b7866cb | |
|
unknown
|
3f23fbad32 | |
 lixin
|
889830aa1b | |
|
unknown
|
05c1116703 | |
|
unknown
|
4e2f51a0d2 | |
|
unknown
|
01e3800bea | |
|
lixin
|
7c49d9584e | |
|
unknown
|
7b0cf77b27 | |
|
unknown
|
449070ad2d | |
|
lixin
|
73607b7276 | |
|
unknown
|
26534c6360 |
|
|
@ -3,7 +3,8 @@ module.exports = {
|
|||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
es6: true
|
||||
es6: true,
|
||||
'vue/setup-compiler-macros': true
|
||||
},
|
||||
extends: [
|
||||
'plugin:vue/vue3-recommended',
|
||||
|
|
@ -285,7 +286,7 @@ module.exports = {
|
|||
/* 要求或禁止语句块之前的空格 */
|
||||
'space-before-blocks': [2, 'always'],
|
||||
/* 要求或禁止函数圆括号之前有一个空格 */
|
||||
'space-before-function-paren': [2, 'never'],
|
||||
// 'space-before-function-paren': [2, 'never'],
|
||||
/* 禁止或强制圆括号内的空格 */
|
||||
'space-in-parens': [2, 'never'],
|
||||
/* 要求中缀操作符周围有空格 */
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
{
|
||||
}
|
||||
|
|
@ -8,6 +8,9 @@
|
|||
|
||||
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.21/skins/default/aliplayer-min.css" />
|
||||
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.21/aliplayer-h5-min.js"></script>
|
||||
<!-- Include the CesiumJS JavaScript and CSS files -->
|
||||
<script src="https://cesium.com/downloads/cesiumjs/releases/1.101/Build/Cesium/Cesium.js"></script>
|
||||
<link href="https://cesium.com/downloads/cesiumjs/releases/1.101/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,9 @@
|
|||
{
|
||||
"name": "vite_vue3",
|
||||
"version": "0.0.0",
|
||||
"globals": {
|
||||
"Cesium": true
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite --mode localhost",
|
||||
"build:test": "vite build --mode test && esno ./build/script",
|
||||
|
|
@ -14,12 +17,17 @@
|
|||
"@vicons/ionicons5": "^0.10.0",
|
||||
"ali-oss": "^6.17.1",
|
||||
"axios": "^0.26.1",
|
||||
"cesium": "^1.102.0",
|
||||
"dayjs": "^1.11.2",
|
||||
"mockjs": "^1.1.0",
|
||||
"pinia": "^2.0.13",
|
||||
"pinia-plugin-persist": "^1.0.0",
|
||||
"three": "^0.146.0",
|
||||
"threebox": "^0.1.5",
|
||||
"threebox-plugin": "^2.2.7",
|
||||
"tinymce": "^5.10.2",
|
||||
"vue": "^3.2.16",
|
||||
"vue-jstree": "^2.1.6",
|
||||
"vue-router": "^4.0.14",
|
||||
"vuedraggable": "^4.1.0"
|
||||
},
|
||||
|
|
@ -42,6 +50,7 @@
|
|||
"unocss": "^0.16.4",
|
||||
"unplugin-vue-components": "^0.18.5",
|
||||
"vite": "^2.6.4",
|
||||
"vite-plugin-cesium": "^1.2.22",
|
||||
"vite-plugin-html": "^2.1.2",
|
||||
"vite-plugin-mock": "^2.9.6",
|
||||
"vite-plugin-vue-setup-extend": "^0.4.0"
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
29
src/App.vue
29
src/App.vue
|
|
@ -7,29 +7,16 @@
|
|||
* @FilePath: \gis\src\App.vue
|
||||
-->
|
||||
<template>
|
||||
<n-config-provider :locale="zhCN" :date-locale="dateZhCN" inline-theme-disabled :theme-overrides="themeOverrides">
|
||||
<n-loading-bar-provider>
|
||||
<loading-bar />
|
||||
<n-dialog-provider>
|
||||
<dialog-content />
|
||||
<n-message-provider>
|
||||
<message-content />
|
||||
</n-message-provider>
|
||||
<router-view v-slot="{ Component }">
|
||||
<component :is="Component" />
|
||||
</router-view>
|
||||
</n-dialog-provider>
|
||||
</n-loading-bar-provider>
|
||||
</n-config-provider>
|
||||
<dash-board/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { zhCN, dateZhCN } from 'naive-ui'
|
||||
import themeOverrides from '@/utils/ui/theme.js'
|
||||
import loadingBar from '@/components/LoadingBar/index.vue'
|
||||
import messageContent from '@/components/Message/index.vue'
|
||||
import dialogContent from '@/components/Dialog/index.vue'
|
||||
|
||||
<script>
|
||||
import dashBoard from './views/dashboard/index.vue'
|
||||
export default {
|
||||
components:{
|
||||
dashBoard
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,161 @@
|
|||
export default {
|
||||
x_pi: Math.PI * 3000.0 / 180.0,
|
||||
a: 6378245.0,
|
||||
ee: 0.00669342162296594323,
|
||||
/**
|
||||
* 百度坐标系(BD-09)与火星坐标系(GCJ-02)的转换
|
||||
* 即百度转谷歌,高德
|
||||
* @param bd_lon
|
||||
* @param bd_lat
|
||||
* @returns {*[]}
|
||||
*/
|
||||
bd09togcj02 (bd_lon, bd_lat) {
|
||||
const x = bd_lon - 0.0065
|
||||
const y = bd_lat - 0.006
|
||||
const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi)
|
||||
const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi)
|
||||
const gg_lng = z * Math.cos(theta)
|
||||
const gg_lat = z * Math.sin(theta)
|
||||
return [gg_lng, gg_lat]
|
||||
},
|
||||
/**
|
||||
* 火星坐标系(GCJ-02)与百度坐标系(BD-09)的转换
|
||||
* 即谷歌,高德转百度
|
||||
* @param lng
|
||||
* @param lat
|
||||
* @returns {*[]}
|
||||
*/
|
||||
gcj02tobd09 (lng, lat) {
|
||||
const z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * this.x_pi)
|
||||
const theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * this.x_pi)
|
||||
const bd_lng = z * Math.cos(theta) + 0.0065
|
||||
const bd_lat = z * Math.sin(theta) + 0.006
|
||||
return [bd_lng, bd_lat]
|
||||
},
|
||||
/**
|
||||
* WGS84转GCj02
|
||||
* @param lng
|
||||
* @param lat
|
||||
* @returns {*[]}
|
||||
*/
|
||||
wgs84togcj02 (lng, lat) {
|
||||
if (this.out_of_china(lng, lat)) {
|
||||
return [lng, lat]
|
||||
} else {
|
||||
let dlat = this.transformlat(lng - 105.0, lat - 35.0)
|
||||
let dlng = this.transformlng(lng - 105.0, lat - 35.0)
|
||||
const radlat = lat / 180.0 * Math.PI
|
||||
let magic = Math.sin(radlat)
|
||||
magic = 1 - this.ee * magic * magic
|
||||
const sqrtmagic = Math.sqrt(magic)
|
||||
dlat = (dlat * 180.0) / ((this.a * (1 - this.ee)) / (magic * sqrtmagic) * Math.PI)
|
||||
dlng = (dlng * 180.0) / (this.a / sqrtmagic * Math.cos(radlat) * Math.PI)
|
||||
const mglat = lat + dlat
|
||||
const mglng = lng + dlng
|
||||
return [mglng, mglat]
|
||||
}
|
||||
},
|
||||
/**
|
||||
* GCJ02转换为WGS84
|
||||
* @param lng
|
||||
* @param lat
|
||||
* @returns {*[]}
|
||||
*/
|
||||
gcj02towgs84 (lng, lat) {
|
||||
if (this.out_of_china(lng, lat)) {
|
||||
return [lng, lat]
|
||||
} else {
|
||||
let dlat = this.transformlat(lng - 105.0, lat - 35.0)
|
||||
let dlng = this.transformlng(lng - 105.0, lat - 35.0)
|
||||
const radlat = lat / 180.0 * Math.PI
|
||||
let magic = Math.sin(radlat)
|
||||
magic = 1 - this.ee * magic * magic
|
||||
const sqrtmagic = Math.sqrt(magic)
|
||||
dlat = (dlat * 180.0) / ((this.a * (1 - this.ee)) / (magic * sqrtmagic) * Math.PI)
|
||||
dlng = (dlng * 180.0) / (this.a / sqrtmagic * Math.cos(radlat) * Math.PI)
|
||||
const mglat = lat + dlat
|
||||
const mglng = lng + dlng
|
||||
return [lng * 2 - mglng, lat * 2 - mglat]
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 百度坐标系转wgs84坐标系
|
||||
* @param {*} lng
|
||||
* @param {*} lat
|
||||
* @returns
|
||||
*/
|
||||
bd09towgs84 (lng, lat) {
|
||||
// 百度坐标系先转为火星坐标系
|
||||
const gcj02 = this.bd09togcj02(lng, lat)
|
||||
// 火星坐标系转wgs84坐标系
|
||||
const result = this.gcj02towgs84(gcj02[0], gcj02[1])
|
||||
return result
|
||||
},
|
||||
/**
|
||||
* wgs84坐标系转百度坐标系
|
||||
* @param {*} lng
|
||||
* @param {*} lat
|
||||
* @returns
|
||||
*/
|
||||
wgs84tobd09 (lng, lat) {
|
||||
// wgs84先转为火星坐标系
|
||||
const gcj02 = this.wgs84togcj02(lng, lat)
|
||||
// 火星坐标系转百度坐标系
|
||||
const result = this.gcj02tobd09(gcj02[0], gcj02[1])
|
||||
return result
|
||||
},
|
||||
transformlat (lng, lat) {
|
||||
let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
|
||||
ret += (20.0 * Math.sin(6.0 * lng * Math.PI) + 20.0 * Math.sin(2.0 * lng * Math.PI)) * 2.0 / 3.0
|
||||
ret += (20.0 * Math.sin(lat * Math.PI) + 40.0 * Math.sin(lat / 3.0 * Math.PI)) * 2.0 / 3.0
|
||||
ret += (160.0 * Math.sin(lat / 12.0 * Math.PI) + 320 * Math.sin(lat * Math.PI / 30.0)) * 2.0 / 3.0
|
||||
return ret
|
||||
},
|
||||
transformlng (lng, lat) {
|
||||
let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
|
||||
ret += (20.0 * Math.sin(6.0 * lng * Math.PI) + 20.0 * Math.sin(2.0 * lng * Math.PI)) * 2.0 / 3.0
|
||||
ret += (20.0 * Math.sin(lng * Math.PI) + 40.0 * Math.sin(lng / 3.0 * Math.PI)) * 2.0 / 3.0
|
||||
ret += (150.0 * Math.sin(lng / 12.0 * Math.PI) + 300.0 * Math.sin(lng / 30.0 * Math.PI)) * 2.0 / 3.0
|
||||
return ret
|
||||
},
|
||||
/**
|
||||
* 判断是否在国内,不在国内则不做偏移
|
||||
* @param lng
|
||||
* @param lat
|
||||
* @returns {boolean}
|
||||
*/
|
||||
out_of_china (lng, lat) {
|
||||
return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false)
|
||||
},
|
||||
/**
|
||||
* 经纬度转墨卡托
|
||||
* @param poi 经纬度
|
||||
* @returns {{}}
|
||||
* @private
|
||||
*/
|
||||
LngLatToMercator (lng, lat) {
|
||||
const mercator = {}
|
||||
const earthRad = 6378137.0
|
||||
mercator.x = lng * Math.PI / 180 * earthRad
|
||||
const a = lat * Math.PI / 180
|
||||
mercator.y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)))
|
||||
|
||||
return [mercator.x, mercator.y]
|
||||
},
|
||||
|
||||
/**
|
||||
* 墨卡托转经纬度
|
||||
* @param poi 墨卡托
|
||||
* @returns {{}}
|
||||
* @private
|
||||
*/
|
||||
MercatorToLngLat (x, y) {
|
||||
const lnglat = {}
|
||||
lnglat.lng = x / 20037508.34 * 180
|
||||
const mmy = y / 20037508.34 * 180
|
||||
lnglat.lat = 180 / Math.PI * (2 * Math.atan(Math.exp(mmy * Math.PI / 180)) - Math.PI / 2)
|
||||
// console.log(lnglat, '经纬度')
|
||||
return [lnglat.lng, lnglat.lat]
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
import axios from 'axios'
|
||||
import { removeLayer } from './service'
|
||||
|
||||
export default {
|
||||
sourceId: '',
|
||||
layerId: '',
|
||||
clusterCountId: '',
|
||||
unclusteredId: '',
|
||||
/**
|
||||
* 加载聚合图层
|
||||
* @param map
|
||||
* @param url String 传递的后端服务地址
|
||||
* @param sourceOption Object 只需传clusterMaxZoom和clusterRadius
|
||||
* @param layerOption Object 只需传filter和paint
|
||||
* @param clusterLayerOption Object 只需传filter layout paint
|
||||
* @param unclusterLayerOption Object 只需传filter paint
|
||||
*/
|
||||
loadAggregationGraph (map, geodata, sourceOption, layerOption, clusterLayerOption, unclusterLayerOption) {
|
||||
// axios.get(url).then((res) => {
|
||||
// if (res) {
|
||||
|
||||
const data = geodata
|
||||
const sourceId = 'sourceis_1'
|
||||
const layerId = 'layerId_1'
|
||||
// const sourceId = res.data.crs.properties.name
|
||||
// this.sourceId = sourceId
|
||||
// const layerId = sourceId + 'layer'
|
||||
// this.layerId = layerId
|
||||
// const clusterCountId = sourceId + 'clusterCount'
|
||||
// this.clusterCountId = clusterCountId
|
||||
// const unclusteredId = sourceId + 'unclustered'
|
||||
// this.unclusteredId = unclusteredId
|
||||
map.addSource(sourceId, {
|
||||
type: 'geojson',
|
||||
data: data,
|
||||
cluster: true,
|
||||
clusterMaxZoom: sourceOption.clusterMaxZoom ? sourceOption.clusterMaxZoom : 14, // 最大缩放到群集点
|
||||
clusterRadius: sourceOption.clusterRadius ? sourceOption.clusterRadius : 50// 每一组点的半径
|
||||
})
|
||||
// 外围有数字的图层,加晕染
|
||||
map.addLayer({
|
||||
id: layerId,
|
||||
type: 'circle',
|
||||
source: sourceId,
|
||||
// filter: ['has', 'poi_id'],
|
||||
filter: layerOption.filter,
|
||||
paint: layerOption.paint ? layerOption.paint : {
|
||||
// 蓝色,当点数小于100时为20px圆
|
||||
// 点计数在100到750之间时为黄色,21px圆
|
||||
// 点计数大于或等于750时为22像素的粉红色圆圈
|
||||
'circle-color': [
|
||||
'step',
|
||||
['get', 'poi_id'],
|
||||
'rgba(81,187,214,0.8)',
|
||||
100,
|
||||
'rgba(241,240,117,0.8)',
|
||||
750,
|
||||
'rgba(242,140,177,0.8)'
|
||||
],
|
||||
'circle-radius': [
|
||||
'step',
|
||||
['get', 'poi_id'],
|
||||
20, // 蓝色,当点数小于100时为20px圆
|
||||
100, // 对应上面circle-color数字,意思为100以内
|
||||
21, // 点计数在100到750之间为黄色,意思为750以内
|
||||
750, // 对应上面circle-color数字,意思为750以内
|
||||
22// 点计数大于或等于750时为22像素的粉红色圆圈
|
||||
],
|
||||
// 这个是外边框的颜色 circle-stroke-color这个对应了上面circle-color
|
||||
'circle-stroke-color': [
|
||||
'step',
|
||||
['get', 'poi_id'],
|
||||
'rgba(81,187,214,0.2)',
|
||||
100,
|
||||
'rgba(241,240,117,0.2)',
|
||||
750,
|
||||
'rgba(242,140,177,0.2)'
|
||||
],
|
||||
// 这个是外边框渲染的范围
|
||||
'circle-stroke-width': [
|
||||
'step',
|
||||
['get', 'poi_id'],
|
||||
5, // 蓝色晕染长度,当点数小于100时为5px晕染
|
||||
100, // 对应上面circle-color数字,意思为100以内
|
||||
6, // 点计数在100到750之间时为黄色,6px晕染
|
||||
750, // 对应上面circle-color数字,意思为750以内
|
||||
7// 点计数大于或等于750时为7px像素的粉红色晕染
|
||||
]
|
||||
}
|
||||
})
|
||||
// 聚合图圆圈中的数字
|
||||
map.addLayer({
|
||||
id: 'clusterCountId',
|
||||
type: 'symbol',
|
||||
source: sourceId,
|
||||
// filter: ['has', 'poi_id'],
|
||||
filter: clusterLayerOption.filter,
|
||||
layout: clusterLayerOption.layout,
|
||||
// layout:{
|
||||
// 'text-field': '{poi_id}', // 文本内容来源字段
|
||||
// 'text-font': ['Microsoft YaHei'],
|
||||
// 'text-size': 12
|
||||
// }
|
||||
paint: clusterLayerOption.paint ? clusterLayerOption.paint : {
|
||||
'text-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-color': '#54c081',
|
||||
'text-halo-width': 100
|
||||
}
|
||||
})
|
||||
// 聚合图中没有数字的显示小圆点
|
||||
map.addLayer({
|
||||
id: 'unclusteredId',
|
||||
type: 'circle',
|
||||
source: sourceId,
|
||||
// filter: ['!', ['has', 'poi_id']],
|
||||
filter: unclusterLayerOption.filter,
|
||||
paint: unclusterLayerOption.paint ? unclusterLayerOption.paint : {
|
||||
'circle-color': '#11b4da',
|
||||
'circle-radius': 4,
|
||||
'circle-stroke-width': 1,
|
||||
'circle-stroke-color': '#fff'
|
||||
}
|
||||
// paint: {
|
||||
// 'circle-color': '#11b4da',
|
||||
// 'circle-radius': 4,
|
||||
// 'circle-stroke-width': 1,
|
||||
// 'circle-stroke-color': '#fff'
|
||||
// }
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 移除聚合图层
|
||||
*/
|
||||
removeLayer (map) {
|
||||
map.removeLayer(this.layerId)
|
||||
map.removeLayer(this.clusterCountId)
|
||||
map.removeLayer(this.unclusteredId)
|
||||
map.removeSource(this.sourceId)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
import axios from 'axios'
|
||||
|
||||
/**
|
||||
* @description:加载WMS服务
|
||||
* @param map
|
||||
* @param url String
|
||||
* @param option Object
|
||||
*
|
||||
*/
|
||||
export function loadWMS (map, url, option) {
|
||||
if (url) {
|
||||
const id = url.split('layer=')[1]
|
||||
const source = map.getSource(option.source)
|
||||
const layer = map.getLayer(option.id)
|
||||
if (source === undefined && layer === undefined) {
|
||||
map.addSource(option.source, {
|
||||
|
||||
type: 'raster',
|
||||
tiles: [url],
|
||||
tileSize: 512
|
||||
})
|
||||
map.addLayer({
|
||||
id: id,
|
||||
type: option.type,
|
||||
source: option.source,
|
||||
paint: option.paint
|
||||
})
|
||||
} else {
|
||||
alert('该图层已存在!请勿重复添加。')
|
||||
}
|
||||
} else {
|
||||
alert('请输入WMS服务地址!')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description:根据id删除指定图层
|
||||
* @param map
|
||||
* @param url
|
||||
*/
|
||||
export function removeLayer (map, url, option) {
|
||||
const id = url.split('layer=')[1]
|
||||
|
||||
map.removeLayer(id)
|
||||
map.removeSource(option.source)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description:移除WFS服务图层
|
||||
* @param {*} map
|
||||
* @param {*} url
|
||||
* @param {*} option
|
||||
*/
|
||||
export function removeWFSLayer (map, option) {
|
||||
map.removeLayer(option.id)
|
||||
map.removeSource(option.id)
|
||||
}
|
||||
/**
|
||||
* @description:加载WFS服务
|
||||
* @param url String
|
||||
* @param option Object
|
||||
*/
|
||||
export function loadWFSLayer (map, url, option) {
|
||||
const source = map.getSource(option.id)
|
||||
const layer = map.getLayer(option.id)
|
||||
if (source === undefined && layer === undefined) {
|
||||
if (url) {
|
||||
axios.get(url).then((res) => {
|
||||
const features = res.data.features
|
||||
// console.log(features, "元素层");
|
||||
// let layerType = null;
|
||||
// let geometryType = features[0].geometry.type;
|
||||
const addLayerOption = {
|
||||
id: option.id,
|
||||
type: option.type,
|
||||
source: {
|
||||
type: 'geojson',
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: features
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
visibility: 'visible'
|
||||
},
|
||||
paint: option.paint
|
||||
}
|
||||
// if (geometryType == "MultiLineString") {
|
||||
// addLayerOption.type = "line";
|
||||
// } else if (geometryType == "Line") {
|
||||
// addLayerOption.type = "line";
|
||||
// } else if (geometryType == "Point") {
|
||||
// addLayerOption.type = "circle";
|
||||
// } else if (geometryType == " MultiPoint") {
|
||||
// addLayerOption.type = "circle";
|
||||
// } else if (geometryType == "Polygon") {
|
||||
// addLayerOption.type = "fill";
|
||||
// addLayerOption.paint = {
|
||||
// "fill-color": "rgba(200,100,240,0.4)",
|
||||
// "fill-outline-color": "rgba(200,100,240,1)",
|
||||
// };
|
||||
// } else if (geometryType == "MultiPolygon") {
|
||||
// addLayerOption.type = "fill";
|
||||
// addLayerOption.paint = {
|
||||
// "fill-color": "rgba(200,100,240,0.4)",
|
||||
// "fill-outline-color": "rgba(200,100,240,1)",
|
||||
// };
|
||||
// }
|
||||
|
||||
map.addLayer(addLayerOption)
|
||||
})
|
||||
} else {
|
||||
alert('请输入WFS地址!')
|
||||
}
|
||||
} else {
|
||||
alert('该图层已存在!请勿重复添加')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description:加载WMTS服务
|
||||
* @param map
|
||||
* @param url String
|
||||
* @param option Object
|
||||
*/
|
||||
export function loadWMTS (map, url, option) {
|
||||
const source = map.getSource(option.source)
|
||||
const layer = map.getLayer(option.id)
|
||||
if (source === undefined && layer === undefined) {
|
||||
if (url) {
|
||||
const id = url.split('layer=')[1]
|
||||
map.addSource(option.source, {
|
||||
type: 'raster',
|
||||
tiles: [url],
|
||||
|
||||
tileSize: 256
|
||||
})
|
||||
map.addLayer({
|
||||
id: id,
|
||||
type: option.type,
|
||||
source: option.source,
|
||||
paint: option.paint
|
||||
})
|
||||
} else {
|
||||
alert('请输入WMTS服务地址!')
|
||||
}
|
||||
} else {
|
||||
alert('该图层已存在!请勿重复添加。')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description:加载TMS服务
|
||||
* @param map
|
||||
* @param url String
|
||||
* @param option Object
|
||||
*/
|
||||
export function loadTMSLayer (map, url, option) {
|
||||
const source = map.getSource(option.source)
|
||||
const layer = map.getLayer(option.id)
|
||||
if (source === undefined && layer === undefined) {
|
||||
if (url) {
|
||||
const id = url.split('layer=')[1]
|
||||
map.addSource(option.source, {
|
||||
type: 'raster',
|
||||
tiles: [url],
|
||||
scheme: 'tms',
|
||||
tileSize: 256
|
||||
})
|
||||
map.addLayer({
|
||||
id: id,
|
||||
type: option.type,
|
||||
source: option.source,
|
||||
paint: option.paint
|
||||
})
|
||||
} else {
|
||||
alert('请输入TMS服务地址!')
|
||||
}
|
||||
} else {
|
||||
alert('该图层已存在!请勿重复添加')
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
|
|
@ -0,0 +1,946 @@
|
|||
const workSpaceName = 'sz_pg';
|
||||
const layerGroupName = 'sz_pg_mb';
|
||||
const mapurl =
|
||||
'http://192.168.11.35:8999/geoserver/gwc/service/tms/1.0.0/' +
|
||||
workSpaceName +
|
||||
':' +
|
||||
layerGroupName +
|
||||
'@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
|
||||
const chinaGroupName = 'sz_pg_china_mb';
|
||||
const chinaurl =
|
||||
'http://192.168.11.35:8999/geoserver/gwc/service/tms/1.0.0/' +
|
||||
workSpaceName +
|
||||
':' +
|
||||
chinaGroupName +
|
||||
'@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
|
||||
|
||||
const spriteurl = 'http://192.168.11.35:8089/assets/sprite-th/sprite';
|
||||
const glyphsurl = 'http://192.168.11.35:8089/assets/fonts/{fontstack}/{range}.pbf';
|
||||
const iconSize = 0.6;
|
||||
const normal_style = {
|
||||
version: 8,
|
||||
sources: {
|
||||
os: {
|
||||
type: 'vector',
|
||||
scheme: 'tms',
|
||||
tiles: [mapurl],
|
||||
pixelRatio: 2,
|
||||
},
|
||||
china: {
|
||||
type: 'vector',
|
||||
scheme: 'tms',
|
||||
tiles: [chinaurl],
|
||||
pixelRatio: 2,
|
||||
},
|
||||
},
|
||||
sprite: spriteurl,
|
||||
//字体.pbf文件获取
|
||||
glyphs: glyphsurl,
|
||||
layers: [
|
||||
{
|
||||
id: 'background',
|
||||
type: 'background',
|
||||
paint: { 'background-color': '#a9dbfe', 'background-opacity': 1 },
|
||||
},
|
||||
|
||||
{
|
||||
id: 'admin',
|
||||
type: 'fill',
|
||||
source: 'china',
|
||||
'source-layer': chinaGroupName + '_admin',
|
||||
minzoom: 3,
|
||||
// "maxzoom":8,
|
||||
layout: {},
|
||||
paint: {
|
||||
'fill-color': ['interpolate', ['linear'], ['zoom'], 9, '#fbf9f4', 11, '#f1f2f3'],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'building-area', //小区面
|
||||
type: 'fill',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_building_area',
|
||||
minzoom: 15,
|
||||
layout: { visibility: 'visible' },
|
||||
paint: {
|
||||
'fill-color': '#000000',
|
||||
'fill-opacity': 0.04,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'park', //公园、绿地、交通绿化、高尔夫球场
|
||||
type: 'fill',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_bg_area',
|
||||
minzoom: 8,
|
||||
filter: ['all', ['in', 'type', '31', '33']],
|
||||
paint: {
|
||||
'fill-color': 'hsl(102, 55%, 83%)',
|
||||
'fill-opacity': ['interpolate', ['linear'], ['zoom'], 8, 0, 9, 1],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'water', //海洋、水系
|
||||
type: 'fill',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_bg_area',
|
||||
minzoom: 8,
|
||||
filter: ['==', 'type', '12'],
|
||||
layout: { visibility: 'visible' },
|
||||
paint: {
|
||||
'fill-color': 'hsl(205, 98%, 83%)',
|
||||
'fill-opacity': ['interpolate', ['linear'], ['zoom'], 8, 0, 9, 1],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'railway-case', //铁路边框
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_bg_line',
|
||||
minzoom: 9,
|
||||
// "maxzoom": 20,
|
||||
filter: ['==', 'type', '92'],
|
||||
paint: { 'line-width': 3, 'line-color': '#999999' },
|
||||
},
|
||||
{
|
||||
id: 'railway', //铁路
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_bg_line',
|
||||
minzoom: 9,
|
||||
// "maxzoom": 20,
|
||||
filter: ['==', 'type', '92'],
|
||||
paint: {
|
||||
'line-width': 2,
|
||||
'line-dasharray': [3, 3],
|
||||
'line-color': 'hsl(0, 0%, 100%)',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-06-case', //六级道路（辅路）边框
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 15,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '2', '3', '20']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': 'hsl(0, 0%, 88%)',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 15, 0, 16, 4, 20, 16],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-06', //六级道路（辅路）
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 15,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '2', '3', '20']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': 'hsl(45, 0%, 100%)',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 15, 0, 16, 3, 20, 12],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-05-case', //五级道路（支路）边框
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 13,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '4', '8', '9']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#e0e0e0',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 13, 0, 14, 1, 16, 12, 20, 34],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-05', //五级道路（支路）
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 13,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '4', '8', '9']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': 'hsl(0, 0%, 100%)',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 13, 0, 14, 1, 16, 10, 20, 30],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-04-case', //四级道路（县道、次干道）边框
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 11,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '6', '5', '10']],
|
||||
layout: {
|
||||
'line-round-limit': 1,
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#e0e0e0',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 11, 0, 12, 1, 16, 12, 20, 64],
|
||||
'line-opacity': 1,
|
||||
'line-gap-width': 0,
|
||||
'line-offset': 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-04', //四级道路（县道、次干道）
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 11,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '6', '5', '10']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': 'hsl(45, 0%, 100%)',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 11, 0, 12, 1, 16, 10, 20, 60],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-03-case', //三级道路（省道、主干道）边框
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 10,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '11']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#f1c85f',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 10, 0, 11, 1, 16, 12, 20, 64],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-03', //三级道路（省道、主干道）
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 10,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '11']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': 'hsl(45, 94%, 86%)',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 10, 0, 11, 1, 16, 10, 20, 60],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-02-case', //二级道路（国道、快速路）边框
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 9,
|
||||
filter: ['all', ['in', 'road_grade', '7', '12']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#f0b92d',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 9, 1, 16, 12, 20, 64],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-02', ////二级道路（国道、快速路）
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 9,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '7', '12']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#ffdb70',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 9, 1, 16, 10, 20, 60],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-01-case', //一级道路（高速）边框
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 8,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '13']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#f57d2e',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 8, 0, 16, 12, 20, 64],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-01', //一级道路（高速）
|
||||
type: 'line',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 8,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '13']],
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
visibility: 'visible',
|
||||
'line-round-limit': 1.05,
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#f69655',
|
||||
'line-width': ['interpolate', ['linear'], ['zoom'], 8, 0, 16, 10, 20, 60],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'building', //3d建筑
|
||||
type: 'fill-extrusion',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_building',
|
||||
minzoom: 16,
|
||||
// "maxzoom": 20,
|
||||
layout: {},
|
||||
paint: {
|
||||
'fill-extrusion-color': '#e3e3e3',
|
||||
'fill-extrusion-opacity': 0.7,
|
||||
'fill-extrusion-vertical-gradient': false,
|
||||
'fill-extrusion-height': ['to-number', ['get', 'height']],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'railway-label',
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_bg_line',
|
||||
minzoom: 11,
|
||||
// "maxzoom": 20,
|
||||
filter: ['==', 'type', '92'],
|
||||
layout: {
|
||||
'text-field': '{name}',
|
||||
'symbol-placement': 'line-center',
|
||||
'text-size': 14,
|
||||
'symbol-spacing': 500,
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#666',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
id: 'level-05-label', //五级道路（支路）名称
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 15,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '4', '8', '9']],
|
||||
layout: {
|
||||
'text-field': '{name}',
|
||||
'symbol-placement': 'line',
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 15, 12, 18, 14],
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'symbol-spacing': ['interpolate', ['linear'], ['zoom'], 15, 300, 20, 1000],
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#666',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-04-label', //四级道路（县道、次干道）名称
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 13,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '6', '5', '10']],
|
||||
layout: {
|
||||
'text-field': '{name}',
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 13, 12, 14, 14],
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'symbol-placement': 'line',
|
||||
'symbol-spacing': ['interpolate', ['linear'], ['zoom'], 13, 300, 20, 1000],
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
'text-color': '#666',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-03-label', //三级道路（省道、主干道）名称
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 12,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '11']],
|
||||
layout: {
|
||||
'symbol-placement': 'line',
|
||||
'text-field': '{name}',
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 12, 12, 13, 14],
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'symbol-spacing': ['interpolate', ['linear'], ['zoom'], 12, 300, 20, 1000],
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#666',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-02-label', //二级道路（国道、快速路）名称
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 11,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '7', '12']],
|
||||
layout: {
|
||||
'text-field': '{name}',
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 11, 12, 12, 14],
|
||||
'symbol-placement': 'line',
|
||||
'symbol-spacing': ['interpolate', ['linear'], ['zoom'], 11, 300, 20, 1000],
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#666',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-01-label', //一级道路（高速）名称
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 9,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '13']],
|
||||
layout: {
|
||||
'text-field': '{name}',
|
||||
'symbol-placement': 'line',
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 9, 12, 12, 14],
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'symbol-spacing': ['interpolate', ['linear'], ['zoom'], 9, 300, 20, 1000],
|
||||
visibility: 'visible',
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#333',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-03-num', //三级道路（国道、快速路）编号
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 13,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '11']],
|
||||
layout: {
|
||||
'symbol-placement': 'line',
|
||||
'text-field': '{road_num}',
|
||||
visibility: 'visible',
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'symbol-spacing': ['interpolate', ['linear'], ['zoom'], 12, 300, 20, 1000],
|
||||
'text-size': 12,
|
||||
},
|
||||
paint: {
|
||||
'text-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-color': '#ec914b',
|
||||
'text-halo-width': 100,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-02-num', //二级道路（国道、快速路）编号
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 11,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '7', '12']],
|
||||
layout: {
|
||||
'text-field': '{road_num}',
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'symbol-placement': 'line',
|
||||
visibility: 'visible',
|
||||
'symbol-spacing': ['interpolate', ['linear'], ['zoom'], 11, 300, 20, 1000],
|
||||
'text-size': 12,
|
||||
},
|
||||
paint: {
|
||||
'text-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-color': '#f47171',
|
||||
'text-halo-width': 100,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'level-01-num', //一级道路（高速）编号
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_road',
|
||||
minzoom: 11,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'road_grade', '13']],
|
||||
layout: {
|
||||
'text-field': '{road_num}',
|
||||
visibility: 'visible',
|
||||
'text-size': 12,
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'symbol-spacing': ['interpolate', ['linear'], ['zoom'], 11, 300, 20, 1000],
|
||||
'symbol-placement': 'line',
|
||||
'text-padding': 0,
|
||||
},
|
||||
paint: {
|
||||
'text-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-color': '#54c081',
|
||||
'text-halo-width': 100,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'park-label',
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_bg_area',
|
||||
minzoom: 10,
|
||||
// "maxzoom": 20,
|
||||
filter: ['all', ['in', 'type', '31', '33']],
|
||||
layout: {
|
||||
'text-field': '{name}',
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 13, 12, 16, 14],
|
||||
'text-padding': 2,
|
||||
'text-offset': [0, 1],
|
||||
'text-anchor': 'center',
|
||||
},
|
||||
paint: {
|
||||
'text-halo-width': 1,
|
||||
'text-color': '#257902',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'water-label', //水系名称
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_bg_area',
|
||||
minzoom: 13,
|
||||
// "maxzoom": 20,
|
||||
filter: ['==', 'type', '12'],
|
||||
layout: {
|
||||
'text-field': '{name}',
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 13, 12, 16, 14],
|
||||
visibility: 'visible',
|
||||
|
||||
'text-padding': 2,
|
||||
'text-offset': [0, 1],
|
||||
'text-anchor': 'center',
|
||||
},
|
||||
paint: {
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
'text-color': '#046ab4',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'county-label', //区名
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_label',
|
||||
filter: ['all', ['in', 'type', '18070200']],
|
||||
minzoom: 10,
|
||||
maxzoom: 14,
|
||||
layout: {
|
||||
'text-size': 12,
|
||||
'text-allow-overlap': false,
|
||||
'text-ignore-placement': false,
|
||||
'text-field': '{name}',
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-padding': 2,
|
||||
'text-offset': [0, 1],
|
||||
'text-anchor': 'top',
|
||||
'icon-image': '18000000',
|
||||
'icon-size': iconSize,
|
||||
'icon-ignore-placement': true,
|
||||
},
|
||||
paint: {
|
||||
'text-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-color': '#6ab9f6',
|
||||
'text-halo-width': 100,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'city-label', //市名
|
||||
type: 'symbol',
|
||||
source: 'china',
|
||||
'source-layer': chinaGroupName + '_china_poi',
|
||||
filter: ['all', ['==', 'type', '18070100'], ['==', 'grade', '2']],
|
||||
minzoom: 6,
|
||||
maxzoom: 12,
|
||||
layout: {
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 6, 14, 9, 16, 12, 18],
|
||||
'text-allow-overlap': false,
|
||||
'text-ignore-placement': false,
|
||||
'text-field': '{name}',
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-anchor': 'bottom',
|
||||
'text-offset': [0, -0.5],
|
||||
'icon-image': 'city',
|
||||
'icon-size': iconSize,
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#333333',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
id: 'capital-label',
|
||||
type: 'symbol',
|
||||
source: 'china',
|
||||
'source-layer': chinaGroupName + '_china_poi',
|
||||
minzoom: 3,
|
||||
maxzoom: 6,
|
||||
filter: ['all', ['==', 'type', '18070100'], ['==', 'grade', '1']],
|
||||
layout: {
|
||||
'text-field': '{name}',
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-size': ['interpolate', ['linear'], ['zoom'], 3, 12, 6, 16],
|
||||
'icon-image': 'city',
|
||||
'icon-size': 0.4,
|
||||
'text-anchor': 'bottom',
|
||||
'text-offset': [0, -0.5],
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#333333',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'icon-opacity': 1,
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
//箭头df2
|
||||
id: 'road-arrow',
|
||||
minzoom: 17,
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
layout: {
|
||||
// "icon-allow-overlap": true,
|
||||
'icon-ignore-placement': true,
|
||||
'icon-image': 'road-arrow',
|
||||
'symbol-spacing': 800,
|
||||
'icon-size': 1,
|
||||
'icon-padding': 0,
|
||||
'symbol-placement': 'line',
|
||||
},
|
||||
filter: ['==', 'pass_code', '1'],
|
||||
'source-layer': layerGroupName + '_road',
|
||||
paint: {
|
||||
'text-color': '#333',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
'icon-opacity': 0.35,
|
||||
},
|
||||
},
|
||||
{
|
||||
//箭头df2
|
||||
id: 'road-arrow-rotate',
|
||||
minzoom: 17,
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
layout: {
|
||||
'icon-ignore-placement': true,
|
||||
'icon-image': 'road-arrow',
|
||||
'symbol-spacing': 800,
|
||||
'icon-size': 1,
|
||||
'icon-padding': 0,
|
||||
'symbol-placement': 'line',
|
||||
'icon-rotate': 180,
|
||||
},
|
||||
filter: ['==', 'pass_code', '2'],
|
||||
'source-layer': layerGroupName + '_road',
|
||||
paint: {
|
||||
'text-color': '#333',
|
||||
'text-halo-color': 'hsl(0, 0%, 100%)',
|
||||
'text-halo-width': 1,
|
||||
'icon-opacity': 0.35,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
id: 'label-6',
|
||||
minzoom: 13,
|
||||
maxzoom: 14,
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_label',
|
||||
filter: ['==', 'grade', '6'],
|
||||
layout: {
|
||||
'text-allow-overlap': false,
|
||||
'text-ignore-placement': false,
|
||||
'text-field': '{name}',
|
||||
'text-size': 12,
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-padding': 2,
|
||||
'text-offset': [0, 0.6],
|
||||
'text-anchor': 'top',
|
||||
'icon-image': ['get', 'featcode'],
|
||||
'icon-size': iconSize,
|
||||
'icon-ignore-placement': true,
|
||||
'icon-allow-overlap': false,
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#8a8a89',
|
||||
'text-halo-color': '#FFFFFF',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'label-5',
|
||||
minzoom: 14,
|
||||
maxzoom: 15,
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_label',
|
||||
filter: ['==', 'grade', '5'],
|
||||
layout: {
|
||||
'text-allow-overlap': false,
|
||||
'text-ignore-placement': false,
|
||||
'text-field': '{name}',
|
||||
'text-size': 12,
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-padding': 2,
|
||||
'text-offset': [0, 0.6],
|
||||
'text-anchor': 'top',
|
||||
'icon-image': ['get', 'featcode'],
|
||||
'icon-size': iconSize,
|
||||
'icon-ignore-placement': true,
|
||||
'icon-allow-overlap': false,
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#8a8a89',
|
||||
'text-halo-color': '#FFFFFF',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'label-4',
|
||||
minzoom: 15,
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_label',
|
||||
filter: ['==', 'grade', '4'],
|
||||
layout: {
|
||||
'text-allow-overlap': false,
|
||||
'text-ignore-placement': false,
|
||||
'text-field': '{name}',
|
||||
'text-size': 12,
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-padding': 2,
|
||||
'text-offset': [0, 0.6],
|
||||
'text-anchor': 'top',
|
||||
'icon-image': ['get', 'featcode'],
|
||||
'icon-size': iconSize,
|
||||
'icon-ignore-placement': true,
|
||||
'icon-allow-overlap': false,
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#8a8a89',
|
||||
'text-halo-color': '#FFFFFF',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'label-3',
|
||||
minzoom: 16,
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_label',
|
||||
filter: ['==', 'grade', '3'],
|
||||
layout: {
|
||||
'text-allow-overlap': false,
|
||||
'text-ignore-placement': false,
|
||||
'text-field': '{name}',
|
||||
'text-size': 12,
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-padding': 2,
|
||||
'text-offset': [0, 0.6],
|
||||
'text-anchor': 'top',
|
||||
'icon-image': ['get', 'featcode'],
|
||||
'icon-size': iconSize,
|
||||
'icon-ignore-placement': true,
|
||||
'icon-allow-overlap': false,
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#8a8a89',
|
||||
'text-halo-color': '#FFFFFF',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'label-2',
|
||||
minzoom: 17,
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_label',
|
||||
filter: ['==', 'grade', '2'],
|
||||
layout: {
|
||||
'text-allow-overlap': false,
|
||||
'text-ignore-placement': false,
|
||||
'text-field': '{name}',
|
||||
'text-size': 12,
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-padding': 2,
|
||||
'text-offset': [0, 0.6],
|
||||
'text-anchor': 'top',
|
||||
'icon-image': ['get', 'featcode'],
|
||||
'icon-size': iconSize,
|
||||
'icon-ignore-placement': true,
|
||||
'icon-allow-overlap': false,
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#8a8a89',
|
||||
'text-halo-color': '#FFFFFF',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'label-1',
|
||||
minzoom: 18,
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_label',
|
||||
filter: ['all', ['in', 'grade', '0', '1']],
|
||||
layout: {
|
||||
'text-allow-overlap': false,
|
||||
'text-ignore-placement': false,
|
||||
'text-field': '{name}',
|
||||
'text-size': 12,
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
'text-padding': 2,
|
||||
'text-offset': [0, 0.6],
|
||||
'text-anchor': 'top',
|
||||
'icon-image': ['get', 'featcode'],
|
||||
'icon-size': iconSize,
|
||||
'icon-ignore-placement': true,
|
||||
'icon-allow-overlap': false,
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#8a8a89',
|
||||
'text-halo-color': '#FFFFFF',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'building-area-poi', //小区面标注
|
||||
minzoom: 15,
|
||||
type: 'symbol',
|
||||
source: 'os',
|
||||
'source-layer': layerGroupName + '_building_area_poi',
|
||||
layout: {
|
||||
'text-allow-overlap': false,
|
||||
'text-ignore-placement': false,
|
||||
'text-field': '{bd_name}',
|
||||
'text-size': 14,
|
||||
'text-font': ['Microsoft YaHei'],
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#8a8a89',
|
||||
'text-halo-color': '#FFFFFF',
|
||||
'text-halo-width': 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'province-line',
|
||||
type: 'line',
|
||||
source: 'china',
|
||||
'source-layer': chinaGroupName + '_admin',
|
||||
minzoom: 3,
|
||||
filter: ['==', 'grade', '1'],
|
||||
layout: {},
|
||||
paint: {
|
||||
'line-color': '#d5d3cd',
|
||||
'line-blur': 0,
|
||||
'line-offset': 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'city-line',
|
||||
type: 'line',
|
||||
source: 'china',
|
||||
'source-layer': chinaGroupName + '_admin',
|
||||
filter: ['==', 'grade', '2'],
|
||||
minzoom: 6,
|
||||
layout: {},
|
||||
paint: { 'line-color': '#d5d3cd', 'line-dasharray': [4, 4] },
|
||||
},
|
||||
{
|
||||
id: 'county-line',
|
||||
type: 'line',
|
||||
source: 'china',
|
||||
'source-layer': chinaGroupName + '_admin',
|
||||
filter: ['==', 'grade', '3'],
|
||||
minzoom: 7,
|
||||
layout: {},
|
||||
paint: { 'line-color': '#d5d3cd', 'line-dasharray': [4, 4] },
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default normal_style;
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,755 @@
|
|||
.mapboxgl-map {
|
||||
font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
-webkit-tap-highlight-color: rgb(0 0 0/0)
|
||||
}
|
||||
|
||||
.mapboxgl-canvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.mapboxgl-map:-webkit-full-screen {
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.mapboxgl-canary {
|
||||
background-color: salmon
|
||||
}
|
||||
|
||||
.mapboxgl-canvas-container.mapboxgl-interactive,
|
||||
.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
|
||||
cursor: grab;
|
||||
-webkit-user-select: none;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.mapboxgl-canvas-container.mapboxgl-interactive:active,
|
||||
.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active {
|
||||
cursor: grabbing
|
||||
}
|
||||
|
||||
.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,
|
||||
.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas {
|
||||
touch-action: pan-x pan-y
|
||||
}
|
||||
|
||||
.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,
|
||||
.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas {
|
||||
touch-action: pinch-zoom
|
||||
}
|
||||
|
||||
.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
|
||||
.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
|
||||
touch-action: none
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-bottom-left,
|
||||
.mapboxgl-ctrl-bottom-right,
|
||||
.mapboxgl-ctrl-top-left,
|
||||
.mapboxgl-ctrl-top-right {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-top-left {
|
||||
top: 0;
|
||||
left: 0
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-top-right {
|
||||
top: 0;
|
||||
right: 0
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-bottom-left {
|
||||
bottom: 0;
|
||||
left: 0
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-bottom-right {
|
||||
right: 0;
|
||||
bottom: 0
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl {
|
||||
clear: both;
|
||||
pointer-events: auto;
|
||||
transform: translate(0)
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-top-left .mapboxgl-ctrl {
|
||||
margin: 10px 0 0 10px;
|
||||
float: left
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-top-right .mapboxgl-ctrl {
|
||||
margin: 10px 10px 0 0;
|
||||
float: right
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl {
|
||||
margin: 0 0 10px 10px;
|
||||
float: left
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl {
|
||||
margin: 0 10px 10px 0;
|
||||
float: right
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group {
|
||||
border-radius: 4px;
|
||||
background: #fff
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group:not(:empty) {
|
||||
box-shadow: 0 0 0 2px rgba(0, 0, 0, .1)
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:active) {
|
||||
.mapboxgl-ctrl-group:not(:empty) {
|
||||
box-shadow: 0 0 0 2px ButtonText
|
||||
}
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button {
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
display: block;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button+button {
|
||||
border-top: 1px solid #ddd
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button .mapboxgl-ctrl-icon {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:active) {
|
||||
.mapboxgl-ctrl-icon {
|
||||
background-color: transparent
|
||||
}
|
||||
.mapboxgl-ctrl-group button+button {
|
||||
border-top: 1px solid ButtonText
|
||||
}
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-attrib-button:focus,
|
||||
.mapboxgl-ctrl-group button:focus {
|
||||
box-shadow: 0 0 2px 2px #0096ff
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button:disabled {
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon {
|
||||
opacity: .25
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button:first-child {
|
||||
border-radius: 4px 4px 0 0
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button:last-child {
|
||||
border-radius: 0 0 4px 4px
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button:only-child {
|
||||
border-radius: inherit
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button:not(:disabled):hover {
|
||||
background-color: rgba(0, 0, 0, .05)
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button:focus:focus-visible {
|
||||
box-shadow: 0 0 2px 2px #0096ff
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button:focus:not(:focus-visible) {
|
||||
box-shadow: none
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:active) {
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:black-on-white) {
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:active) {
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:black-on-white) {
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:active) {
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23999'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:black-on-white) {
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23aaa'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon {
|
||||
animation: mapboxgl-spin 2s linear infinite
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:active) {
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23999'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:black-on-white) {
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E")
|
||||
}
|
||||
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23666'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mapboxgl-spin {
|
||||
0% {
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
to {
|
||||
transform: rotate(1turn)
|
||||
}
|
||||
}
|
||||
|
||||
a.mapboxgl-ctrl-logo {
|
||||
width: 88px;
|
||||
height: 23px;
|
||||
margin: 0 0 -4px -4px;
|
||||
display: block;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='0.3' stroke='%23000' stroke-width='3'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='0.9' fill='%23fff'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E")
|
||||
}
|
||||
|
||||
a.mapboxgl-ctrl-logo.mapboxgl-compact {
|
||||
width: 23px
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:active) {
|
||||
a.mapboxgl-ctrl-logo {
|
||||
background-color: transparent;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='1' stroke='%23000' stroke-width='3'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='1' fill='%23fff'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
@media (-ms-high-contrast:black-on-white) {
|
||||
a.mapboxgl-ctrl-logo {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='1' stroke='%23fff' stroke-width='3' fill='%23fff'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='1' fill='%23000'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
|
||||
padding: 0 5px;
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
margin: 0
|
||||
}
|
||||
|
||||
@media screen {
|
||||
.mapboxgl-ctrl-attrib.mapboxgl-compact {
|
||||
min-height: 20px;
|
||||
padding: 2px 24px 2px 0;
|
||||
margin: 10px;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border-radius: 12px
|
||||
}
|
||||
.mapboxgl-ctrl-attrib.mapboxgl-compact-show {
|
||||
padding: 2px 28px 2px 8px;
|
||||
visibility: visible
|
||||
}
|
||||
.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show,
|
||||
.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show {
|
||||
padding: 2px 8px 2px 28px;
|
||||
border-radius: 12px
|
||||
}
|
||||
.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner {
|
||||
display: none
|
||||
}
|
||||
.mapboxgl-ctrl-attrib-button {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E");
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 12px;
|
||||
outline: none;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: 0
|
||||
}
|
||||
.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button,
|
||||
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button {
|
||||
left: 0
|
||||
}
|
||||
.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner,
|
||||
.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button {
|
||||
display: block
|
||||
}
|
||||
.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button {
|
||||
background-color: rgba(0, 0, 0, .05)
|
||||
}
|
||||
.mapboxgl-ctrl-bottom-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after {
|
||||
bottom: 0;
|
||||
right: 0
|
||||
}
|
||||
.mapboxgl-ctrl-top-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after {
|
||||
top: 0;
|
||||
right: 0
|
||||
}
|
||||
.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after {
|
||||
top: 0;
|
||||
left: 0
|
||||
}
|
||||
.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after {
|
||||
bottom: 0;
|
||||
left: 0
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast:active) {
|
||||
.mapboxgl-ctrl-attrib.mapboxgl-compact:after {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' fill='%23fff'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast:black-on-white) {
|
||||
.mapboxgl-ctrl-attrib.mapboxgl-compact:after {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-attrib a {
|
||||
color: rgba(0, 0, 0, .75);
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-attrib a:hover {
|
||||
color: inherit;
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-attrib .mapbox-improve-map {
|
||||
font-weight: 700;
|
||||
margin-left: 2px
|
||||
}
|
||||
|
||||
.mapboxgl-attrib-empty {
|
||||
display: none
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-scale {
|
||||
background-color: hsla(0, 0%, 100%, .75);
|
||||
font-size: 10px;
|
||||
border: 2px solid #333;
|
||||
border-top: #333;
|
||||
padding: 0 5px;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.mapboxgl-popup {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
will-change: transform;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-top,
|
||||
.mapboxgl-popup-anchor-top-left,
|
||||
.mapboxgl-popup-anchor-top-right {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-bottom,
|
||||
.mapboxgl-popup-anchor-bottom-left,
|
||||
.mapboxgl-popup-anchor-bottom-right {
|
||||
flex-direction: column-reverse
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-left {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-right {
|
||||
flex-direction: row-reverse
|
||||
}
|
||||
|
||||
.mapboxgl-popup-tip {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 10px solid transparent;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
|
||||
align-self: center;
|
||||
border-top: none;
|
||||
border-bottom-color: #fff
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
|
||||
align-self: flex-start;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-bottom-color: #fff
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
|
||||
align-self: flex-end;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-bottom-color: #fff
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
|
||||
align-self: center;
|
||||
border-bottom: none;
|
||||
border-top-color: #fff
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
|
||||
align-self: flex-start;
|
||||
border-bottom: none;
|
||||
border-left: none;
|
||||
border-top-color: #fff
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
|
||||
align-self: flex-end;
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
border-top-color: #fff
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
|
||||
align-self: center;
|
||||
border-left: none;
|
||||
border-right-color: #fff
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
|
||||
align-self: center;
|
||||
border-right: none;
|
||||
border-left-color: #fff
|
||||
}
|
||||
|
||||
.mapboxgl-popup-close-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
border: 0;
|
||||
border-radius: 0 3px 0 0;
|
||||
cursor: pointer;
|
||||
background-color: transparent
|
||||
}
|
||||
|
||||
.mapboxgl-popup-close-button:hover {
|
||||
background-color: rgba(0, 0, 0, .05)
|
||||
}
|
||||
|
||||
.mapboxgl-popup-content {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
|
||||
padding: 10px 10px 15px;
|
||||
pointer-events: auto
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content {
|
||||
border-top-left-radius: 0
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content {
|
||||
border-top-right-radius: 0
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content {
|
||||
border-bottom-left-radius: 0
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content {
|
||||
border-bottom-right-radius: 0
|
||||
}
|
||||
|
||||
.mapboxgl-popup-track-pointer {
|
||||
display: none
|
||||
}
|
||||
|
||||
.mapboxgl-popup-track-pointer * {
|
||||
pointer-events: none;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
.mapboxgl-map:hover .mapboxgl-popup-track-pointer {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.mapboxgl-map:active .mapboxgl-popup-track-pointer {
|
||||
display: none
|
||||
}
|
||||
|
||||
.mapboxgl-marker {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
will-change: transform;
|
||||
opacity: 1;
|
||||
transition: opacity .2s
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-dot,
|
||||
.mapboxgl-user-location-dot:before {
|
||||
background-color: #1da1f2;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-dot:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
animation: mapboxgl-user-location-dot-pulse 2s infinite
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-dot:after {
|
||||
border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
content: "";
|
||||
height: 19px;
|
||||
left: -2px;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
width: 19px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, .35000000000000003)
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading {
|
||||
width: 0;
|
||||
height: 0
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after,
|
||||
.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before {
|
||||
content: "";
|
||||
border-bottom: 7.5px solid #4aa1eb;
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before {
|
||||
border-left: 7.5px solid transparent;
|
||||
transform: translateY(-28px) skewY(-20deg)
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after {
|
||||
border-right: 7.5px solid transparent;
|
||||
transform: translate(7.5px, -28px) skewY(20deg)
|
||||
}
|
||||
|
||||
@keyframes mapboxgl-user-location-dot-pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1
|
||||
}
|
||||
70% {
|
||||
transform: scale(3);
|
||||
opacity: 0
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-dot-stale {
|
||||
background-color: #aaa
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-dot-stale:after {
|
||||
display: none
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-accuracy-circle {
|
||||
background-color: rgba(29, 161, 242, .2);
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border-radius: 100%
|
||||
}
|
||||
|
||||
.mapboxgl-crosshair,
|
||||
.mapboxgl-crosshair .mapboxgl-interactive,
|
||||
.mapboxgl-crosshair .mapboxgl-interactive:active {
|
||||
cursor: crosshair
|
||||
}
|
||||
|
||||
.mapboxgl-boxzoom {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: #fff;
|
||||
border: 2px dotted #202020;
|
||||
opacity: .5
|
||||
}
|
||||
|
||||
@media print {
|
||||
.mapbox-improve-map {
|
||||
display: none
|
||||
}
|
||||
}
|
||||
|
||||
.mapboxgl-scroll-zoom-blocker,
|
||||
.mapboxgl-touch-pan-blocker {
|
||||
color: #fff;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, .7000000000000001);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .75s ease-in-out;
|
||||
transition-delay: 1s
|
||||
}
|
||||
|
||||
.mapboxgl-scroll-zoom-blocker-show,
|
||||
.mapboxgl-touch-pan-blocker-show {
|
||||
opacity: 1;
|
||||
transition: opacity .1s ease-in-out
|
||||
}
|
||||
|
||||
.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page,
|
||||
.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page .mapboxgl-canvas {
|
||||
touch-action: pan-x pan-y
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,168 @@
|
|||
<template>
|
||||
<div class="searchOption">
|
||||
<div>
|
||||
<input id="keyword"
|
||||
v-model="searchStyle"
|
||||
type="radio"
|
||||
value="keyword">
|
||||
<label for="keyword">按关键字搜索</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="lnglat"
|
||||
v-model="searchStyle"
|
||||
type="radio"
|
||||
value="lnglat">
|
||||
<label for="lnglat">按经纬度搜索</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<img src="@/assets/img/location.png">
|
||||
<input v-model="searchContent"
|
||||
type="text"
|
||||
placeholder="请输入搜索位置/坐标"
|
||||
@input="searchPlace()">
|
||||
<img src="@/assets/img/search.png"
|
||||
@click="showList()">
|
||||
</div>
|
||||
<div ref="locationList"
|
||||
class="my-click-transition">
|
||||
<li v-for="(item,index) in localList"
|
||||
:key="index"
|
||||
class="itemLocation"
|
||||
@click="flyTo(item.geometry,item.id)"><img src="@/assets/img/location.png">
|
||||
<span class="locationName">{{ item.name }}</span>
|
||||
<span class="locationAddress">{{ item.address }}</span>
|
||||
</li>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
searchType: '',
|
||||
searchStyle: 'keyword',
|
||||
searchContent: '',
|
||||
localList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showList () {
|
||||
// if (this.$refs.locationList.className == 'my-click-transition') {
|
||||
// this.$refs.locationList.className = 'locationList'
|
||||
// } else {
|
||||
// this.$refs.locationList.className = 'my-click-transition'
|
||||
// }
|
||||
},
|
||||
// 实时查询
|
||||
searchPlace () {
|
||||
let url
|
||||
if (this.searchStyle == 'keyword') {
|
||||
console.log('111')
|
||||
url = 'http://192.168.11.35:8500/thmap/poi/searchFeat/keywords?keywords=' + this.searchContent
|
||||
} else {
|
||||
console.log('222')
|
||||
const arr = this.searchContent.split(',')
|
||||
url = 'http://192.168.11.35:8500/thmap/poi/searchFeat/keywords?lat=' + arr[0] + '&lng=' + arr[1] + '&distance=' + 50
|
||||
}
|
||||
|
||||
axios.get(url).then((res) => {
|
||||
// console.log(res.data.data.datas, '数据集')
|
||||
if (res.data.data.datas) {
|
||||
// console.log('有数据了')
|
||||
this.$refs.locationList.className = 'locationList'
|
||||
this.localList = res.data.data.datas
|
||||
} else {
|
||||
this.$refs.locationList.className = 'my-click-transition'
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
flyTo (lonLatInfo, id) {
|
||||
const Arr = lonLatInfo.split(' ')
|
||||
|
||||
// const Num1 = parseFloat(Arr[1])
|
||||
const Num1 = Number(Arr[1].match(/\d+(\.\d+)?/g)[0])
|
||||
const Num2 = Number(Arr[2].match(/\d+(\.\d+)?/g)[0])
|
||||
const Arr1 = [Num1, Num2]
|
||||
// console.log(this.$parent, '父组件')
|
||||
this.$parent.flyTo(Arr1, id)
|
||||
// // console.log(Arr1, '点位信息')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.searchOption {
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
line-height: 50px;
|
||||
input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 300px;
|
||||
height: 45px;
|
||||
padding: 10px 10px;
|
||||
background-color: rgba(245, 245, 245, 0.8);
|
||||
box-shadow: 0px 15px 10px -15px #565656;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
input {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
// 位置列表
|
||||
.locationList {
|
||||
margin-top: 5px;
|
||||
width: 300px;
|
||||
// height: 100px;
|
||||
background-color: rgba(245, 245, 245, 0.8);
|
||||
transition: height 0.5s ease-in;
|
||||
-webkit-transform: height 0.5s ease-in;
|
||||
}
|
||||
.my-click-transition {
|
||||
overflow: hidden;
|
||||
margin-top: 5px;
|
||||
transition: height 0.5s ease-out;
|
||||
-webkit-transform: height 0.5s ease-out;
|
||||
height: 0;
|
||||
width: 300px;
|
||||
background-color: rgba(245, 245, 245, 0.8);
|
||||
}
|
||||
.itemLocation {
|
||||
width: 300px;
|
||||
height: 32px;
|
||||
position: relative;
|
||||
padding-left: 32px;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
line-height: 32px;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0px;
|
||||
}
|
||||
.locationName {
|
||||
color: #0082e5;
|
||||
}
|
||||
.locationAddress {
|
||||
color: #565656;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
<template>
|
||||
<div id="map"
|
||||
class="content" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import normal_style from '../assets/js/normal_style.js'
|
||||
import axios from 'axios'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
map: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initMap()
|
||||
},
|
||||
methods: {
|
||||
initMap () {
|
||||
const that = this
|
||||
that.map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
center: [120.476913, 31.416667],
|
||||
zoom: 5,
|
||||
style: {
|
||||
version: 8,
|
||||
name: 'Mapbox Streets',
|
||||
sources: {
|
||||
'osm-tiles': {
|
||||
type: 'raster',
|
||||
tiles: ['http://c.tile.openstreetmap.org/{z}/{x}/{y}.png'],
|
||||
|
||||
tileSize: 256
|
||||
}
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
id: '123',
|
||||
type: 'raster',
|
||||
source: 'osm-tiles',
|
||||
'source-layer': 'osmtiles'
|
||||
}
|
||||
]
|
||||
}
|
||||
// style:normal_style
|
||||
})
|
||||
},
|
||||
loadWFS (url, option) {
|
||||
var geoJsonUrl =
|
||||
'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_china_mb_china_poi&outputFormat=application/json'
|
||||
// 线 var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_bg_line&outputFormat=application/json'
|
||||
// var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_admin&outputFormat=application/json';
|
||||
// var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_road&outputFormat=application/json';
|
||||
// var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_label&outputFormat=application/json';
|
||||
// var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_label&outputFormat=application/json';
|
||||
axios.get(geoJsonUrl).then((res) => {
|
||||
console.log(res)
|
||||
const features = res.data.features
|
||||
console.log(features, '元素层')
|
||||
const layerType = null
|
||||
const geometryType = features[0].geometry.type
|
||||
const addLayerOption = {
|
||||
id: 'points',
|
||||
type: layerType,
|
||||
source: {
|
||||
type: 'geojson',
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: features
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
visibility: 'visible'
|
||||
}
|
||||
}
|
||||
if (geometryType == 'MultiLineString') {
|
||||
addLayerOption.type = 'line'
|
||||
} else if (geometryType == 'Line') {
|
||||
addLayerOption.type = 'line'
|
||||
} else if (geometryType == 'Point') {
|
||||
addLayerOption.type = 'circle'
|
||||
} else if (geometryType == ' MultiPoint') {
|
||||
addLayerOption.type = 'circle'
|
||||
} else if (geometryType == 'Polygon') {
|
||||
addLayerOption.type = 'fill'
|
||||
addLayerOption.paint = {
|
||||
'fill-color': 'rgba(200,100,240,0.4)',
|
||||
'fill-outline-color': 'rgba(200,100,240,1)'
|
||||
}
|
||||
} else if (geometryType == 'MultiPolygon') {
|
||||
addLayerOption.type = 'fill'
|
||||
addLayerOption.paint = {
|
||||
'fill-color': 'rgba(200,100,240,0.4)',
|
||||
'fill-outline-color': 'rgba(200,100,240,1)'
|
||||
}
|
||||
}
|
||||
|
||||
this.map.addLayer(addLayerOption)
|
||||
})
|
||||
},
|
||||
loadWMS (url, option) {
|
||||
console.log('111')
|
||||
|
||||
this.map.addSource('wms-source', {
|
||||
'type': 'raster',
|
||||
'tiles': [url],
|
||||
'tileSize': 512
|
||||
})
|
||||
this.map.addLayer({
|
||||
'id': 'wms-layer',
|
||||
'type': 'raster',
|
||||
'source': 'wms-source',
|
||||
'paint': {}
|
||||
})
|
||||
},
|
||||
loadWMTS (url, option) {
|
||||
this.map.addSource('wmts-source', {
|
||||
'type': 'raster',
|
||||
'tiles': ['http://192.168.11.35:8999/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=dem_test%3Ajs'],
|
||||
|
||||
'tileSize': 256
|
||||
})
|
||||
this.map.addLayer({
|
||||
'id': 'wmts-layer',
|
||||
'type': 'raster',
|
||||
'source': 'wmts-source',
|
||||
'paint': {
|
||||
'raster-opacity': 0.8
|
||||
}
|
||||
})
|
||||
},
|
||||
loadTMS (url, option) {
|
||||
var tmsUrl = 'http://192.168.11.35:8999/geoserver/gwc/service/tms/1.0.0/sz_pg%3Asz_pg_mb@EPSG%3A900913@pbf'
|
||||
|
||||
this.map.addLayer({
|
||||
'id': 'tms-layer',
|
||||
'type': 'raster',
|
||||
'source': {
|
||||
'type': 'raster',
|
||||
'tiles': [tmsUrl]
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import '@/styles/index.scss'
|
||||
import 'uno.css'
|
||||
import axios from 'axios'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import { setupRouter } from '@/router'
|
||||
|
|
@ -7,6 +8,7 @@ import { setupStore } from '@/store'
|
|||
|
||||
import App from './App.vue'
|
||||
|
||||
|
||||
function setupApp() {
|
||||
const app = createApp(App)
|
||||
|
||||
|
|
@ -14,6 +16,7 @@ function setupApp() {
|
|||
setupRouter(app)
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
}
|
||||
|
||||
setupApp()
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,25 +1,476 @@
|
|||
<template>
|
||||
<div>
|
||||
首页
|
||||
<div id='cesiumContainer'>
|
||||
</div>
|
||||
<!-- 底图切换按钮 -->
|
||||
<div class="maptab">
|
||||
<div class="maptabs_box" :style="cursor" @mouseover="expandMapList" @mouseleave="collapseMapList">
|
||||
<div class="layer1" :style="{ backgroundImage: 'url(' + mapList[0].bg + ')' }" @click="switchMap(0)">
|
||||
<div class="title">{{ mapList[0].name }}</div>
|
||||
</div>
|
||||
<div :class="[expand ? 'layer3' : 'layer2']" :style="{ backgroundImage: 'url(' + mapList[1].bg + ')' }" @click="switchMap(1)">
|
||||
<div class="title">{{ mapList[1].name }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- 工具栏 -->
|
||||
<div class="tools">
|
||||
<div class="item" @click="zoomIn">
|
||||
<img src="@/assets/img/zoomIn.png" />
|
||||
</div>
|
||||
<div class="item" @click="zoomOut">
|
||||
<img src="@/assets/img/zoomout.png" />
|
||||
</div>
|
||||
<div class="item" @click="reset">
|
||||
<img src="@/assets/img/located.png" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="@/assets/img/measureLength.png" />
|
||||
</div>
|
||||
<div class="item" style="border:0px">
|
||||
<img src="@/assets/img/measureArea.png" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="maptabs_box" :style="cursor" @mouseover="expandMapList" @mouseleave="collapseMapList">
|
||||
|
||||
<div
|
||||
class="layer1"
|
||||
:style="{backgroundImage:'url('+mapList[0].bg+')'}"
|
||||
@click="switchMap(0)"
|
||||
>
|
||||
<div class="title">{{mapList[0].name}}</div>
|
||||
</div>
|
||||
<div
|
||||
:class="[expand?'layer3':'layer2']"
|
||||
:style="{backgroundImage:'url('+mapList[1].bg+')'}"
|
||||
@click="switchMap(1)"
|
||||
>
|
||||
<div class="title">{{ mapList[1].name }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- 图层管理 -->
|
||||
<n-tree block-line :data="treeData" :default-expanded-keys="defaultExpandedKeys" checkable expand-on-click selectable
|
||||
class="layer-tree"></n-tree>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ref, reactive, onMounted, toRefs } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { repeat } from 'seemly'
|
||||
import sallitePng from '@/assets/img/satelliteMap.png'
|
||||
import TDMapPng from '@/assets/img/TDMap.png'
|
||||
import AdministrtivePng from '@/assets/img/Administrative.png'
|
||||
|
||||
function createData(level = 4, baseKey = "") {
|
||||
if (!level)
|
||||
return void 0;
|
||||
return repeat(6 - level, void 0).map((_, index) => {
|
||||
const key = "" + baseKey + level + index;
|
||||
return {
|
||||
label: createLabel(level),
|
||||
key,
|
||||
children: createData(level - 1, key)
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function createLabel(level) {
|
||||
if (level === 4)
|
||||
return "图层四";
|
||||
if (level === 3)
|
||||
return "图层三";
|
||||
if (level === 2)
|
||||
return "图层二";
|
||||
if (level === 1)
|
||||
return "图层一";
|
||||
return "";
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'HomePage',
|
||||
components: {
|
||||
|
||||
},
|
||||
setup(props) {
|
||||
const router = useRouter()
|
||||
|
||||
const data = {
|
||||
viewer: null,
|
||||
mapList: [
|
||||
{ name: '电子图', bg: TDMapPng },
|
||||
{ name: '影像图', bg: sallitePng },
|
||||
{ name: '行政区划图', bg: AdministrtivePng }
|
||||
],
|
||||
cursor: { cursor: '' },
|
||||
expand: false,
|
||||
mapChooseIndex: 0,
|
||||
currentChooseIndex: 0,
|
||||
//测距
|
||||
tempEntities: [],
|
||||
pointNum: 0,
|
||||
floatingPoint: undefined,
|
||||
activeShape: undefined
|
||||
}
|
||||
function toSystem() {
|
||||
router.push({ path: '/login' })
|
||||
}
|
||||
return {
|
||||
toSystem
|
||||
|
||||
|
||||
const initMap = () => {
|
||||
//设置相机初始飞到中国上空
|
||||
// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90)
|
||||
data.viewer = new Cesium.Viewer('cesiumContainer', {
|
||||
// 右上角 搜索
|
||||
geocoder: false,
|
||||
// 右上角 Home
|
||||
homeButton: false,
|
||||
// 右上角 2D/3D切换
|
||||
sceneModePicker: false,
|
||||
// 右上角 地形
|
||||
baseLayerPicker: false,
|
||||
// 右上角 Help
|
||||
navigationHelpButton: false,
|
||||
// 左下角 圆盘动画控件
|
||||
animation: false,
|
||||
// 时间轴
|
||||
timeline: false,
|
||||
// 右小角 全屏
|
||||
fullscreenButton: false,
|
||||
vrButton: false,
|
||||
// 点击要素后提示信息
|
||||
infoBox: false,
|
||||
selectionIndicator: false,
|
||||
// 每个几何实例将只能以3D渲染以节省GPU内存
|
||||
scene3DOnly: false,
|
||||
// 关闭地球光环
|
||||
skyAtmosphere: false,
|
||||
// 初始化底图
|
||||
// imageryProvider: new Cesium.SingleTileImageryProvider({
|
||||
// url: 'https://gisdata.t-aaron.com/GlobalBkLayer.jpg'
|
||||
// }),
|
||||
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
|
||||
url: "http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=f634525a82da65f715d168d7ba1899c0",
|
||||
layer: "tdtImgLayer",
|
||||
style: "default",
|
||||
format: "image/jpeg",
|
||||
tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
|
||||
show: true
|
||||
}),
|
||||
shouldAnimate: true,
|
||||
orderIndependentTranslucency: false,
|
||||
contextOptions: {
|
||||
webgl: {
|
||||
alpha: true
|
||||
}
|
||||
}
|
||||
})
|
||||
//设置相机飞到中国上空
|
||||
data.viewer.camera.flyTo({
|
||||
destination: Cesium.Cartesian3.fromDegrees(116.435314, 40.960521, 10000000.0),
|
||||
duration: 5
|
||||
})
|
||||
renderDistrict()
|
||||
renderData()
|
||||
// load3dtiles()
|
||||
}
|
||||
}
|
||||
/**
|
||||
* wms,wmts,tms,wfs服务的加载方法
|
||||
*/
|
||||
const renderDistrict = () => {
|
||||
//加载wms服务
|
||||
const wmsLayer = new Cesium.WebMapServiceImageryProvider({
|
||||
url: 'https://geoserver.t-aaron.com:4080/geoserver/ows',
|
||||
layers: 'liuyang:town',
|
||||
parameters: {
|
||||
service: 'WMS',
|
||||
format: 'image/png',
|
||||
transparent: true//务必设置为true,否则不显示底图
|
||||
}
|
||||
})
|
||||
data.viewer.imageryLayers.addImageryProvider(wmsLayer)
|
||||
|
||||
//加载wmts服务
|
||||
//加载arcgis server发布的wmts服务
|
||||
const arcgisLayer = new Cesium.WebMapTileServiceImageryProvider({
|
||||
url: 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSHydroCached/MapServer/WMTS',
|
||||
layer: 'USGSHydroCached',
|
||||
style: 'default',
|
||||
format: 'image/png',
|
||||
tileMatrixSetID: 'default028mm',
|
||||
maximumLevel: 18,
|
||||
credit: 'U. S. Geological Survey'
|
||||
})
|
||||
data.viewer.imageryLayers.addImageryProvider(arcgisLayer)
|
||||
//加载 geoserver发布的wmts服务
|
||||
const wmtsurl = 'http://192.168.11.35:8999/geoserver/gwc/service/wmts/rest/sz_pg:yaotanghe1/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png';
|
||||
const wmtsLayer = new Cesium.WebMapTileServiceImageryProvider({
|
||||
url: wmtsurl,
|
||||
layer: 'sz_pg:yaotanghe1',
|
||||
style: '',
|
||||
format: "image/png",
|
||||
|
||||
tileMatrixSetID: "EPSG:4326",
|
||||
tilingScheme: new Cesium.GeographicTilingScheme(),
|
||||
// tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
|
||||
//tileMatrixSetID:"EPSG:900913",//不能设置为4326,否则cesium中不显示
|
||||
})
|
||||
data.viewer.imageryLayers.addImageryProvider(wmtsLayer)
|
||||
|
||||
//加载wfs服务
|
||||
axios.get('https://geoserver.t-aaron.com:4080/geoserver/lusong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=lusong%3Arivers&maxFeatures=50&outputFormat=application%2Fjson').then((res) => {
|
||||
var datasource = Cesium.GeoJsonDataSource.load(res.data)
|
||||
|
||||
data.viewer.dataSources.add(datasource)
|
||||
//改变所加载图层的样式
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
//加载tms服务
|
||||
const urlTemplateImageryProvider = new Cesium.UrlTemplateImageryProvider({
|
||||
url: "https://geoserver.t-aaron.com:4080/geoserver/gwc/service/tms/1.0.0/jiangning%3Avillage-lines@EPSG%3A4326@png",
|
||||
})
|
||||
data.viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider)
|
||||
|
||||
}
|
||||
/**
|
||||
* geojson,wkt,gml等数据的加载
|
||||
*/
|
||||
const renderData = () => {
|
||||
//加载本地geojson/geoserver发布的geojson,本地的文件要放在public目录下
|
||||
data.viewer.dataSources.add(
|
||||
Cesium.GeoJsonDataSource.load(
|
||||
//'https://geoserver.t-aaron.com:4080/geoserver/liuyang/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=liuyang%3Aclassification&maxFeatures=50&outputFormat=application%2Fjson',
|
||||
'/liuyang.json',
|
||||
{
|
||||
stroke: Cesium.Color.White,//边框颜色
|
||||
fill: Cesium.Color.RED.withAlpha(0.5),//填充颜色
|
||||
strokeWidth: 3//边框宽度
|
||||
}
|
||||
)
|
||||
)
|
||||
//加载wkt数据
|
||||
|
||||
}
|
||||
//加载3dtiles数据
|
||||
const load3dtiles = () => {
|
||||
//加载倾斜摄影b3dm格式
|
||||
const palaceTileset = new Cesium.Cesium3DTileset({
|
||||
url: 'https://gisdata.t-aaron.com/b3dm/lusongqu_b3dm/tileset.json',
|
||||
//控制切片视角显示的数量，可调节性能
|
||||
maximumScreenSpaceError: 2,
|
||||
maximumNumberOfLoadedTiles: 100000
|
||||
|
||||
})
|
||||
data.viewer.scene.primitives.add(palaceTileset)
|
||||
//控制模型的位置
|
||||
palaceTileset.readyPromise.then(function (palaceTileset) {
|
||||
data.viewer.scene.primitives.add(palaceTileset)
|
||||
var heightOffset = 0.0
|
||||
var boundingSphere = palaceTileset.boundingSphere//获取3DTiles的bounds范围
|
||||
var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center)//获取3DTiles的范围中心点的弧度
|
||||
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0)//模型本身的位置
|
||||
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset)//模型改变的位置
|
||||
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())//定义模型的改变状态
|
||||
palaceTileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)//修改模型的位置
|
||||
data.viewer.zoomTo(palaceTileset, new Cesium.HeadingPitchRange(0.5, -0.2, palaceTileset.boundingSphere.radius * 1.0))
|
||||
})
|
||||
//定位到三维模型
|
||||
data.viewer.zoomTo(palaceTileset)
|
||||
}
|
||||
/**
|
||||
* 鼠标移入展开地图栏
|
||||
*/
|
||||
const expandMapList = () => {
|
||||
console.log('222')
|
||||
data.cursor = { cursor: 'pointer' }
|
||||
data.expand = true
|
||||
if (data.currentChooseIndex !== data.mapChooseIndex) {
|
||||
data.mapList = data.mapList.reverse()
|
||||
data.currentChooseIndex = 0
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 鼠标移出收起地图栏
|
||||
*/
|
||||
const collapseMapList = () => {
|
||||
console.log('111')
|
||||
data.cursor = { cursor: '' }
|
||||
data.expand = true
|
||||
if (data.currentChooseIndex !== data.mapChooseIndex) {
|
||||
//切换底图
|
||||
data.mapList = data.mapList.reverse()
|
||||
data.currentChooseIndex = 0
|
||||
}
|
||||
}
|
||||
//切换底图
|
||||
const switchMap = (index) => {
|
||||
console.log(index, '索引')
|
||||
data.currentChooseIndex = index
|
||||
|
||||
// switch (data.mapList[index].name) {
|
||||
// case '电子图':
|
||||
// data.tdtImgMap.setVisible(false)
|
||||
// data.tdtLineMap.setVisible(true)
|
||||
// break
|
||||
// case '影像图':
|
||||
// data.tdtImgMap.setVisible(true)
|
||||
// data.tdtLineMap.setVisible(false)
|
||||
// }
|
||||
}
|
||||
// 放大地图
|
||||
const zoomIn = () => {
|
||||
data.viewer.camera.zoomIn()
|
||||
// let position=data.viewer.camera.position
|
||||
// let cameraHeight=data.viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;
|
||||
// //每次缩小20倍,参数可改
|
||||
// let moveRate=cameraHeight/20.0
|
||||
// data.viewer.camera.moveBackward(moveRate)
|
||||
}
|
||||
//缩小地图
|
||||
const zoomOut = () => {
|
||||
data.viewer.camera.zoomOut()
|
||||
// let position=data.viewer.camera.position;
|
||||
// let cameraHeight=data.viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height
|
||||
// //每次缩小20倍,参数可改
|
||||
// let moveRate=cameraHeight/20.0
|
||||
// data.viewer.camera.moveForward(moveRate)
|
||||
}
|
||||
//复位
|
||||
const reset = () => {
|
||||
data.viewer.camera.flyTo({
|
||||
destination: Cesium.Cartesian3.fromDegrees(116.435314, 40.960521, 10000000.0),
|
||||
duration: 5
|
||||
})
|
||||
}
|
||||
//测量空间直线距离
|
||||
//根据类型绘制对象
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
initMap()
|
||||
})
|
||||
return {
|
||||
toSystem,
|
||||
...toRefs(data),
|
||||
treeData: createData(),
|
||||
defaultExpandedKeys: ref(['40', '41']),
|
||||
collapseMapList,
|
||||
expandMapList,
|
||||
switchMap,
|
||||
zoomIn,
|
||||
zoomOut,
|
||||
reset,
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.tabbar {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 100px;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// 图层管理
|
||||
.layer-tree {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
//底图切换按钮
|
||||
.maptab {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 15px;
|
||||
|
||||
//底部切换按钮
|
||||
.maptabs_box {
|
||||
float: right;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
|
||||
.layer1,
|
||||
.layer2,
|
||||
.layer3 {
|
||||
width: 74px;
|
||||
height: 60px;
|
||||
border: 1px solid #fff;
|
||||
box-shadow: 0 2px 2px rgb(0 0 0 /25%);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.layer1 {
|
||||
right: 0;
|
||||
|
||||
z-index: 1005;
|
||||
}
|
||||
|
||||
.layer2 {
|
||||
right: 10px;
|
||||
|
||||
z-index: 1004;
|
||||
}
|
||||
|
||||
.layer3 {
|
||||
right: 84px;
|
||||
|
||||
z-index: 1004;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
background: #2770d4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//工具栏
|
||||
.tools {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 100px;
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
|
||||
.item {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid rgb(46, 46, 46);
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
|
|
@ -0,0 +1,133 @@
|
|||
export default {
|
||||
tempEntities: [],
|
||||
pointNum: 0,
|
||||
floatingPoint: undefined,
|
||||
activeShape: undefined,
|
||||
viewer:null,
|
||||
/**
|
||||
* 根据类型绘制对象
|
||||
* @param {} type 绘制类型
|
||||
* @param {*} view cesium view
|
||||
*/
|
||||
draw(type, viewer) {
|
||||
this.viewer=viewer
|
||||
let position = []
|
||||
let tempPoints = []
|
||||
let activeShapePoints = []
|
||||
//创建场景的canvas元素
|
||||
let handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
|
||||
switch(type){
|
||||
//绘制线
|
||||
case 'Polyline':
|
||||
//监听鼠标移动
|
||||
handler.setInputAction(function(movement){
|
||||
if(Cesium.defined(this.floatingPoint)){
|
||||
let newPosition=this.viewer.scene.pickPosition(movement.endPosition)
|
||||
if(Cesium.defined(newPosition)){
|
||||
this.floatingPoint.position.setValue(newPosition)
|
||||
activeShapePoints.pop()
|
||||
activeShapePoints.push(newPosition)
|
||||
}
|
||||
}
|
||||
},Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||||
//左键单击开始画线
|
||||
handler.setInputAction(function(click){
|
||||
let earthPosition=viewer.scene.pickPosition(click.position)
|
||||
if(Cesium.defined(earthPosition)){
|
||||
this.floatingPoint=this.drawPoint(earthPosition)
|
||||
|
||||
}
|
||||
|
||||
//获取位置信息
|
||||
//从相机位置创建一条射线,这条射线通过世界中movement.position像素所在的坐标,返回Cartesian3坐标
|
||||
let ray=this.viewer.camera.getPickRay(click.position)
|
||||
//找到射线与渲染的地球表面之间的交点,射线必须以世界坐标给出,返回Cartesian3坐标
|
||||
position=this.viewer.scene.globe.pick(ray,this.viewer.scene)
|
||||
tempPoints.push(position)//记录点位
|
||||
this.pointNum+=1
|
||||
let tempLength=tempPoints.length//记录点数
|
||||
//调用绘制点的接口
|
||||
let point=this.drawPointLabel(tempPoints[tempPoints.length-1],JSON.stringify(this.pointNum))
|
||||
tempEntities.push(point)
|
||||
//存在超过一个点的时候
|
||||
if(tempLength>1){
|
||||
//绘制线
|
||||
let pointline=this.drawPolyline([temPoints[tempPoints.length-2],tempPoints[tempPoints.length-1]])
|
||||
tempEntities.push(pointline)//保存记录
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
//绘制点
|
||||
drawPoint(position){
|
||||
//本质上就是添加一个点的实体
|
||||
return this.viewer.entities.add({
|
||||
position:position,
|
||||
point:{
|
||||
color:Cesium.Color.WHEAT,
|
||||
pixelSize:5,
|
||||
outlineWidth:3,
|
||||
disableDepthTestDistance:Number.POSITIVE_INFINITY,
|
||||
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND//规定贴地
|
||||
}
|
||||
})
|
||||
},
|
||||
//绘制面几何对象
|
||||
drawPolygon(positions){
|
||||
if(positions.length<2) return
|
||||
return this.viewer.entities.add({
|
||||
name:'面几何对象',
|
||||
polygon:{
|
||||
hierarchy:positions,
|
||||
material:new Cesium.ColorMaterialProperty(
|
||||
Cesium.Color.WHEAT.withAlpha(0.4)
|
||||
)
|
||||
}
|
||||
})
|
||||
},
|
||||
drawPointLabel(position,pointNum){
|
||||
//本质上就是添加一个点的实体
|
||||
return this.viewer.entities.add({
|
||||
name:'点几何对象',
|
||||
position:position,
|
||||
point:{
|
||||
color:Cesium.Color.WHEAT,
|
||||
pixelSize:5,
|
||||
outlineWidth:3,
|
||||
disableDepthTestDistance:Number.POSITIVE_INFINITY,
|
||||
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND//规定贴地
|
||||
},
|
||||
label:{
|
||||
text:pointNum,
|
||||
font:'30px sans-serif',
|
||||
fillColor:Cesium.Color.WHITE,
|
||||
outlineWidth:2,
|
||||
backgroundColor:Cesium.Color.BLACK,
|
||||
showBackground:true,
|
||||
style:Cesium.LabelStyle.FILL,
|
||||
verticalOrigin:Cesium.VerticalOrigin.BOTTOM,
|
||||
horizontalOrigin:Cesium.HorizontalOrigin.CENTER
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
drawPolyline(positions){
|
||||
if(positions.length<1) return
|
||||
return this.viewer.entities.add({
|
||||
name:'线几何对象',
|
||||
polyline:{
|
||||
position:positions,
|
||||
width:5.0,
|
||||
material:new Cesium.PolylineGlowMaterialProperty({
|
||||
color:Cesium.Color.WHITE
|
||||
}),
|
||||
depthFailMaterial:new Cesium.PolylineGlowMaterialProperty({
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -16,10 +16,12 @@ export default defineConfig(({ command, mode }) => {
|
|||
const env = loadEnv(mode, process.cwd())
|
||||
const viteEnv = wrapperEnv(env)
|
||||
const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY } = viteEnv
|
||||
|
||||
return {
|
||||
root,
|
||||
base: VITE_PUBLIC_PATH || '/',
|
||||
plugins: createVitePlugins(viteEnv, isBuild),
|
||||
|
||||
lintOnSave: false,
|
||||
resolve: {
|
||||
alias: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue