高德爬取瓦片和vue2利用

1、渲染瓦片地点

1. <template>
2.   <div class="command-center">
3.     <div id="mapContainer" ref="map" class="mapContainer"/>
4.   </div>
5. </template>
7. <script>
8. import Vue from 'vue'
9. import L from 'leaflet'
10. export default {
11.   data() {
12.     return {
13.       zoom: 7,
14.       center: [24.00000, 101.000000],
15.       markerGroup: null,
16.       boundaryGroup: null,
17.     }
18.   },
19.   mounted() {
20.     this.initMap()
21.   },
22.   beforeDestroy() {
23.   },
24.   methods: {
25.     initMap() {
26.       this.map = L.map(this.$refs.map, {
27.         attributionControl: false,
28.         zoomControl: false
29.       })
30.       this.map.setView(this.center, this.zoom)
31.       //内网瓦片地址
32.       let url = 'http://127.0.0.1:5000/tiles/{z}/{x}/{y}.png'
33.       this.$L.tileLayer(url, {
34.         minZoom: 7,
35.         maxZoom: 12
36.       }).addTo(this.map)
37.       this.markerGroup = this.$L.layerGroup().addTo(this.map)
38.       this.boundaryGroup = this.$L.layerGroup().addTo(this.map)
39.       // 监听地图缩放级别
40.       this.map.on('zoom', this.mapZoom)
41.       // 绘制点
42.       this.inputMarkers()
43.       //初始化地图描边
44.       this.miaobian()
45.     },
46.     miaobian() {
47.       // yunnan 是地图json，里面包含了边界经纬度
48.       const boundary = yunnan.features[0].geometry.coordinates[0][0].map(item => item.reverse())
49.       const boundaryLayer = this.$L.polygon(boundary, {
50.         color: '#366ef4',
51.         weight: 4,
52.         fillColor: '#ffffff00',
53.         fillOpacity: 0
54.       })
55.       this.boundaryGroup.addLayer(boundaryLayer)
56.     },
57.     // 监听地图缩放
58.     mapZoom() {
59.       this.zoom = this.map.getZoom()
60.     },
61.     // 构建地图标记
62.     async inputMarkers() {
63.       //this.stations是地图标记数据
64.       this.stations.forEach(item => {
65.         const marker = this.$L.marker([item.lat, item.lng], {
66.           icon: this.$L.icon({
67.             iconUrl: require('../assets/图标.png'),
68.             iconSize: [50, 50],
69.             iconAnchor: [25, 50], // 图标锚点（默认在左下角）
70.             popupAnchor: [0, -50]
71.           })
72.         })
73.         marker.bindTooltip(item.name, {
74.           permanent: true,
75.           className: 'marker-label'
76.         })
77.         marker.on('click', (event) => {
78.           this.stationMarkerClick(event, item, marker)
79.         })
80.         this.markerGroup.addLayer(marker)
81.       })
82.     },
83.     // 点击事件
84.     async stationMarkerClick(event, data, marker) {
86.     },
87.     // 获取电站列表
88.     async requestList() {
89.       try {
90.         const params = {}
91.         if (this.currentArea) {
92.           params.city = this.currentArea.name
93.           if (this.stationListAll && this.stationListAll.length > 0) {
94.             //直接遍历
95.             let stationList = [];
96.             for (var i = 0; i < this.stationListAll.length; i++) {
97.               if (this.stationListAll[i].city == params.city) {
98.                 stationList.push(this.stationListAll[i]);
99.               }
100.             }
101.             this.stationList = stationList
102.           } else {
103.             const res = await selectYnsxsdDianzhanInfo(params);
104.             this.stationList = res.data || []
105.           }
106.         } else {
107.           const res = await selectYnsxsdDianzhanInfo(params);
108.           this.stationList = res.data || [];
109.           this.stationListAll = JSON.parse(JSON.stringify(res.data));//防止引用
110.         }
111.       } catch (err) {
112.         this.$message.error(err.toString() )
113.         console.log(err)
114.       }
115.     },
116.   }
117. }
118. </script>
120. <style lang="scss" scoped>
121. </style>

复制代码

1、瓦片抓取和配置

利用python 检测，存在则从文件夹获取，不存在则从网络下载。
如果当地摆设则访问地点为 http://127.0.0.1:5000/tiles/1/1/1.png
第一次可以先抓取再举行摆设到nginx内网

1. import os
2. import requests
3. from flask import Flask, request, Response
5. app = Flask(__name__)
7. # 定义tiles文件夹路径
8. TILES_DIR = os.path.join(os.path.dirname(__file__), 'tiles')
11. @app.route('/tiles/<int:z>/<int:x>/<int:y>.png', methods=['GET'])
12. def get_tile(z, x, y):
13.     # 构造本地图片路径
14.     tile_path = os.path.join(TILES_DIR, str(z), str(x), f"{y}.png")
16.     # 如果图片存在，直接读取并返回
17.     if os.path.exists(tile_path):
18.         print('图片存在，直接读取并返回')
19.         with open(tile_path, 'rb') as f:
20.             return Response(f.read(), content_type='image/png')
22.     # 如果图片不存在，从URL下载并保存
23.     print('图片不存在，从URL下载并保存')
24.     print(tile_path)
25.     data = fetch_data(x, y, z)
26.     if isinstance(data, bytes):
27.         # 确保文件夹存在
28.         os.makedirs(os.path.dirname(tile_path), exist_ok=True)
29.         # 保存图片到本地
30.         with open(tile_path, 'wb') as f:
31.             f.write(data)
32.         return Response(data, content_type='image/png')
33.     else:
34.         return data
37. def fetch_data(x, y, z):
38.     url = f'https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
39.     response = requests.get(url)
40.     if response.status_code == 200:
41.         return response.content
42.     else:
43.         return f"请求失败，状态码: {response.status_code}"
46. if __name__ == '__main__':
47.     app.run(host='0.0.0.0', port=5000)

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。