mapbox-gl的学习过程之自定义点
项目上 有使用到mapbox地图 学习记录一下，以下是代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Guides</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<!-- npm i mapbox-gl -->
<link rel="stylesheet" href="./node_modules/mapbox-gl/dist/mapbox-gl.css" />
<script src="./node_modules/mapbox-gl/dist/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
// 引入Mapbox GL JS库
// 初始化地图
// 首先，确保Mapbox.js已经在你的页面中被引入
// 初始化地图
// mapboxgl.accessToken = "YOUR_MAPBOX_ACCESS_TOKEN"; // 替换为你的Mapbox访问令牌
var map = new mapboxgl.Map({
container: "map", // 地图容器的DOM元素ID
style: "mapbox://styles/mapbox/streets-v11", // 地图样式
center: [0, 0], // 初始中心点坐标
zoom: 1, // 初始缩放级别
});
// 当地图加载完成后添加点
map.on("load", function () {
// 添加数据源
map.addSource("point-source", {
type: "geojson",
data: {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [0, 0], // 点的坐标
},
},
],
},
});
// 添加点图层
map.addLayer({
id: "point-layer",
type: "circle",
source: "point-source",
paint: {
"circle-radius": 10, // 点的半径大小
"circle-color": "#f00", // 点的颜色
},
});
});
</script>
</body>
</html>
