|
@@ -3,118 +3,117 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { ref, onMounted, onUnmounted } from 'vue';
|
|
|
|
|
-// 引入 Leaflet
|
|
|
|
|
-import L from 'leaflet';
|
|
|
|
|
-import 'leaflet/dist/leaflet.css';
|
|
|
|
|
-// Ant Design Vue 图标
|
|
|
|
|
-
|
|
|
|
|
-// --- 1. 组件引用和状态定义 ---
|
|
|
|
|
-const mapContainer = ref(null);
|
|
|
|
|
-let map = null; // Leaflet 地图实例
|
|
|
|
|
-
|
|
|
|
|
-// --- 2. 瓦片图层配置 ---
|
|
|
|
|
-const tileLayers = {
|
|
|
|
|
- custom: {
|
|
|
|
|
- name: '基准瓦片',
|
|
|
|
|
- layer: null,
|
|
|
|
|
- // url: 'https://shaanxizhxx.chinamine-safety.gov.cn/zh1/8/33/17.png',
|
|
|
|
|
- url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
|
|
|
|
|
- options: {
|
|
|
|
|
- maxZoom: 18,
|
|
|
|
|
- // attribution: '',
|
|
|
|
|
- attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
|
|
|
- // crossOrigin: true,
|
|
|
|
|
|
|
+ import { ref, onMounted, onUnmounted } from 'vue';
|
|
|
|
|
+ // 引入 Leaflet
|
|
|
|
|
+ import L from 'leaflet';
|
|
|
|
|
+ import 'leaflet/dist/leaflet.css';
|
|
|
|
|
+ // Ant Design Vue 图标
|
|
|
|
|
+
|
|
|
|
|
+ // --- 1. 组件引用和状态定义 ---
|
|
|
|
|
+ const mapContainer = ref(null);
|
|
|
|
|
+ let map = null; // Leaflet 地图实例
|
|
|
|
|
+
|
|
|
|
|
+ // --- 2. 瓦片图层配置 ---
|
|
|
|
|
+ const tileLayers = {
|
|
|
|
|
+ custom: {
|
|
|
|
|
+ name: '基准瓦片',
|
|
|
|
|
+ layer: null,
|
|
|
|
|
+ url: 'https://shaanxizhxx.chinamine-safety.gov.cn/zh1/8/33/17.png',
|
|
|
|
|
+ // url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
|
|
|
|
|
+ options: {
|
|
|
|
|
+ maxZoom: 18,
|
|
|
|
|
+ // attribution: '',
|
|
|
|
|
+ attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
|
|
|
+ // crossOrigin: true,
|
|
|
|
|
+ },
|
|
|
},
|
|
},
|
|
|
- },
|
|
|
|
|
- satellite: {
|
|
|
|
|
- name: '卫星图',
|
|
|
|
|
- layer: null,
|
|
|
|
|
- url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
|
|
|
|
|
- options: {
|
|
|
|
|
- maxZoom: 18,
|
|
|
|
|
- attribution: '© Esri',
|
|
|
|
|
|
|
+ satellite: {
|
|
|
|
|
+ name: '卫星图',
|
|
|
|
|
+ layer: null,
|
|
|
|
|
+ url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
|
|
|
|
|
+ options: {
|
|
|
|
|
+ maxZoom: 18,
|
|
|
|
|
+ attribution: '© Esri',
|
|
|
|
|
+ },
|
|
|
},
|
|
},
|
|
|
- },
|
|
|
|
|
-};
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-// 添加一个风险点示例(类似第一张图的红色气泡)
|
|
|
|
|
-
|
|
|
|
|
|
|
+ gaode: {
|
|
|
|
|
+ name: '高德地图',
|
|
|
|
|
+ layer: null,
|
|
|
|
|
+ url: 'https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
|
|
|
|
|
+ options: {
|
|
|
|
|
+ maxZoom: 18,
|
|
|
|
|
+ subdomains: ['1', '2', '3', '4'], // 高德底图服务器集群
|
|
|
|
|
+ attribution: '© 高德地图', // 版权声明(必填,遵守使用规范)
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ };
|
|
|
|
|
|
|
|
-// --- 3. 地图初始化 ---
|
|
|
|
|
-onMounted(() => {
|
|
|
|
|
- initMap();
|
|
|
|
|
-});
|
|
|
|
|
|
|
+ // 添加一个风险点示例(类似第一张图的红色气泡)
|
|
|
|
|
|
|
|
-onUnmounted(() => {
|
|
|
|
|
- if (map) {
|
|
|
|
|
- map.remove();
|
|
|
|
|
- }
|
|
|
|
|
-});
|
|
|
|
|
-
|
|
|
|
|
-// 初始化地图
|
|
|
|
|
-function initMap() {
|
|
|
|
|
- if (!mapContainer.value) return;
|
|
|
|
|
|
|
+ // --- 3. 地图初始化 ---
|
|
|
|
|
+ onMounted(() => {
|
|
|
|
|
+ initMap();
|
|
|
|
|
+ });
|
|
|
|
|
|
|
|
- // 创建地图实例,设置太原市中心和初始缩放级别
|
|
|
|
|
- map = L.map(mapContainer.value, {
|
|
|
|
|
- center: [35.841, 108.94], // 西安市中心坐标 [纬度, 经度]
|
|
|
|
|
- zoom: 7, // 初始缩放级别,适合城市级别查看
|
|
|
|
|
- zoomControl: false, // 显示缩放控件
|
|
|
|
|
- attributionControl: false, // 显示属性控件
|
|
|
|
|
|
|
+ onUnmounted(() => {
|
|
|
|
|
+ if (map) {
|
|
|
|
|
+ map.remove();
|
|
|
|
|
+ }
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- // 初始化所有瓦片图层
|
|
|
|
|
- initTileLayers();
|
|
|
|
|
|
|
+ // 初始化地图
|
|
|
|
|
+ function initMap() {
|
|
|
|
|
+ if (!mapContainer.value) return;
|
|
|
|
|
|
|
|
- // 默认显示自定义底图
|
|
|
|
|
- // tileLayers.custom.layer.addTo(map);
|
|
|
|
|
- // tileLayers.satellite.layer.addTo(map);
|
|
|
|
|
|
|
+ // 创建地图实例,设置太原市中心和初始缩放级别
|
|
|
|
|
+ map = L.map(mapContainer.value, {
|
|
|
|
|
+ center: [35.841, 108.94], // 西安市中心坐标 [纬度, 经度]
|
|
|
|
|
+ zoom: 7, // 初始缩放级别,适合城市级别查看
|
|
|
|
|
+ zoomControl: false, // 显示缩放控件
|
|
|
|
|
+ attributionControl: false, // 显示属性控件
|
|
|
|
|
+ });
|
|
|
|
|
|
|
|
|
|
+ // 初始化所有瓦片图层
|
|
|
|
|
+ initTileLayers();
|
|
|
|
|
|
|
|
- L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
|
|
|
|
|
- subdomains: ['1', '2', '3', '4'], // 高德底图服务器集群
|
|
|
|
|
- attribution: '© 高德地图' // 版权声明(必填,遵守使用规范)
|
|
|
|
|
- }).addTo(map);
|
|
|
|
|
|
|
+ // 默认显示自定义底图
|
|
|
|
|
+ tileLayers.gaode.layer.addTo(map);
|
|
|
|
|
+ // tileLayers.custom.layer.addTo(map);
|
|
|
|
|
+ // tileLayers.satellite.layer.addTo(map);
|
|
|
|
|
|
|
|
- // 保留之前的风险点示例
|
|
|
|
|
- L.circleMarker([39.9, 116.4], { radius: 20, color: 'red', fillColor: '#f03', fillOpacity: 0.5 })
|
|
|
|
|
- .addTo(map)
|
|
|
|
|
- .bindPopup("风险值: 35");
|
|
|
|
|
|
|
+ // 保留之前的风险点示例
|
|
|
|
|
+ // L.circleMarker([39.9, 116.4], { radius: 20, color: 'red', fillColor: '#f03', fillOpacity: 0.5 }).addTo(map).bindPopup('风险值: 35');
|
|
|
|
|
|
|
|
- initGeoJSON();
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ initGeoJSON();
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
-// 初始化瓦片图层
|
|
|
|
|
-function initTileLayers() {
|
|
|
|
|
- Object.keys(tileLayers).forEach((key) => {
|
|
|
|
|
- const config = tileLayers[key];
|
|
|
|
|
- config.layer = L.tileLayer(config.url, config.options);
|
|
|
|
|
- });
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ // 初始化瓦片图层
|
|
|
|
|
+ function initTileLayers() {
|
|
|
|
|
+ Object.keys(tileLayers).forEach((key) => {
|
|
|
|
|
+ const config = tileLayers[key];
|
|
|
|
|
+ config.layer = L.tileLayer(config.url, config.options);
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
-async function initGeoJSON() {
|
|
|
|
|
- const response = await fetch('/js/shanxi.geo.json');
|
|
|
|
|
- const ShanXiGeoJSON = await response.json();
|
|
|
|
|
- L.geoJSON(ShanXiGeoJSON, {
|
|
|
|
|
- style: function () {
|
|
|
|
|
- return { color: '#ff9100' };
|
|
|
|
|
- },
|
|
|
|
|
- }).addTo(map);
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ async function initGeoJSON() {
|
|
|
|
|
+ const response = await fetch('/js/shanxi.geo.json');
|
|
|
|
|
+ const ShanXiGeoJSON = await response.json();
|
|
|
|
|
+ L.geoJSON(ShanXiGeoJSON, {
|
|
|
|
|
+ style: function () {
|
|
|
|
|
+ return { color: '#ff9100' };
|
|
|
|
|
+ },
|
|
|
|
|
+ }).addTo(map);
|
|
|
|
|
+ }
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
|
-.map-container {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- position: fixed;
|
|
|
|
|
- top: 0;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- z-index: @simple-map-z-index;
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ .map-container {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ z-index: @simple-map-z-index;
|
|
|
|
|
+ }
|
|
|
</style>
|
|
</style>
|