mapbox
再来一段官网描述：Mapbox GL JS 是一个 JavaScript 库，它使用 WebGL，以 vector tiles 和 Mapbox styles 为来源，将它们渲染成互动式地图。它是 Mapbox GL 生态系统的一部分，其中还包括 Mapbox Mobile，它是一个用 C++ 编写的兼容桌面和移动平台的渲染引擎。
P.S. mapbox地图展示的大部分信息可以在地图样式里面配置。包括平常的河流、土地、天空等颜色，还有各种建筑是否显示地区名字、中英文等。
代码
#map {
width: 100%; height: 1000px; } <script src='https://npmcdn.com/@turf/turf/turf.min.js'>
script> <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' /> <div id="map">
div> mapboxgl.accessToken = 'token'; // 设置token var map = new mapboxgl.Map({
// 初始化 设置样式 地图中心 地图缩放 container: 'map', style: 'mapbox://styles/mapbox/dark-v10', center: [-122.414, 37.776], zoom: 3 }); map.on('load', function () {
// 地图加载完成 var s = [-122.414, 37.776]; var e = [116, 38.913]; var route = {
"id": "route", 'type': 'FeatureCollection', 'features': [ {
'type': 'Feature', 'geometry': {
'type': 'LineString', 'coordinates': [s, e] } } ] }; // 计算起点和终点之间的距离 var lineDistance = turf.lineDistance(route.features[0], 'kilometers'); var stepArr = []; var steps = 10; // 步数(帧) for (var i = 1; i < lineDistance; i += lineDistance / steps) {
var lnglat = turf.along(route.features[0], i, 'kilometers'); stepArr.push(lnglat.geometry.coordinates); } map.addLayer({
"id": "route", "type": "line", "source": {
"type": "geojson", "data": {
"type": "Feature", "properties": {
}, "geometry": {
"type": "LineString", "coordinates": stepArr } } }, "layout": {
"line-join": "round", "line-cap": "round", }, "paint": {
"line-color": "red", "line-width": 2, } }); }) 上面代码可以复制直接使用 有分的同学可以两分支持一下 传送门
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/220091.html原文链接：https://javaforall.net
