leaflet学习笔记-初始化vue项目(一)
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);
添加瓦片图层后,梦中情图已实现
本文为学习笔记,仅供参考
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!