leaflet学习笔记-初始化vue项目(一)

2023-12-28 12:54:48

leaflet简介

Leaflet是一款开源的轻量级交互式地图可视化JavaScript库,能够满足大多数开发者的地图可视化需求,其最早的版本大小仅仅38 KB。Leaflet能够在主流的计算机或移动设备上高效运行,其功能可通过插件进行扩展,拥有易于使用的、文档完善的API,提供了简单、可读性高的源代码。

引入leaflet

引入leaflet到项目中有几种方式

方式一:下载安装包

进入Leaflet官网,在下载页面选择Leaflet的最新版本,将leaflet.zip文件下载到本地文件夹,解压缩后会看到一个名为images的文件夹和其他7个文件(分别是leaflet.css、leaflet.js、leaflet.js.map、leaflet-src.esm.js、leaflet-src.esm.js.map、leaflet-src.js、leaflet-src.js.map)。Leaflet官网对其中几个重要的文件及images文件夹进行了说明,基于Leaflet的地图可视化都必须依赖以下文件。

(1)leaflet.js:压缩版的Leaflet开发包,体量小,便于快速加载。

(2)leaflet-src.js:非压缩版的Leaflet开发包,功能和leaflet.js一样,体量更大,但在开发时有助于代码调试。建议开发过程中使用该版本,在发布成果时使用leaflet.js替换该版本。使用的是leaflet-src.js版本。

(3)leaflet.css:Leaflet提供的CSS样式库。

(4)images:该文件夹包含了leaflet.css引用的一些图片,必须和leaflet.css位于同一个文件夹下。

除此之外,leaflet.js、leaflet-src.js文件都对应有一个扩展名为.map的Source map文件,在代码调试时有助于定位出错位置,建议和leaflet.js、leaflet-src.js文件放在同一个文件夹下,避免浏览器开发者工具在运行时提示警告。

新建一个工程,在该工程内新建两个文件夹JS和CSS,分别用于放置工程所需的.js文件和.css文件。将解压缩后的leaflet-src.js和leaflet-src.js.map复制到JS文件夹下,将解压缩后的leaflet.css复制到CSS文件夹,同时,将解压缩后的文件夹images也复制到CSS文件夹下。为了方便表述,我们将leaflet-src.js重命名为leaflet.js,在发布成果时可用下载的压缩版leaflet.js替换该文档。

index.html中添加一下引用

引用代码:

<link rel="stylesheet" href="CSS/leaflet.css"> 
<script src="JS/leaflet.js"></script>

也可以在线引用(不推荐):

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
 <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>

方式二:通过npm方式引入

npm i leaflet

main.js文件中,引入Leaflet对象 挂载到Vue上,便于全局使用,也可以单独页面中单独引用

import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
//全局使用
Vue.L = Vue.prototype.$L = L;

//设置默认的icon
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
    iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
    iconUrl: require("leaflet/dist/images/marker-icon.png"),
    shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
});

初始化地图

创建一个新的vue页面(mainMap.vue)

<template>
  <div id="mainMap"></div>
</template>

<script>

export default {
  name: "MainMap",
  data: () => {
    return {
      centerLatLng: [25, 102.7],
      mainMap: null
    }
  },
  methods: {},
  mounted() {
    this.mainMap = L.map('mainMap', {
      center: [25, 102.7], // 地图中心
      zoom: 14, //缩放比列
      zoomControl: true, //禁用 + - 按钮
      doubleClickZoom: true, // 禁用双击放大
      attributionControl: false, // 移除右下角leaflet标识
    });
  }
}
</script>

<style scoped>

#mainMap {
  width: 100vw;
  height: 100vh;
}
</style>

实例化地图后的运行效果如下:

黑乎乎的一片

为什么会黑乎乎的一片呢,当然不是有问题了,只是没有加入图层。和大多数GIS软件一样,Leaflet也是以图层的形式将数据添加到地图上的。接下来将介绍Leaflet如何加载Mapbox栅格瓦片图层。Leaflet加载瓦片图层(也称为切片图层)需要用到L.tilelayer()方法,该方法有两个参数,其中,第二个参数是可选参数,第一个参数需要传递一个类似“http://{s}.http://somedomain.com/blabla/{z}/{x}/{y}{r}.png”的网址,用于访问瓦片地图服务,瓦片地图服务提供商会提供对该网址的说明和示例。值得注意的是,其中z表示地图缩放等级,x和y分别是各个瓦片的列号和行号。

瓦片图层实例化代码如下:

 //添加瓦片图层(作为底图备选)
 let openstreetmapLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(this.mainMap);

添加瓦片图层后,梦中情图已实现

本文为学习笔记,仅供参考

文章来源:https://blog.csdn.net/u012917880/article/details/135246934
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。