跳到主要内容
版本:9.3.0

虚线图层

show
<!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.3.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.7167750088779, 31.323951343532258],
zoom: 14.907143631939364,
pitch: 59.48725112156901,
bearing: -54.10626584095007,
userId: '***', // 授权码
});

map.on('load', function () {
map.addSource('road', {
"type": "geojson",
data: "../example_data/road_seg.geojson"
})
map.addLayer({
"id": "road",
"type": 'line',
"source": "road",
"layout": {
// "line-cap":'square'
},
"paint": {
// "line-blur":5, // 线的模糊度
"line-width": 2,
"line-color": "rgb(0, 105, 255)",
"line-dasharray": [2, 1], // 虚线 2m 就隔开1个单位长度的缺口
// "line-gap-width":10, // 在线的实际路径之外绘制一条线。10表示内部间隙的宽度
// "line-offset":100,
}
})

// 将虚线图层放buildings-high前
map.moveLayer('road','buildings-high')
})

</script>
</body>

</html>