php网站伪静态,域名查询,cpa游戏推广平台,官方网站的作用转载#xff1a; https://www.cnblogs.com/RainyBear/p/6011832.html
leaflet作为广为应用的开源地图操作的API,是非常受欢迎#xff0c;轻量级的代码让使用者更容易操作。
废话不多说#xff0c;下面直接给出范例。
首先在这个网站下载leaflet的压缩包#xff0c;其中包括…转载 https://www.cnblogs.com/RainyBear/p/6011832.html
leaflet作为广为应用的开源地图操作的API,是非常受欢迎轻量级的代码让使用者更容易操作。
废话不多说下面直接给出范例。
首先在这个网站下载leaflet的压缩包其中包括了其API以及一些范例。https://github.com/Leaflet/Leaflet
下载完之后自己搭建一个服务器将这个包文件放在服务器的根目录下面这时候在浏览器可以访问一下其中的范例。例如在我的这里测试在浏览器里输入http://localhost/Leaflet/debug/map/max-bounds.html我这里使用的是WampSever2.5.网上有很多这样的教程这里做说明。出现如上图所示的界面证明已经搭建成功。
然后再OpenStreetMap的官网上下载离线地图的数据官网提供自定义下载的方式下载下来的数据格式是.osm。http://www.openstreetmap.org/之后要做的就是该离线数据的地图瓦片。地图瓦片的下载可以使用这个下载工具Maperitive(v2.4.1)http://maperitive.net/download/这个软件的使用就不用多说了导入刚才下载的地图数据之后在其右下角点击Web map表示不显示在线地图数据只显示刚刚加载的离线地图。
在下方使用Command promat。输入generate-tiles minzoom8 maxzoom17数字表示地图的缩放级别可以更换。还可以在map菜单栏的switch to rules中选择地图的样式。比如黑色或者精简地图。下载完成后在其软件的目录下面有个Tiles的文件夹这里面存放的就是地图的瓦片。在服务器下面新建一个项目将这个文件夹放在这个项目中其html代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8link relstylesheet typetext/css hrefleaflet/css/leaflet.css /meta nameviewport contentwidthdevice-width, initial-scale1.0link relstylesheet typetext/css hrefleaflet/css/screen.css /script typetext/javascript srcleaflet/src/deps.js/scriptscript typetext/javascript srcleaflet/src/leaflet-include.js/scriptscript typetext/javascript srcleaflet/src/leaflet.js/scripttitleleaflet_map/title/headbodydiv idmap/divscript typetext/javascriptvar osmUrl http://localhost/learnD3/Tiles/{z}/{x}/{y}.png,osmAttrib copy; a hrefhttp://openstreetmap.org/copyrightOpenStreetMap/a contributors,osm L.tileLayer(osmUrl, {minZoom: 8,maxZoom: 17,attribution: osmAttrib});var map L.map(map).setView([31.60,104.71], 11).addLayer(osm);L.marker([31.68,104.77]).addTo(map).bindPopup(bHello world!/bbr /I am a popup.).openPopup();L.circle([31.728,104.677], 5000, {color: red,fillColor: #f03,fillOpacity: 0.5}).addTo(map).bindPopup(I am a circle.);var popup L.popup();function onMapClick(e) {popup.setLatLng(e.latlng).setContent(You clicked the map at e.latlng.toString()).openOn(map);}map.on(click, onMapClick);/script/body/html此图为项目的目录结构其中在leaflet文件夹中存放的是其css样式以及js源代码。在下载的leaflet中可以找到。
运行效果如图所示至此离线地图就已经加载完成。
