衛星影像圖層
此範例示範如何在地圖中加入並切換衛星影像圖層，包含以下功能：
- 新增衛星圖層：在
style.load後透過map.addLayer()加入 raster 圖層 - 切換圖層顯示：使用按鈕搭配
map.onLayer()/map.offLayer()控制衛星圖顯示
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>衛星影像圖層</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://kw3dmap.localking.com.tw/openapi/loader/mapPlus-1.3.9.loader.js" crossorigin="anonymous" referrerpolicy="origin"></script>
<!-- Bootstrap CDN -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
#toolbar {
position: absolute;
top: 16px;
right: 16px;
width: fit-content;
height: fit-content;
}
</style>
</head>
<body>
<div id="map"></div>
<aside
id="toolbar"
class="d-flex flex-column align-items-center gap-3 bg-white p-2 pb-3 rounded-2 shadow"
>
<div class="pb-2 border-bottom border-secondary-subtle">
<img
src="https://kw3dmap.autoking.com.tw/kingway-logo.png"
alt="Kingway map"
width="44"
height="44"
/>
</div>
<div>
<input
type="checkbox"
class="btn-check"
id="toggleBtnSatellite"
autocomplete="off"
/>
<label
class="btn btn-outline-primary"
for="toggleBtnSatellite"
data-bs-toggle="tooltip"
data-bs-placement="left"
data-bs-title="顯示/隱藏衛星圖"
>
<i class="bi bi-gear-fill"></i>
</label>
</div>
</aside>
<script type="module">
const map = await new mapPlus(document.getElementById("map"), {
accessKey: 'get_your_key', // 聯絡勤崴國際，取得專屬key
accessToken: 'get_your_token', // 聯絡勤崴國際，取得專屬token
style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt', // 樣式
center: [121.53559860212545, 25.029308142529132], // 地圖中心點
pitch: 0, // 視角傾斜角度, 0~85
bearing: 0, // 視角旋轉角度, 0~360
zoom: 16, // 縮放級別
maxZoom: 18, // 最大縮放級別
minZoom: 7, // 最小縮放級別
});
map.on("style.load", () => {
// 關閉3D建築
map.offLayer("base3d");
/* ══════════════════════════════════════════════════════════════════════════
* 新增衛星圖層：
- 調整 tileSize 可變更圖磚顯示的精細度。
- 調整 paint 中的 raster-opacity 可變更圖層繪製的透明度。
══════════════════════════════════════════════════════════════════════════ */
map.addLayer(
{
// 圖層 ID
id: "satellite",
// 圖層類別
type: "raster",
// 圖層的資料來源
source: {
type: "raster",
tiles: [
"https://wmts.nlsc.gov.tw/wmts/PHOTO2/default/GoogleMapsCompatible/{z}/{y}/{x}",
],
// 圖磚像素大小，將會決定地圖載入的精細度
tileSize: 512,
},
// 圖層的繪製屬性
paint: {
// 透明度（0-1）
"raster-opacity": 1,
},
},
// 將衛星圖層加在 nav_croad11 圖層之上
"nav_croad11"
);
});
// Bootstrap 提示訊息 初始化
const tooltipList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
[...tooltipList].map((tooltip) => new bootstrap.Tooltip(tooltip));
/* ══════════════════════════════════════════════════════════════════════════
* 當點擊按鈕時可控制衛星圖的隱藏/顯示。
══════════════════════════════════════════════════════════════════════════ */
const toggleLayer = (checkboxElement, layerName) => {
if (checkboxElement.getAttribute("checked")) {
map.offLayer(layerName);
checkboxElement.removeAttribute("checked");
} else {
map.onLayer(layerName);
checkboxElement.setAttribute("checked", true);
}
// 重新繪製地圖以立即顯示/關閉衛星圖層
map.redraw();
};
const toggleBtnSatellite = document.getElementById("toggleBtnSatellite");
toggleBtnSatellite.setAttribute("checked", true);
toggleBtnSatellite.addEventListener("click", () =>
toggleLayer(toggleBtnSatellite, "satellite")
);
</script>
</body>
</html>
<script src="https://kw3dmap.localking.com.tw/openapi/loader/mapPlus-1.3.9.loader.js" crossorigin="anonymous" referrerpolicy="origin"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
<script type="module">
const map = await new mapPlus(document.getElementById("map"), {
accessKey: 'get_your_key', // 聯絡勤崴國際，取得專屬key
accessToken: 'get_your_token', // 聯絡勤崴國際，取得專屬token
style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt', // 樣式
center: [121.53559860212545, 25.029308142529132], // 地圖中心點
pitch: 0, // 視角傾斜角度, 0~85
bearing: 0, // 視角旋轉角度, 0~360
zoom: 16, // 縮放級別
maxZoom: 18, // 最大縮放級別
minZoom: 7, // 最小縮放級別
});
map.on("style.load", () => {
// 關閉3D建築
map.offLayer("base3d");
/* ══════════════════════════════════════════════════════════════════════════
* 新增衛星圖層：
- 調整 tileSize 可變更圖磚顯示的精細度。
- 調整 paint 中的 raster-opacity 可變更圖層繪製的透明度。
══════════════════════════════════════════════════════════════════════════ */
map.addLayer(
{
// 圖層 ID
id: "satellite",
// 圖層類別
type: "raster",
// 圖層的資料來源
source: {
type: "raster",
tiles: [
"https://wmts.nlsc.gov.tw/wmts/PHOTO2/default/GoogleMapsCompatible/{z}/{y}/{x}",
],
// 圖磚像素大小，將會決定地圖載入的精細度
tileSize: 512,
},
// 圖層的繪製屬性
paint: {
// 透明度（0-1）
"raster-opacity": 1,
},
},
// 將衛星圖層加在 nav_croad11 圖層之上
"nav_croad11"
);
});
// Bootstrap 提示訊息 初始化
const tooltipList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
[...tooltipList].map((tooltip) => new bootstrap.Tooltip(tooltip));
/* ══════════════════════════════════════════════════════════════════════════
* 當點擊按鈕時可控制衛星圖的隱藏/顯示。
══════════════════════════════════════════════════════════════════════════ */
const toggleLayer = (checkboxElement, layerName) => {
if (checkboxElement.getAttribute("checked")) {
map.offLayer(layerName);
checkboxElement.removeAttribute("checked");
} else {
map.onLayer(layerName);
checkboxElement.setAttribute("checked", true);
}
// 重新繪製地圖以立即顯示/關閉衛星圖層
map.redraw();
};
const toggleBtnSatellite = document.getElementById("toggleBtnSatellite");
toggleBtnSatellite.setAttribute("checked", true);
toggleBtnSatellite.addEventListener("click", () =>
toggleLayer(toggleBtnSatellite, "satellite")
);
</script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"
/>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
#toolbar {
position: absolute;
top: 16px;
right: 16px;
width: fit-content;
height: fit-content;
}
</style>