<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>
leaflet 多边形覆盖
最新推荐文章于 2023-11-07 17:00:51 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)