點擊切換圖層樣式
範例展示
原始碼
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.54819933821148, 25.05456063299995], // 初始中心座標，格式為 [lng, lat]
zoom: 14.8, // 初始 ZOOM LEVEL; [0-20, 0 為最小 (遠), 20 ;最大 (近)]
minZoom: 6, // 限制地圖可縮放之最小等級, 可省略, [0-19.99]
maxZoom: 19.99, // 限制地圖可縮放之最大等級, 可省略 [0-19.99]
attributionControl: false
}).addControl(new gomp.AttributionControl({
compact: false
}));
map.on('load', function () {
// 先加上 Source 讓所有圖層都能指定同一個 Source，
// 這邊id 命名為 `linesSource`，可自定
map.addSource('linesSource', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [{
'type': 'Feature',
'properties': {
'id': 1
},
'geometry': {
'type': 'LineString',
'coordinates': [
[121.544541, 25.052563],
[121.548695, 25.057678],
[121.555054, 25.058218]
]
}
},{
'type': 'Feature',
'properties': {
'id': 2
},
'geometry': {
'type': 'LineString',
'coordinates': [
[121.543541, 25.050563],
[121.547695, 25.055678],
[121.554054, 25.056218]
]
}
},{
'type': 'Feature',
'properties': {
'id': 3
},
'geometry': {
'type': 'LineString',
'coordinates': [
[121.542741, 25.051763],
[121.548895, 25.056878],
[121.553254, 25.057418]
]
}
}]
}
})
// 偵測 Event 用的圖層
map.addLayer({
'id': 'lines',
'type': 'line',
'source': 'linesSource',
'paint': {
'line-width': 10,
'line-color': '#42dff4'
}
});
// Hover 時才顯示的圖層
map.addLayer({
'id': 'hoveredLine',
'type': 'line',
'source': 'linesSource',
'paint': {
'line-width': 12,
'line-color': 'green'
},
'layout': {
'visibility': 'none'
}
});
// Click 後才顯示的圖層
// 後面加上的圖層會蓋住之前加上的圖層
map.addLayer({
'id': 'clickedLine',
'type': 'line',
'source': 'linesSource',
'paint': {
'line-width': 15,
'line-color': '#c00'
},
'layout': {
'visibility': 'none'
}
});
// 點擊 lines 圖層，顯示 clickedLine 圖層中符合 id 的 feature
map.on('click', 'lines', function(e) {
var id = e.features[0].properties.id
map.setFilter('clickedLine', ['==', 'id', id]);
map.setLayoutProperty('clickedLine', 'visibility', 'visible')
});
// 點擊 clickedLine 圖層 (紅色線) 則隱藏
map.on('click', 'clickedLine', function() {
map.setLayoutProperty('clickedLine', 'visibility', 'none')
});
// Hover lines 圖層，顯示 hoveredLine 圖層中符合 id 的 feature
map.on('mouseenter', 'lines', function(e) {
map.getCanvas().style.cursor = 'pointer';
var id = e.features[0].properties.id
map.setFilter('hoveredLine', ['==', 'id', id]);
map.setLayoutProperty('hoveredLine', 'visibility', 'visible')
});
// 離開 lines 圖層，不顯示 hoveredLine 圖層
map.on('mouseleave', 'lines', function() {
map.getCanvas().style.cursor = 'grab';
map.setLayoutProperty('hoveredLine', 'visibility', 'none')
});
});
</script>
</body>
</html>