leaflet 多边形覆盖

最新推荐文章于 2023-11-07 17:00:51 发布

liuxi_happy

最新推荐文章于 2023-11-07 17:00:51 发布

阅读量153

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/liuxi_happy/article/details/131230412

版权

该代码段展示了如何在Vue组件中使用Leaflet库加载地图，并通过axios获取地图数据，包括外框、砂体和镂空数据。地图初始化后，添加了矩形背景、多边形覆盖物以及自定义标记。同时，代码还监听了Vuexstore中的变化，动态更新地图数据。

摘要由CSDN通过智能技术生成

	<div class="container">
		<div id="bigmap"></div>
	</div>
</template>

<script>
import * as L from "leaflet";
import "leaflet-html-legend";
import "leaflet/dist/leaflet.css";
import icon from "leaflet/dist/images/marker-icon.png" // 引入leaflet默认图标
import iconShadow from "leaflet/dist/images/marker-shadow.png" // 引入leaflet默认图标
import defaultMark from '../../assets/left/dna.png'
	export default {
		name: 'LeafletMap',
		data() {
			return {
				bigmap: null,
        		defaultMark,
				mapData:[],
                mapList:[],
				mapboxList:[],
				maphollowOutList:[],
			}
		},
		mounted() {
            this.getMapBoxData()
			
		},
		methods: {
			 // 获取地图外框体数据
			 async getMapBoxData(){
                const {code, data} = await this.axios.get('dna/well/mapData/listGroup', {
                    params: {
                        mapName: '陇东地区延长组长7_2',  
                        indicatorsType:1
                    }
                });
                if(code == 0){
                    this.mapboxList= data
                    // this.initMap()
					this.getMapData()
                    console.log(Object.values(data))
                }
            },
            // 获取地图砂体数据
            async getMapData(){
                const {code, data} = await this.axios.get('dna/well/mapData/listGroup', {
                    params: {
                        mapName: '陇东地区延长组长7_2',  
                        indicatorsType:2
                    }
                });
                if(code == 0){
                    this.mapList= data

                    // this.initMap()
					this.getMaphollowOutData()
                    console.log(Object.values(data))
                }
            },
			
			 // 获取地图镂空数据
			 async getMaphollowOutData(){
                const {code, data} = await this.axios.get('dna/well/mapData/listGroup', {
                    params: {
                        mapName: '陇东地区延长组长7_2',  
                        indicatorsType:3
                    }
                });
                if(code == 0){
                    this.maphollowOutList= data
					this.mapList = [...this.maphollowOutList,this.mapList]
                    this.initMap()
                    console.log(Object.values(data))
                }
            },
			// 使用id为vue-leaflet的div容器初始化地图
			initMap() {
				this.bigmap = L.map("bigmap", {
					center: [36.746933, 106.20772], // 地图中心
					zoom: 8, //缩放比列
					zoomControl: false, //禁用 + - 按钮
					doubleClickZoom: false, // 禁用双击放大
					attributionControl: false, // 移除右下角leaflet标识
				});
				let gaoDeLayer = L.tileLayer(
					"http://10.78.56.8/ArcGIS/rest/services/CQTerrainBaseMap/MapServer/tile/{z}/{y}/{x}"
				)
				gaoDeLayer.addTo(this.bigmap);
				// 矩形背景色
				L.rectangle([
				[37.27613333, 106.4944583],
				[34.92549167, 106.5440528],
				[34.95300833, 108.9911944],
				[37.27478056, 109.0339222]
				], {color: "rgba(155,194,230)", weight: 1,fillOpacity: 1,}).addTo(this.bigmap);
                this.mapList.map((res)=>{
                    var polygon = L.polygon(
                    [res],
                    {
                        color: "",
                        fillColor: "rgb(255,206,63)",
                        fillOpacity: 1,
                        weight: 1,
                    }).addTo(this.bigmap);
                    this.bigmap.fitBounds(polygon.getBounds());
                })
				this.maphollowOutList.map((res)=>{
                    var polygon = L.polygon(
                    [res],
                    {
                        color: "",
                        fillColor: "rgba(155,194,230)",
                        fillOpacity: 1,
                        weight: 1,
                    }).addTo(this.bigmap);
                    this.bigmap.fitBounds(polygon.getBounds());
                })
                this.mapData.map((item)=>{
					let svgContent = `<div style="width:100px;height:20px;display:flex;align-items:center"><span style='width:15px;height:15px;border-radius:50%;margin-right:5px; display: inline-block;background:red'></span><span style='font-weight:bold;font-size:18px;z-index:9999'>${item.name}</span></div>`;
					L.marker([item.lat, item.lng], {
					icon: new L.divIcon({
						iconSize: [30, 30],
						className: "custom-color-icon",
						html: svgContent
					})
				}).addTo(this.bigmap)
				})	
			}
		},
		watch:{
			'$store.state.wellCoordinates.wellList'(newVal,oldVal){
			//对数据执行操作
			if(newVal){
				this.mapData = []
				this.mapData = newVal
				
				this.$nextTick(()=>{
					if(newVal){
						this.bigmap.remove();
					} 
					this.initMap(); 
				})
				
			}
		}

		}

	}
</script>
<style scoped>
	.anim-tooltip{
		border:none;
		color:black;
		font-weight: bold;
		background-image: none;
	}
	.container {
		width: 100%;
		height: 100%;
	}

	#bigmap {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		border: 1px solid #42B983;
		position: relative;
	}
</style>