论程序员怎么写旅游计划 —— Leaflet实际应用记录

最新推荐文章于 2024-08-11 23:18:12 发布

GiantWaterElemental

最新推荐文章于 2024-08-11 23:18:12 发布

阅读量923

点赞数 30

文章标签：旅游 javascript html5

本文链接：https://blog.csdn.net/yychi107/article/details/136646572

版权

Leaflet是一个用于创建交互式地图的开源JavaScript库，而本人此次定了去长沙旅游，需要准备旅游计划，所以觉得是个学习和使用它的好机会。它可以展示行程中的各种地点，帮助我写一篇图文并茂的旅游计划。
Leaflet的官方网站有完整的教程和文档，开发者可以通过这些学习它的使用方法。下面我们一起来看看我具体是怎么做的。

新建页面

首先我想要获得一幅长沙市的地图，我需要创建一个地图网页。

新建HTML文件

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    </body>
</html>

引入css和js文件：

<link rel="stylesheet" type="text/css" href="https://cdn.staticfile.net/leaflet/1.9.4/leaflet.min.css">
<script type="text/javascript" src="https://cdn.staticfile.net/leaflet/1.9.4/leaflet.min.js"></script>

创建一个用id标记的div元素作为容器盛放地图：

<div id="map"></div>

设置容器宽高：

#map{
    width: 100vw;
    height: 100vh;
}

初始化 Leaflet 对象，这里选择了id为map的容器；并且设置中心点和缩放等级，这里选择了长沙市中心的五一广场附近为中心点：

var map = L.map('map', {
     center: [71.72696271084693,-33.51289069348589], //设置中心点
     zoom: 15, //设置默认缩放等级
     crs: L.CRS.EPSG3857 , //设置坐标系类型，EPSG3857伪墨卡托投影
     minZoom: 1, //最小缩放等级
     maxZoom: 20, //最大缩放等级
});

添加地图图层，这里使用了高德地图的图层：

L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
    attribution: 'GWE', //设置版权
    subdomains: ['1', '2', '3', '4'],
    maxZoom: 20, //最大缩放比例
    zoomOffset: -1, 
}).addTo(map);

绑定点击事件，方便获取点击位置的坐标：

map.on('click', function(e) {
    //获取当前坐标
    console.log(e.latlng);
    //获取中心点
    console.log(map.getCenter());
    //获取当前缩放等级
    console.log(map.getZoom());
    //获取当前地图宽高
    console.log(map.getSize());
});

绑定缩放事件：

map.on('zoom',function(e) {
    //获取缩放等级
    console.log(e.target._animateToZoom)
});

启动web服务器，我这里使用的是PHP的内置web服务器

php -S localhost:3000

现在访问localhost:3000应该可以显示长沙市的地图了。

长沙市地图

添加标记

现在我想要标记一些感兴趣的地点，可以使用Leaflet的marker。

点击长沙市著名景点橘子洲，根据之前的点击事件，可以在控制台获得它的坐标，这是一个Leaflet的LatLng对象：

控制台记录点击事件

现在可以根据这个坐标创建标记：

L.marker([71.72702618104772, -33.51886098102754], {
    title: '橘子洲',
    opacity: 0.8,
    alt: ''
}).addTo(map);

这样我们就在橘子洲上放了一个标记：

橘子洲

除此之外，我们可以给标记加上tooltip，让他更直观：

L.marker([71.72702600483204,-33.51877503164141], {
    title: '橘子洲',
    opacity: 0.8,
    alt: ''
}).bindTooltip("橘子洲", {
    offset: [-15, -7],
    direction: 'top',
    permanent: true
}).openTooltip().addTo(map);

让我们看看效果：

橘子洲提示

现在让我们重复以上步骤，为所有计划中的景点加上标记：

在这里插入图片描述

同样的操作，我们给计划中的酒店和餐馆也加上标记：

添加折线和多边形

经过一段时间的头脑风暴，我确定了酒店和行程，现在要把行程在地图上表现出来，可以使用Leaflet的Polyline和Polygon。

第一天我到达长沙南站后先去酒店办理入住，酒店在五一广场附近，根据导航可以乘坐地铁，还是用老办法点击地铁站获取坐标，按顺序添加到折线的坐标数组中：

L.polyline([
    [71.71830521716213, -33.46727953386656],
    [71.71827830064865, -33.47178468538932],
    [71.72031024428568, -33.47757607257845],
    [71.72220757633252, -33.47783350980833],
    [71.72501956115049, -33.48075113174688],
    [71.72633795558346, -33.4847414088099],
    [71.72671462283377, -33.49452402354505],
    [71.72687604935969, -33.499672768142474],
    [71.72696271084693,-33.51289069348589]
], {
    color: 'red'
}).addTo(map);

这样我们就获得了一条从长沙南站到酒店的折线：

长沙南站到酒店

时间不早了，就近逛逛吧，接下来我选择到附近的太平老街走一走，可以用多边形标记太平老街，点击街区的四个角落获得坐标，按顺序添加到多边形的坐标数组中：

L.polygon([
    [71.72702845185088, -33.51475967993158],
    [71.72702508883941, -33.51307024811054],
    [71.72639619518355, -33.513134607418],
    [71.72643960763442, -33.51496301030614]
], {
    weight: 2,
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);