leaflet加载OSM地图

接触了leaflet，想着抽时间把自己用过的leaflet的功能都自己写一遍。先从最基本的加载第一张地图开始吧。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="leaflet1.34/leaflet-src.js"></script><link rel="stylesheet" href="leaflet1.34/leaflet.css">
<style>html,body{width: 100%;height: 100%;}#mapDiv{width: 100%;height: 100%;}</style>
</head>
<body><div id="mapDiv"></div><script>var map = L.map("mapDiv").setView([36.55,117.32],13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);</script></head>
<body>
</body>
</html>

代码虽然简单，但是也有一些需要注意的地方，1.想要让地图占满整个屏幕，除了设置地图容器mapDiv宽高为100%，还要把父元素body和html的宽高设置为100%，不然mapDiv的高度始终为0。
2.加载地图的js代码要写在body中，因为要先创建body中的地图容器mapDiv才能进行地图的加载，若将加载地图的js代码写在head中，就会报错地图容器不存在。
3.前两条是基础的前端小问题，关于leaflet的问题在于setView（）中第一个参数也就是中心点坐标，纬度在前经度在后，和ArcGIS API有所不同（ArcGIS是先经度再纬度）。

leaflet加载OSM地图相关推荐

leaflet加载离线地图教程以及下载离线地图瓦片工具
关于源码以及教程侵权请联系作者删除最近在做一个leaflet加载离线地图的东西,结果在网上找到一份相关的教程以及源码源码链接:https://pan.baidu.com/s/1cGew8PAU-L ...
leaflet加载百度地图（路网矢量图和卫星影像图）示例代码032
第032个点击查看专栏目录本示例的目的是介绍演示如何在vue+leaflet加载百度地图,这里使用了control.layers进行切换两种不同的百度底图.这里要引用proj4,proj4leaf ...
Openlayers案例1——加载OSM地图
1. 代码块 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
Leaflet加载百度地图
为了验证一下百度地图的影像.矢量.注记等瓦片数据是否是坐标统一的,写了一个简单的leaflet加载百度影像瓦片.矢量瓦片.注记瓦片的页面,叠加在一起,看了一下,果然坐标系是统一的. <!DOCT ...
leaflet加载OpenTopoMap地图（示例代码020）
第020个点击查看专栏目录本示例的目的是介绍演示如何在vue+leaflet中添加OpenTopoMap地图. 直接复制下面的 vue+leaflet源代码,操作2分钟即可运行实现效果文章目录 ...
openlayers加载OSM地图出现白线
目前的原因看起来是因为是在视角中加了坐标系,如果去掉坐标,白线就会消失. 但是目前还没有找到解决的方案
Leaflet快速入门与加载OSM显示地图
场景 Leaflet Leaflet 是一个为建设交互性好适用于移动设备地图,而开发的现代的.开源的 JavaScript 库. 代码仅有几十KB,但它具有开发在线地图的大部分功能.Leaflet设计 ...
OSM逆地理服务器搭建（四）之Web端加载OpenStreetMap地图
前言前面的文章中说道我们利用 Nominatim将搭建了可以进行地址解析的服务器,以及如何利用 Nominatim进行地址解析. 虽然我们解决了地址解析不依赖谷歌服务,但是地图引擎,路线规划,画电子 ...
vue openlayers 加载高德地图等 gcj02 的图层偏移问题
vue openlayers 加载高德地图等 gcj02 的图层偏移问题这个问题是在使用 openlayers 地图引擎加载高德地图或者是谷歌地图都会遇到的问题,所以说呢这篇博文稍微说一下解决办法. ...

leaflet加载OSM地图

leaflet加载OSM地图相关推荐

最新文章

热门文章