|
|
@@ -7,7 +7,6 @@
|
|
|
// 引入 Leaflet
|
|
|
import L from 'leaflet';
|
|
|
import 'leaflet/dist/leaflet.css';
|
|
|
- import TaiyuanGeoJSON from './taiyuan.json';
|
|
|
// Ant Design Vue 图标
|
|
|
|
|
|
// --- 1. 组件引用和状态定义 ---
|
|
|
@@ -16,6 +15,16 @@
|
|
|
|
|
|
// --- 2. 瓦片图层配置 ---
|
|
|
const tileLayers = {
|
|
|
+ custom: {
|
|
|
+ name: '基准瓦片',
|
|
|
+ layer: null,
|
|
|
+ url: 'https://shaanxizhxx.chinamine-safety.gov.cn/zh1/{y}/{x}/{z}.png',
|
|
|
+ options: {
|
|
|
+ maxZoom: 18,
|
|
|
+ attribution: '',
|
|
|
+ // crossOrigin: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
satellite: {
|
|
|
name: '卫星图',
|
|
|
layer: null,
|
|
|
@@ -44,7 +53,7 @@
|
|
|
|
|
|
// 创建地图实例,设置太原市中心和初始缩放级别
|
|
|
map = L.map(mapContainer.value, {
|
|
|
- center: [37.873, 112.564], // 太原市中心坐标 [纬度, 经度]
|
|
|
+ center: [35.841, 108.94], // 西安市中心坐标 [纬度, 经度]
|
|
|
zoom: 7, // 初始缩放级别,适合城市级别查看
|
|
|
zoomControl: false, // 显示缩放控件
|
|
|
attributionControl: false, // 显示属性控件
|
|
|
@@ -67,8 +76,10 @@
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- function initGeoJSON() {
|
|
|
- L.geoJSON(TaiyuanGeoJSON, {
|
|
|
+ async function initGeoJSON() {
|
|
|
+ const response = await fetch('/js/shanxi.geo.json');
|
|
|
+ const ShanXiGeoJSON = await response.json();
|
|
|
+ L.geoJSON(ShanXiGeoJSON, {
|
|
|
style: function () {
|
|
|
return { color: '#ff9100' };
|
|
|
},
|