《Leaflet 基础知识点》- 在 Vue 中如何使用

目录

一、安装

二、引入

三、地图容器初始化

四、完整示例

---

一、安装

npm i leaflet

二、引入

main.js 中全局引入

// 引入 leaflet 样式
import 'leaflet/dist/leaflet.css'
// 引入 leaflet js 文件
import * as L from 'leaflet/dist/leaflet'

三、地图容器初始化

//初始化地图容器
let map = L.map('map', {
    //参考坐标系
    crs: L.CRS.EPSG4326,
    //不添加属性说明控件
    attributionControl: false,
    //限制显示地理范围
    maxBounds: L.latLngBounds(L.latLng(-180, -180), L.latLng(180, 180)),
});

四、完整示例

index.vue 示例中初始化地图容器，添加矢量天地图

<template>
    <div id="map" class="map-main">
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 地图容器
            map: null
        }
    },
    methods: {


    },
    mounted() {
        //初始化地图容器
        this.map = L.map('map', {
            //参考坐标系
            crs: L.CRS.EPSG4326,
            //不添加属性说明控件
            attributionControl: false,
            //限制显示地理范围
            maxBounds: L.latLngBounds(L.latLng(-180, -180), L.latLng(180, 180)),
        });

        // 设置范围(这里是武汉)
        this.map.setView([30.59, 114.32], 10);
        // 矢量图+注记
        let mapTypes = ['vec_c', 'cva_c'];  
        // 影像图+注记
        // let types = ['img_c', 'cia_c']; 
        // 天地图 token
        let tdtToken = '你的天地图 token';
        let layers = [];
        for(let i = 0, len = mapTypes.length; i < len; i++) {
            let tdtUrl = `http://t0.tianditu.gov.cn/DataServer?T=${mapTypes[i]}&x={x}&y={y}&l={z}&tk=${tdtToken}`;
            let layer = L.tileLayer(tdtUrl, {
                zoomOffset: 1,
                noWrap: true,
                bounds: [[-90, -180], [90, 180]]
            });
            layers.push(layer);
        }
        L.layerGroup(layers).addTo(this.map);;
    }
}
</script>

<style lang="stylus" scoped>
.map-main {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #CCC;
}

</style>

效果图