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的使用
在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>
网友评论