Leaflet初体验

Leaflet是什么?

一个开源并且对移动端友好的交互式地图 JavaScript 库

Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库。 它大小仅仅只有 42 KB of JS, 并且拥有绝大部分开发者所需要的所有地图特性 。
Leaflet 简单、高效并且易用。 它可以高效的运行在桌面和移动平台, 拥有着大量的 扩展插件、 优秀的文档、简单易用的 API 和完善的案例, 以及可读性较好的 源码 。

1. 项目初始化参考：GeoServer+vue2+leaflet构建地图服务

1.1 需要注意的是经纬度填写时，纬度在前经度在后！！！

2. 坐标获取：

2.1 高德坐标拾取器

2.2 geojson.io

2.1 加载高德地图并展示成都市为中心点

<template>
    <div class="map-container" id="map-container"></div>
</template>
<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import gcoord from 'gcoord';
export default {
    name: 'MapChengDu',
    data() {
        return {
            map: '',
            gaodeUrl: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
        }
    },
    mounted() {
        this.init()
    },

    methods: {
        init() {
            this.map = L.map("map-container", { zoomControl: false }); //添加{zoomControl:false}去掉自带缩放控件
            L.tileLayer(this.gaodeUrl, {
                maxZoom: 18, //超过18会模糊无法显示
            }).addTo(this.map);
            // 高德地图坐标转换
            // gaodeJson 是成都市的地图
            let gaodeJson = gcoord.transform(
                // [30.49, 106.04], //经纬度坐标
                [30.572961, 104.066301], //经纬度坐标
                gcoord.GCJ02, //当前坐标系
                gcoord.WGS84 //目标坐标系
            )
            this.map.setView(gaodeJson, 10);
        },

    },
}
</script>

<style>
.map-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
</style>

2.2 添加一个marker标记点位

// markerJson是指定点位标记的坐标
let markerJson = gcoord.transform(
    [30.53556, 104.061185], //经纬度坐标
    gcoord.GCJ02,   //当前坐标系
    gcoord.WGS84 //目标坐标系
)
// 添加单个并添加备注
// L.marker(markerJson, {
//     title: '成都市知识产权金融大厦',
// }).addTo(this.map)
// 不添加备注
L.marker(markerJson).addTo(this.map)

2.3 添加多个marker标记点位

// 点位标记的坐标集合
let latlng = [
    { lat: 30.53556, lng: 104.061185 },
    { lat: 30.48893, lng: 104.068467 }
]

// 循环添加多个marker标记点位
for (let i = 0; i < latlng.length; i++) {
    const lat = latlng[i].lat;
    const lng = latlng[i].lng;
    L.marker([lat, lng]).addTo(this.map)
}

2.4 读取Json数据marker标记点位

2.4.1 添加一个json文件

[
    { "lat": 30.536091, "lng": 104.061078, "title": "111" },
    { "lat": 30.48893, "lng": 104.068467, "title": "222" }
]

2.4.2 页面引入该json文件并读取写入marker标记点位

// 引入json
import Markerjson from '../data/marker.json'

// 读取写入`marker`标记点位
for (let i = 0; i < Markerjson.length; i++) {
	// bindPopup绑定一个提示弹窗
    L.marker([Markerjson[i].lat, Markerjson[i].lng]).addTo(this.map).bindPopup(Markerjson[i].title)
}

2.5 各种小控件的使用

2.5.1 缩放比例控件

// 添加缩放比例控件 
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(this.map);
L.control.scale().addTo(this.map);

2.5.2 定位控件

2.5.2.1 安装Leaflet的定位插件 GitHub地址

npm install leaflet.locatecontrol

// 引入相关定位插件
import 'leaflet.locatecontrol';
import 'leaflet.locatecontrol/dist/L.Control.Locate.min.css';
// 添加定位控件
L.control
    .locate({
        position: 'bottomleft', // 控件的位置
        drawCircle: true, // 绘制一个显示位置精度的圆圈
    })
    .addTo(this.map);

---------------------------------END---------------------------------