跳到主要内容
版本:9.0.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%;
color: rgb(56, 243, 218)
}
</style>
<script src="https://delivery.mapmost.com/cdn/sdk/lite/v9.0.0/mapmost-lite-min.js"></script>
</head>

<body>
<div id="map"></div>
<script>
let map = new mapmost.Map({
container: 'map',
style: "<your style url>",
center: [120.7090846643357,31.32785575356732],
zoom: 13.962676686804516,
pitch: 56.487251121569024,
bearing: -49.30626584095007,
userId: '***', // 授权码,此参数务必添加
});

map.on('load', function () {
map.addSource('road_seg', {
"type": "geojson",
data: "../example_data/road_seg.geojson"
})
map.addLayer({
"id": "road_seg",
"type": "line",
"source": "road_seg",
"paint": {
"line-color": {
"stops":[
[13,"rgb(71,172,243)"],[16,"rgb(56, 243, 218)"]
]
},
"line-width": 5
}
},'buildings-high')

})
</script>
</body>

</html>