leaflet入门：第一个demo（附入门学习链接及源码）

Qsqyy_

已于 2022-05-07 21:01:33 修改

阅读量939

点赞数

文章标签： html javascript

于 2022-05-07 21:00:09 首次发布

本文链接：https://blog.csdn.net/m0_61865312/article/details/124638805

版权

部分学习链接

准备工作

下载leaflet文件https://leafletjs.com/SlavaUkraini/

新建一个index.html文件

使用的底图资源网站是超图：https://iclient.supermap.io/examples/leaflet/examples.html#iServer

选择for leaflet不要选择其他的

点击选择你喜欢的底图，右上角有一个“源码”点开就可以看到底图源码了

需要使用的时候复制body里面的代码，粘贴到index.html文件里，body上面文件的引入可以不复制，路径不同。

开始进行

引入leaflet脚本库，路径填自己的文件路径，这是我的文件目录，代码写在<head>...</head>l里

leaflet.js：简化版的Leaflet JavaScript代码

leaflet.css ：这是Leaflet的样式表

Include-leaflet.js：实现子图层的控制

构造地图容器对象加载地图

Zoom：地图一开始的缩放比例为18（地图缩放比例从1-18，通常没有小数点）

.setView：一开始地图显示的坐标位置，这里的坐标是广西民族大学南门

L.Supermap：将图层添加到给定的地图

添加子图层

添加子图层控制工具

layerControl是leaflet中的小控件件允许⽤户控制他们可以在地图上看见那些图层。

layers control控件能够检测出已添加的图层，并且设置相应的多选框和单选框

绘制形状

圆形

三角形

设置标注及弹窗

使用bindPopup可以在各种图形区域、标注添加弹窗

L.control.scale用于在地图显示比例尺。给地图绑定点击事件，事件发生时，bindPopup方法会把HTML内容和弹出框绑定到一起。当你点击这个对象之后，bindPopup将马上打开一个弹出框。获取经纬度信息。

预览

源码

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>index</title>
<!--将leaflet添加到项目中-->
  <link rel="stylesheet" href="leaflet/leaflet.css"/>
  <script type="text/javascript" src="leaflet/leaflet.js"></script>  
 <script type="text/javascript" src="leaflet/iclient-leaflet.js"></script>
	
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">

<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div> 
	
<script type="text/javascript">
	   
//******************地图及图层加载***************************
//加载百度地图看到的坐标是22.706251, 108.243614 广西民族大学南门
        var map = L.map('map', {
            crs: L.CRS.Baidu,
        }).setView([22.706251, 108.243614], 18);//实现定位
        L.supermap.baiduTileLayer("", {
            noWrap: true
        }).addTo(map);
	
//添加base layer图层（互斥图层，只能显示一个）天地图影像图层、超云图
        var baseLayers = {
            'Sputnik': L.tileLayer('http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d', {
                Zoom: 3,
            }),
			'Back_map':L.tileLayer('Back_map', {
                    center: [39.92, 116.46],
                    crs: L.CRS.EPSG3857,
          			zoom: 3
        })
        };
//layerControl 切换图层工具
        var layerControl = L.control.layers(baseLayers, {}, {
            position: 'topleft',
            collapsed: true
        }).addTo(map);
	
//******************************************************
	
	//*******************没有作为整体去绘制的图形及标注******************

//绘制圆形半径 radius 的单位为米
	var circle = L.circle([22.706251, 108.243614], {
        color: 'green',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 10
    }).addTo(map);
//添加标注
	var marker = L.marker([22.706251, 108.243614]).addTo(map);
//绘制三角形（研习周活动轨迹）
	var polygon = L.polygon([
    [22.711838, 108.240075], //宿舍坐标
    [22.706831, 108.244681], //逸夫楼坐标
    [22.710666, 108.240154] //食堂
    ]).addTo(map).bindPopup("研习周活动区域");
//添加弹窗
	 marker.bindPopup("<b>我是广西民族大学南门").openPopup();
     circle.bindPopup("我是以南门为原点半径为10米的圆形区");
	//***********************************************************************
	
//**将绘制的多个图形组合成一个整体通过 layerGroup 作为 overlayer 添加上去(在base layer之上放置的其他东西。)，把一些Layer集中到一个组Group中，以便作为一个整体进行操作。如果把该Group加入到了Map中，任何从这个Group增加或者移除Layer的行为都将导致该Layer在Map中被执行相同的操作。
         var bj = L.marker([39.92,116.46]).bindPopup('这里是北京');
            sh = L.marker([31.213,121.445]).bindPopup('这里是上海');
            gz = L.marker([23.16,113.23]);
			yc=L.marker([38.308908, 106.221822]);
        var cities = L.layerGroup([bj, sh]).addTo(map);	
	//这个FeatureGroup由两个Layer组成：yc, gz；每个Layer都有一个Popup，且每个Layer都会对事件'click'进行响应。
	    var cities=L.featureGroup([yc, gz]).bindPopup('hello！').on('click',function(){alert('你点击了一个坐标标注');}).addTo(map);
//***************************************************************************

//弹出信息窗口，随机在地图上点击一处，会弹出坐标信息窗口
function onMapClick(e){
     L.popup().setLatLng(e.latlng)
              .setContent("这里的坐标是 "+e.latlng.toString())
              .openOn(map)
}
map.on('click',onMapClick)
//添加一个标尺
	var scale = L.control.scale({maxWidth:200,metric:true,imperial:false}).addTo(map);
	


    </script>
</body>
</html>

Qsqyy_

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
leaflet入门：第一个demo（附入门学习链接及源码）

部分学习链接leaflet：入门基础 - IT610.com iClient for Leaflet 开发指南 https://blog.csdn.net/sinat_31213021/article/details/118728848《Leaflet 基础知识点》- 绘制圆、线、矩形和多边形_AvatarGiser的博客-CSDN博客_leaflet绘制线https://blog.csdn.net/sinat_31213021/article/details/118728848 leaflet：
复制链接

扫一扫