少小白学前端——leaflet篇（Javascript 地图库）

废话少说，就是最近想了解一下gis开发，网上搜了一下，推荐了leaflet、OpenLayers等等，于是今天就练习了一下leaflet，并做出如下记录。

先上中文文档：https://leafletjs.cn/reference.html 。

一、安装

这里提供两种方式，npm和CDN引入。另外，还建议安装一个插件leaflet.chinesetmsproviders，使用这个插件可以将高德地图、百度地图等集成到leaflet中。

1、CDN引入

引入方式在中文文档中就有，代码如下：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""/>
      
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
        integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
        crossorigin=""></script>
        
<script src="https://cdn.jsdelivr.net/npm/leaflet.chinesetmsproviders@1.0.22/src/leaflet.ChineseTmsProviders.min.js"></script>

前两个是leaflet的CSS和JS文件，第三个则是插件的JS文件。

2、npm

 // leaflet
 npm i leaflet --save
 // 插件
 npm install leaflet.chinesetmsproviders

二、使用

如果采用的是CDN的方式，此刻在window对象中，已经可以看到leaflet的属性和方法了。若使用的是npm，则需要引入一下：

// 引入leaflet
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
// 引入插件
import 'leaflet.chinesetmsproviders';

注意：这里需要把CSS一起引入进来，否则无法正常显示。

1、创建地图画布

想要创建地图，需要先创建一个带有id的div标签作为地图容器，并设置好高度。然后便可以使用其提供的map()方法，进行渲染了。

<template>
  <div id="map-id" style="height: 800px"></div>
</template>

<script setup>
import {onMounted} from "vue";

onMounted(() => {
  // 初始化地图，并设置地理中心和缩放倍数
  let map = L.map('map-id', {
    center: [39.90, 116.39],
    zoom: 12
  });
  // 添加瓦片（Tile）图层
  L.tileLayer.chinaProvider('GaoDe.Normal.Map',{maxZoom:18,minZoom:5}