由資料屬性定義圓點樣式
範例展示
原始碼
copy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>由資料屬性定義圓點樣式 - Map8 Platform Documentation</title>
<link rel="stylesheet" href="https://api.map8.zone/css/gomp.css?key=[YOUR_KEY_HERE]" />
<style>
#map{
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="https://api.map8.zone/maps/js/gomp.js?key=[YOUR_KEY_HERE]"></script>
<script type="text/javascript">
gomp.accessToken = '[YOUR_KEY_HERE]';
var map = new gomp.Map({
container: 'map', // 地圖容器 ID
style: 'https://api.map8.zone/styles/go-life-maps-tw-style-std/style.json', // 地圖樣式檔案位置
maxBounds: [[105, 15], [138.45858, 33.4]], // 台灣地圖區域
center: [121.54885, 25.03625], // 初始中心座標，格式為 [lng, lat]
zoom: 16, // 初始 ZOOM LEVEL; [0-20, 0 為最小 (遠), 20 ;最大 (近)]
minZoom: 6, // 限制地圖可縮放之最小等級, 可省略, [0-19.99]
maxZoom: 19.99, // 限制地圖可縮放之最大等級, 可省略 [0-19.99]
pitch: 50, // 攝影機仰角, 可省略, [0-60]
bearing: 0, // 地圖角度, 可省略, [-180 ~ 180; 0 為正北朝上, 180 為正南朝上]
speedLoad: false,
attributionControl: false
}).addControl(new gomp.AttributionControl({
compact: false
}));
map.on('load', function () {
map.addLayer({
'id': 'population',
'type': 'circle',
'source': {
type: 'vector',
url: 'https://api.map8.zone/data/go-life-maps-tw-tiles-std.json'
},
'source-layer': 'poi',
'paint': {
// 設定圓點在 zoom level 12 - 22 間顯示相應大小 (2 - 180)
'circle-radius': {
'base': 1.75,
'stops': [[12, 2], [22, 180]]
},
'circle-color': [
'match',
['get', 'class'],
'restaurant', '#ff8000',
'hospital', '#ad5a5a',
'park', '#009100',
'shop', '#004b97',
'#ccc' /* 其他類型 */
]
}
});
});
</script>
</body>
</html>