这篇博客展示了如何利用Mapbox GL JS库在网页上绘制从经纬度坐标(115.80695,28.695919)到(115.860417,28.679949)的线条，并添加两个点标记。通过设置样式，线条宽度为5，颜色为#ff4895，点标记颜色为#0000FF。
摘要由CSDN通过智能技术生成
<!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' />
<style>
body { margin:0; padding:0; }
#map { top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY3NqMTIxMzgiLCJhIjoiY2t6ZjZibmlhMHFrazJ1cGQzaTQ1eDhyNiJ9.PTVyeQhNCiW6ylgUbummAw';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [115.86746,28.689709], // starting position [lng, lat]
zoom: 9 // starting zoom
});
map.on('load', function () {
map.addSource('l', {
type: 'geojson',
data:{
type: "FeatureCollection",
features: [
{
'type': "Feature",
'geometry': {
'type': 'LineString',
'coordinates': [
[115.80695,28.695919],
[115.860417,28.679949]
],
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [115.80695,28.695919]
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [115.860417,28.679949]
}
},
]
}
});
map.addLayer({
id: 'line',
type: 'line',
source: 'l',
layout: {
'line-cap': 'round',
'line-join': 'round',
},
paint: {
"line-width": 5,
"line-opacity":0.5,
"line-color":"#ff4895",
}
});
map.addLayer({
"id": "points",
"type": "circle",
"source": "l",
'paint': {
'circle-radius': 6,
'circle-color': '#0000FF'
},
});
});
</script>
</body>
</html>
顺便记录下今天写代码时候自己的傻逼问题 29行报错然后发现自己29行已经注释掉了 找了好久问题没想到是手机关机了 热点没了电脑就断网了 代码没有更新 我真的会谢
this.targets = []//所有目标对象数组
this.tgtID = new Map()//不同ID对应颜色不同
for (let key of this.tgtIdLineData.keys()) {
let newArr = []
this.tgtIdLineData.set(key,newArr)
提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
目录系列文章目录前言一、初始化
MapBox
1.引入js1.在
HTML
页面引入js二、使用步骤1.引入库2.读入数据总结
第一次使用
mapbox
，只是记一下，以免忘记，仅供参考
一、初始化
MapBox
1.引入js
由于我是在layui框架内，等同于原生代码里面要新增一个地图，所以要先在对应的页面引入js；
1.在
HTML
页面引入js
二、使用步骤
1.引入库
代码如下（示例）：
import numpy as
// var a = [11253.445214,55862.569357]
// var b = [15693.456937,59683.142354]
// 调用方法 getBeeline(a[0],a[1],b[0],b[1])
// 计算
两点
之间
的距离
function getBeeline(a, b, c, d) {
var x1, x2, y1, y2; //终
点
坐标
和最近蓝牙
坐标
，用于计算最短距
mapbox
自定义
绘制
工具如何使用
mapbox
绘制
常用的工具需要引入的资源创建div引入
mapbox
实例设置circle工具创建 point
绘制
工具创建line
绘制
工具创建polygon（多边形）
绘制
工具创建 rectangle（矩形）
绘制
工具清除图层（layer）和资源(source)
如何使用
mapbox
绘制
常用的工具
每次在网上查资源，尼玛脑袋疼，好多大神写的啥玩意呀。我们知道，操作地图不外乎就是一些事件，其实
mapbox
有一些关于
绘制
工具的一些插件，也可以自己定义
绘制
工具。
我这里的demo，就是
