Leaflet交互式地图库

原创已于 2025-01-08 14:35:41 修改 · 149 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2021-05-13 14:52:27 首次发布

后台管理同时被 2 个专栏收录

32 篇文章

订阅专栏

大屏可视化

22 篇文章

订阅专栏

 Leaflet是一个交互式地图库
 瓦片地图

Leaflet交互式地图库

npm install leaflet --save

在这里插入图片描述

初始化地图

<template>
    <div id="map"></div>
</template>
<script lang='ts'>
import { reactive,toRefs,onBeforeMount,onMounted} from 'vue'
import { useRouter,useRoute} from 'vue-router'//引入路由
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
export default {
    name: '',
      setup() {
let router = useRouter(),route = useRoute();
const initMap = () => {
  let map = L.map('map', {
    center: [29.44916482692468, 106.47399902343751],//中心坐标
    zoom: null,//初始缩放，因为在下文写了展示全地图，所以这里不设置，也可以设置
    minZoom: 3,
    maxZoom: 18,
    zoomControl: true, //缩放组件
    // attributionControl: false, //去掉右下角logol
  })
  
// let map=L.map("map").setview([29.44916482692468, 106.47399902343751],9);
}
onMounted(() => {
  initMap()
})
      }
  };
</script>
<style scoped>
#map {
  height: 600px;
  width: 600px;
}
</style>

leaflet布局，图层

L.tileLayer加载底图,第一个参数为底图资源，第二个参数中attribution为版权

   L.tileLayer(
        "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
        {
          attribution:
            '&copy; <p>OpenStreetMap</p> contributors',
        }
      ).addTo(map);

在这里插入图片描述

<template>
    <div id="map"></div>
</template>
<script lang='ts'>
import { reactive,toRefs,onBeforeMount,onMounted} from 'vue'
import { useRouter,useRoute} from 'vue-router'//引入路由
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
export default {
    name: '',
      setup() {
let router = useRouter(),route = useRoute();
const initMap = () => {
  let map = L.map('map', {
    center: [29.44916482692468, 106.47399902343751],//中心坐标
    zoom: null,//初始缩放，因为在下文写了展示全地图，所以这里不设置，也可以设置
    minZoom: 3,
    maxZoom: 18,
    zoomControl: true, //缩放组件
    // attributionControl: false, //去掉右下角logol
  })
  L.tileLayer(
        "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
        {
          attribution:
            '&copy; <p>OpenStreetMap</p> contributors',
        }
  ).addTo(map);
}
onMounted(() => {
  initMap()
})
      }
  };
</script>
<style scoped>
#map {
  height: 600px;
  width: 600px;
}
</style>

leaflet标记

使用L.marker（）第一个参数为经纬度，第二个参数为自定义标记图标。
addTo()添加到图层；
 bindPopup（）显示弹框内容，openPopup（）自动打开弹框。
 弹框也可使用bindTooltip（）

let markerIcon = L.icon({
    iconUrl: "https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon.png",
     iconSize: [20, 30],
    }); 
 let marker = L.marker([29.44916482692468, 106.47399902343751], { icon: markerIcon })
        .addTo(map)
        .bindPopup("标记")
        .openPopup();
//--------------------------------
//marker.bindTooltip('我是标记', { //添加提示文字
//  permanent: true, //是永久打开还是悬停打开
//direction: 'top' //方向
//}).openTooltip(); //在图层打开

在这里插入图片描述

<template>
    <div id="map"></div>
</template>
<script lang='ts'>
import { reactive,toRefs,onBeforeMount,onMounted} from 'vue'
import { useRouter,useRoute} from 'vue-router'//引入路由
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
export default {
    name: '',
      setup() {
let router = useRouter(),route = useRoute();
const initMap = () => {
  let map = L.map('map', {
    center: [29.44916482692468, 106.47399902343751],//中心坐标
    zoom: null,//初始缩放，因为在下文写了展示全地图，所以这里不设置，也可以设置
    minZoom: 3,
    maxZoom: 18,
    zoomControl: true, //缩放组件
    // attributionControl: false, //去掉右下角logol
  })
  L.tileLayer(
        "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
        {
          attribution:
            '&copy; <p>OpenStreetMap</p> contributors',
        }
  ).addTo(map);
  let markerIcon = L.icon({
    iconUrl: "https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon.png",
     iconSize: [20, 30],
    }); 
 let marker = L.marker([29.44916482692468, 106.47399902343751], { icon: markerIcon })
        .addTo(map)
        .bindPopup("标记")
        .openPopup();
}
onMounted(() => {
  initMap()
})
      }
  };
</script>
<style scoped>
#map {
  height: 600px;
  width: 600px;
}
</style>

leaflet线段，形状

线段：使用 L.polyline（）第一个参数为线段两端的位置坐标，
第二个参数为线段的样式。 同样也可使用弹框来做数据展示。

let line = L.polyline([[29.44, 106.473], [27.595, 106.9]],
         {
           opacity: 1,
           color: 'red'
         }).addTo(map)

在这里插入图片描述

<template>
    <div id="map"></div>
</template>
<script lang='ts'>
import { reactive,toRefs,onBeforeMount,onMounted} from 'vue'
import { useRouter,useRoute} from 'vue-router'//引入路由
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
export default {
    name: '',
      setup() {
let router = useRouter(),route = useRoute();
const initMap = () => {
  let map = L.map('map', {
    center: [29.44916482692468, 106.47399902343751],//中心坐标
    zoom: null,//初始缩放，因为在下文写了展示全地图，所以这里不设置，也可以设置
    minZoom: 3,
    maxZoom: 18,
    zoomControl: true, //缩放组件
    // attributionControl: false, //去掉右下角logol
  })
  L.tileLayer(
        "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
        {
          attribution:
            '&copy; <p>OpenStreetMap</p> contributors',
        }
  ).addTo(map);
  let markerIcon = L.icon({
    iconUrl: "https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon.png",
     iconSize: [20, 30],
    }); 
 let marker = L.marker([29.44916482692468, 106.47399902343751], { icon: markerIcon })
        .addTo(map)
        .bindPopup("标记")
        .openPopup();
        let line = L.polyline([[29.44, 106.473], [27.595, 106.9]],
         {
           opacity: 1,
           color: 'red'
         }).addTo(map)
        //    L.circle([29.44, 106.473], {
        //   color: "black", //轨迹颜色
        //   fillColor: "pink", //默认和轨迹色一样
        //   fillOpacity: 0.3, //圆的填充色
        //   radius: 500 * 100, //半径，单位为米
        // }).addTo(map);
        // let rectangle = L.rectangle(
        //  [29.44, 106.473],
        //   { color: "pink" }
        // ).addTo(map);
}
onMounted(() => {
  initMap()
})
      }
  };
</script>
<style scoped>
#map {
  height: 600px;
  width: 600px;
}
</style>

 圆形：使用 L.circle（），对于圆形只需要一个坐标和圆的半径；
 第一个参数为圆点，第二个参数为圆的样式。同样也可使用弹框来做数据展示。

  L.circle([29.44, 106.473], {
          color: "black", //轨迹颜色
          fillColor: "pink", //默认和轨迹色一样
          fillOpacity: 0.3, //圆的填充色
          radius: 500 * 100, //半径，单位为米
        }).addTo(map);

在这里插入图片描述

<template>
    <div id="map"></div>
</template>
<script lang='ts'>
import { reactive,toRefs,onBeforeMount,onMounted} from 'vue'
import { useRouter,useRoute} from 'vue-router'//引入路由
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
export default {
    name: '',
      setup() {
let router = useRouter(),route = useRoute();
const initMap = () => {
  let map = L.map('map', {
    center: [29.44916482692468, 106.47399902343751],//中心坐标
    zoom: null,//初始缩放，因为在下文写了展示全地图，所以这里不设置，也可以设置
    minZoom: 3,
    maxZoom: 18,
    zoomControl: true, //缩放组件
    // attributionControl: false, //去掉右下角logol
  })
  L.tileLayer(
        "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
        {
          attribution:
            '&copy; <p>OpenStreetMap</p> contributors',
        }
  ).addTo(map);
  let markerIcon = L.icon({
    iconUrl: "https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon.png",
     iconSize: [20, 30],
    }); 
 let marker = L.marker([29.44916482692468, 106.47399902343751], { icon: markerIcon })
        .addTo(map)
        .bindPopup("标记")
        .openPopup();
        // let line = L.polyline([[29.44, 106.473], [27.595, 106.9]],
        //  {
        //    opacity: 1,
        //    color: 'red'
        //  }).addTo(map)
           L.circle([29.44, 106.473], {
          color: "black", //轨迹颜色
          fillColor: "pink", //默认和轨迹色一样
          fillOpacity: 0.3, //圆的填充色
          radius: 500 * 100, //半径，单位为米
        }).addTo(map);
        let rectangle = L.rectangle(
         [29.44, 106.473],
          { color: "pink" }
        ).addTo(map);
}
onMounted(() => {
  initMap()
})
      }
  };
</script>
<style scoped>
#map {
  height: 600px;
  width: 600px;
}
</style>

leaflet事件

点击获取到的e.latlng是所点击位置的经纬度坐标。
可使用map.setView（）重置中心位置和缩放倍数。

在以上的部分中，需要用到坐标的都在事件中进行获取，
可以用数组收集起来展示多边形。

let arrLatlng = [];
map.on("click", function (e) {
        let latlng = e.latlng;
        map.setView(latlng, 7);
        //动态线段
        arrLatlng.push(latlng);
        if (arrLatlng.length > 1) {
          // 线段 连续线段--------------------------------------
          let line = L.polyline(
            [arrLatlng[arrLatlng.length - 2], arrLatlng[arrLatlng.length - 1]],
            {
              opacity: 1,
              color: "green",
            }
          ).addTo(map);
        }
}）

请添加图片描述

<template>
    <div id="map"></div>
</template>
<script lang='ts'>
import { reactive,toRefs,onBeforeMount,onMounted} from 'vue'
import { useRouter,useRoute} from 'vue-router'//引入路由
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
export default {
    name: '',
      setup() {
let router = useRouter(),route = useRoute();
const initMap = () => {
  let map = L.map('map', {
    center: [29.44916482692468, 106.47399902343751],//中心坐标
    zoom: null,//初始缩放，因为在下文写了展示全地图，所以这里不设置，也可以设置
    minZoom: 3,
    maxZoom: 18,
    zoomControl: true, //缩放组件
    // attributionControl: false, //去掉右下角logol
  })
  L.tileLayer(
        "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
        {
          attribution:
            '&copy; <p>OpenStreetMap</p> contributors',
        }
  ).addTo(map);
  let markerIcon = L.icon({
    iconUrl: "https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon.png",
     iconSize: [20, 30],
    }); 
 let marker = L.marker([29.44916482692468, 106.47399902343751], { icon: markerIcon })
        .addTo(map)
        .bindPopup("标记")
        .openPopup();
  
  
    let arrLatlng = [];
map.on("click", function (e) {
        let latlng = e.latlng;
        map.setView(latlng, 7);
        //动态线段
        arrLatlng.push(latlng);
        if (arrLatlng.length > 1) {
          // 线段 连续线段--------------------------------------
          let line = L.polyline(
            [arrLatlng[arrLatlng.length - 2], arrLatlng[arrLatlng.length - 1]],
            {
              opacity: 1,
              color: "blue",
            }
          ).addTo(map);
        }
})
}
onMounted(() => {
  initMap()
})
      }
  };
</script>
<style scoped>
#map {
  height: 600px;
  width: 600px;
}
</style>

初始化综合地图

在这里插入图片描述

<template>
 <div class="leaflet">
    <div class="container">
      <div id="map" class="map"></div>
    </div>
 </div>
</template>
<script>
import L from "leaflet";
import 'leaflet/dist/leaflet.css';
import 'leaflet.pm';
import 'leaflet.pm/dist/leaflet.pm.css';
export default {
  name:'AMap',
  data() {
    return {
      map:""
    }
  },
  methods: {
    
    initMap(){
        this.map = L.map("map", {
        center: [40.02404009136253, 116.50641060224784], // 地图中心
        zoom: 14, //缩放比列
        zoomControl: true, //禁用 + - 按钮
        doubleClickZoom: true, // 禁用双击放大
        attributionControl: true // 移除右下角leaflet标识
      });
      let name = L.tileLayer(
        "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
      ).addTo(this.map);
      //   this.map.removeLayer(name)  // 移除图层
      // add leaflet.pm controls with some options to the map
      this.map.pm.addControls({
        position: 'topleft',
        drawCircle: false,
      });
    }
  },
  mounted(){
   this.initMap()
  }
}
</script>

<style scoped>
.leaflet{
  width: 1000px;
  height: 600px;
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
  left: 50.1%;
  top: 300px;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid #999;
}
.map {
  width: 100%;
  height: calc(100%);
  z-index: 1;
}
</style>

leaflet底图切换

在这里插入代码片

参考