01 第一个Leaflet程序

维吉斯蔡

已于 2023-08-21 18:15:32 修改

阅读量73

点赞数

分类专栏： Leaflet 文章标签： web javascript 前端

于 2023-08-21 17:27:28 首次发布

本文链接：https://blog.csdn.net/hanv79/article/details/132413017

版权

Leaflet 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1 准备

在Leaflet官网下载Leaflet.js和Leaflet.css就OK啦，或者也可以用下面的引用。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

本次实验准备引用高德切片，下面的网址用于引用高德的矢量和栅格切片

//矢量切片
'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
//栅格切片
'https://webst04.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'

2 实现

HTML

在HTML中引入资源创建空白的div元素用于显示地图，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet</title>
    <script  src="./leaflet/leaflet.js"></script>
    <script src="./index.js"></script>
    <link rel="stylesheet" href="./leaflet/leaflet.css">
    <link rel="stylesheet" href="./index.css">
</head>
<body onload="load()">>
    <div id="mapid"></div>
</body>
</html>

CSS

在CSS中设置样式

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
}
#mapid {
    width: 100%;
    height: 100%;
}

JS

在网页加载完成后执行箭头函数。
创建一个Leaflet地图对象（L.Map），并传入一个div元素的id，表示会在这个div中显示地图。
创建一个Leaflet瓦片对象（L.TileLayer），传入一个瓦片图层的URL模板，这里使用的是高德地图的瓦片服务，可以根据x, y, z三个参数来获取不同位置和缩放级别的瓦片图片，subdomains表示可以使用的子域名用{s}来占位，maxZoom表示最大的缩放级别。
将瓦片图层添加到地图上。
设置中心点和缩放级别。

window.load = () =>{
    const map = new L.Map('mapid');
    const gaodeLayer = new L.TileLayer(
    'https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
    {subdomains:'1234' ,maxZoom: 18});
 	gaodeLayer.addTo(map);
	map.setView([36.107284,103.735977], 17);
}

回顾知识，普通函数与箭头函数。

// 普通函数
function add(x, y) {
  return x + y;
}
// 箭头函数
let add = (x, y) => x + y;
//箭头函数是匿名的
//let只对代码块内有用，代码块就是{}包裹的部分
//var对全局有用会覆盖代码块外的值

此时我们就可以顺利将高德地图加载出来了。
在这里插入图片描述

同时我们也可以在地图中加入比例尺

  const scale = L.control.scale({
    maxWidth: 200,
    metric: true,
    imperial: false
  }).addTo(map);