😄Mapbox--引入,在地图上标注地点
2019-05-14 本文已影响0人
JiehongYOU
1：将mapbox引入进来
<script src='https://api.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet' />
2：html文件
（1）在html中留出来，放置地图的位置；
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Draw GeoJSON points</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!-- 主要保存地图的位置 -->
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaG9uZ2hvbmcxMjA3IiwiYSI6ImNqajljMzQyNjAzaW0zcG10cmNweDhmaXoifQ.iDtGVXhNQlIwUihztOcPXw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
// 中心点的位置
center: [107.4,33.42],
zoom: 3
});
map.on('load', function () {
// 添加一个图层
map.addLayer({
"id": "points", // 点型
"type": "symbol",
"source": {
"type": "geojson", // 数据是geojson格式
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [108.56,34.15]
},
"properties": {
"title": "Mapbox DC",
"icon": "monument"
}
}]
}
},
"layout": {
"icon-image": "{icon}-15",
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
});
</script>
</body>
</html>
3:结果展示
b标注地点.png
