Browse Source

feat: MapLayer 开启 globe 并以中国总览相机初始化

新增 MAP_OVERVIEW / MAP_VIEW,minZoom 1.5,projection globe。
main
xiaosi 3 weeks ago
parent
commit
19b4cb936d
  1. 11
      src/config/map.js
  2. 9
      src/layout/MapLayer.vue

11
src/config/map.js

@ -5,6 +5,17 @@ export const MAP_STYLES = {
street: 'mapbox://styles/mapbox/streets-v12', street: 'mapbox://styles/mapbox/streets-v12',
} }
/** 监控全球总览:固定中国居中,不跟 env 贵州中心 */
export const MAP_OVERVIEW = {
center: [104.0, 35.0],
zoom: 1.8,
}
export const MAP_VIEW = {
detailZoom: 16,
minZoom: 1.5,
}
export default { export default {
token, token,
center: [ center: [

9
src/layout/MapLayer.vue

@ -1,7 +1,7 @@
<script setup> <script setup>
import { onMounted, onUnmounted } from 'vue' import { onMounted, onUnmounted } from 'vue'
import mapboxgl from 'mapbox-gl' import mapboxgl from 'mapbox-gl'
import mapConfig, { MAP_STYLES } from '@/config/map'
import mapConfig, { MAP_STYLES, MAP_OVERVIEW, MAP_VIEW } from '@/config/map'
import commonRefs from '@/utils/commonRefs' import commonRefs from '@/utils/commonRefs'
import mapHelper from '@/core/mapHelper' import mapHelper from '@/core/mapHelper'
import 'mapbox-gl/dist/mapbox-gl.css' import 'mapbox-gl/dist/mapbox-gl.css'
@ -21,10 +21,11 @@ function initMap() {
map = new mapboxgl.Map({ map = new mapboxgl.Map({
container: 'map', container: 'map',
style: MAP_STYLES.satellite, style: MAP_STYLES.satellite,
center: mapConfig.center,
zoom: mapConfig.zoom,
minZoom: 3,
center: MAP_OVERVIEW.center,
zoom: MAP_OVERVIEW.zoom,
minZoom: MAP_VIEW.minZoom,
attributionControl: false, attributionControl: false,
projection: 'globe',
}) })
commonRefs.setRef('map', map) commonRefs.setRef('map', map)

Loading…
Cancel
Save