Leaflet 调用Mapbox Studio中定制的瓦片风格

2019-02-20 本文已影响1人左手气球右手书

Mapbox

Mapbox是一个开源地图服务平台，致力于打造全球最漂亮的个性化地图。

mapbox基础地图风格

Mapbox studio是mapbox的地图元素个性化编辑器。支持高度自定义各种地图元素，比如，语言、道路，水系，绿地，建筑物，背景色等等。

名词解释：

zoom 缩放等级
tile 瓦片，无数张瓦片可拼成道路至路网

三张连续的瓦片

下面是瓦片链接，仔细看下链接内容，就可以比较清楚的知道瓦片原理了。
https://api.mapbox.com/styles/v1/jiaoll/cjpcbmjs622eu2ss69j2bezq4/tiles/256/10/859/397access_token=pk.eyJ1Ijoiamlhb2xsIiwiYSI6ImNqODVwMWczeTBucHIyd29heDYwbjk5NjAifQ.AH4ezmaRukNaFpqvNvRoFQ

空间数据可视化工具：Leaflet

开源
轻量：压缩库包只有38kB；
兼容移动端：对移动端友好，PC上的所有效果均能在移动端上无缝呈现。
地图交互：提供丰富的API实现地图交互。
……

兼容性
Chrome
Firefox
Safari 5+
Opera 12+
IE 7–11
Edge

Leaflet的使用

API
翻译精简版

在leaflet中使用mapbox的底图服务，首先从mapbox中获取如下信息：

用户名；
style_id：在mapbox studio 中，选择想要使用的style，从Style URL中提取style_id；
Style URL示例：mapbox://styles/jiaoll/cjpcbmjs622eu2ss69j2bezq4
access_token：在account中查看；

拼成如下格式的图层路径：

leaflet可用的mapbox底图服务

渲染地图

初始化地图容器；
可设置地图中心（center）、默认缩放等级（zoom）、最大（小）缩放等级（maxZoom/minZoom）等；
添加地图图层；

最后贴个demo吧～里面包含了地图的初始化和基础功能，添加marker、弹窗等。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Leaflet with mapbox</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
  .pop-style .leaflet-popup-content-wrapper{background:#4ab4ff;}
  .pop-style .leaflet-popup-tip{border-top-color: #4ab4ff;}
</style>
</head>
<body>
<div id='map'></div>

<script>
L.mapbox.accessToken = 'pk.eyJ1Ijoiamlhb2xsIiwiYSI6ImNqODVwMWczeTBucHIyd29heDYwbjk5NjAifQ.AH4ezmaRukNaFpqvNvRoFQ';

// 初始化地图
var map = L.map('map', {
    center: [37.41, -238.64],//地图中心
    zoom: 10//zoom等级
});


//为地图容器添加底图
L.tileLayer(
    'https://api.mapbox.com/styles/v1/jiaoll/cjpcbmjs622eu2ss69j2bezq4/tiles/256/{z}/{x}/{y}?access_token=' + L.mapbox.accessToken, {
    }).addTo(map);


//地图点击事件
map.on('click', function(e) {
    map.setView(e.latlng, 10);
});


//添加marker
L.marker([37.41, -238.64]).addTo(map);

//marker-自定义图标-绑定popup
var myIcon = L.icon({
    iconUrl: './img/marker2.png',
    iconSize: [64, 64]
});

L.marker([37.23, -238.64], {
    icon: myIcon
}).addTo(map)
    .bindPopup('<p style="color:#db1b00;">marker 绑定 popup。</p>')
    .openPopup();;



// popup
var popup = L.popup({
    closeButton: false,
    closeOnClick: false,
    className: "pop-style"
}).setLatLng([37.29, -239.34])
  .setContent('<p>Hello world!<br />This is a nice popup.</p>')
  .openOn(map);

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