效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<!-- <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>-->
<!-- <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet'/>-->
<script src='../source/v2.6.1/mapbox-gl.js'></script>
<link href='../source/v2.6.1/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>
//http://turfjs.org/docs/#rhumbDestination 矢量箭头画法
mapboxgl.accessToken =
'pk.eyJ1IjoiZXRlcm5pdHkteHlmIiwiYSI6ImNqaDFsdXIxdTA1ODgycXJ5czdjNmF0ZTkifQ.zN7e588TqZOQMWfws-K0Yw';
var map = new mapboxgl.Map({
container: 'map', // container id
style: {
"version": 8,
"name": "Mapbox Streets",
"sprite": "http://localhost:8080/mapbox/images/sprite",//图标
"glyphs": "http://localhost:8080/mapbox/font/{fontstack}/{range}.pbf",//字体文件
"sources": {
"osm-tiles": {
"type": "raster",
'tiles': [
// "http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
"http://localhost:8080/googlechina/{z}/{x}/{y}.png" // 加载google 正确，加载百度失败 算法不同
// "http://mt2.google.cn/vt/lyrs=s@167000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}"//谷歌路径
// "http://192.168.1.26:9999/data/map/{z}/{x}/{y}.png"//本地路径
],
'tileSize': 256
},
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "osm-tiles",
"minzoom": 0,
"maxzoom": 22
}]
}, //hosted style id
center: [121, 31], // starting position
zoom: 8, // starting zoom
// 地图默认字体
localIdeographFontFamily: "Microsoft YoHei",
});
map.on('load', () => {
map.loadImage('../img/car.png', function (error, image) {
if (error) throw error;
map.addImage('cat', image);
map.addLayer({
"id": "points",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [121.01866, 31.888]
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [121.01866, 30.888]
}
}]
}
},
"layout": {
"icon-image": "cat",
"icon-size": 1,
// "symbol-z-offset": 500.0
}
});
});
})
</script>
</body>
</html>
浙公网安备 33010602011771号