点图层
支持添加点图层。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>点图层</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.0.0/mapmost-webgl-min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
let map = new mapmost.Map({
container: 'map',
style: "<your style url>",
center: [120.71220711830802, 31.325655338101896],
zoom: 15.62594199083846,
pitch: 59.48725112156901,
bearing: -54.10626584095007,
userId: '***', // 授权码
});
map.on('load', function () {
map.addSource('roadCross', {
"type": "geojson",
data: "../example_data/road_cross.geojson"
})
map.addLayer({
"id": "roadCross",
"type": 'circle',
"source": "roadCross",
"layout": {},
"paint": {
// "circle-blur":1, // 点的模糊度
"circle-color": "#0000fa",
"circle-radius": 5, // 点的半径大小
// "circle-opacity":0.5, // 透明度 0~1
"circle-pitch-alignment": "map", // "viewport"|"map"
//"map" 圆与地图的平面对齐 - 贴地显示
//"viewport" 圆与视口平面对齐
"circle-pitch-scale": "viewport", // "map"|"viewport"
// "map" 圆根据它们与相机的明显距离进行缩放。
// 'viewport' 不缩放
"circle-stroke-color": "#ffffff", // 圆边框颜色
"circle-stroke-width": 2, // 圆边框的宽度
"circle-stroke-opacity":0.8, // 圆边框的透明度
//"circle-translate":[-100,-10], // 几何体的偏移,都是负数表示左和上
//"circle-translate-anchor":"viewport" // 控制圆平移的参照系 "map"|"viewport"
}
})
})
</script>
</body>
</html>