特定學區範圍顯示
範例展示
原始碼
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>
<div class="filter">
<fieldset>
<input id="filter" type="text" placeholder="輸入名稱以過濾結果" />
</fieldset>
<div id="list"></div>
</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.037853], // 初始中心座標，格式為 [lng, lat]
zoom: 13.5, // 初始 ZOOM LEVEL; [0-20, 0 為最小 (遠), 20 ;最大 (近)]
minZoom: 6, // 限制地圖可縮放之最小等級, 可省略, [0-19.99]
maxZoom: 19.99, // 限制地圖可縮放之最大等級, 可省略 [0-19.99]
speedLoad: false,
attributionControl: false
}).addControl(new gomp.AttributionControl({
compact: false
}));
//需要特別highlight的學區
let schoolDistOptions = {
'school_district_es': {
'common_fill-color': '#000',
'common_fill-opacity': 0.3,
'common_text-color': '#333',
'common_text-halo-color': '#fff',
'highlight_fill-color': '#ffff00',
'highlight_fill-opacity': 0.4,
'highlight_text-color': '#ffff00',
'highlight_text-halo-color': '#000',
'highlightSchool': ["仁愛國小","懷生國小","仁愛國小 / 三興國小"],
'darkLineColor': '#666',
'lightLineColor': '#ffff00'
},
'school_district_jhs': {
'common_fill-color': '#000',
'common_fill-opacity': 0.15,
'common_text-color': '#333',
'common_text-halo-color': '#fff',
'highlight_fill-color': '#ff6f00',
'highlight_fill-opacity': 0.5,
'highlight_text-color': '#ff6f00',
'highlight_text-halo-color': '#000',
'highlightSchool': ["仁愛國中"],
'darkLineColor': '#333',
'lightLineColor': '#ff6f00'
}
}
map.on("load", function() {
map.addSource("school_dist", {
type: "geojson",
data: "https://api.map8.zone/data/school-district.json"
});
schoolDistType.forEach(function(name, i) {
let layerOptions = {
'fill-color': [],
'fill-opacity': [],
'text-color': [],
'text-halo-color': []
};
Object.keys(layerOptions).map(function(key, i) {
let optionArray = ['match', ['get', 'schoolname']];
schoolDistOptions[name]['highlightSchool'].forEach(function(value) {
optionArray.push(value, schoolDistOptions[name]['highlight_' + key]);
});
optionArray.push(schoolDistOptions[name]['common_' + key]);
layerOptions[key] = optionArray;
});
map.addLayer({
'id': name,
'type': "fill",
'source': "school_dist",
'source-layer': name,
'paint': {
'fill-color': layerOptions['fill-color'],
'fill-opacity': layerOptions['fill-opacity']
},
'layout': {
'visibility': 'none'
}
});
map.addLayer({
'id': name + '_line_black',
'type': "line",
'source': "school_dist",
'source-layer': name,
'paint': {
'line-color': schoolDistOptions[name]['darkLineColor'],
'line-opacity': 1,
'line-width': 0.5
},
'layout': {
'line-join': 'miter',
'visibility': 'none'
}
});
map.addLayer({
'id': name + '_line',
'type': "line",
'source': "school_dist",
'source-layer': name,
'paint': {
'line-color': schoolDistOptions[name]['lightLineColor'],
'line-opacity': 1,
'line-width': 3
},
'layout': {
'line-join': 'miter',
'visibility': 'none'
}
}, name + '_line_black');
map.addLayer({
'id': name + '_text',
'type': "symbol",
'source': "school_dist",
'source-layer': name,
'layout': {
'text-field': [
'format',
['get', 'schoolname'], {},
'\n ', {},
'學區', {'font-scale': .8},
],
'text-font': ["Open Sans Bold"],
'text-size': 15,
'visibility': 'none'
},
'paint': {
'text-color': layerOptions['text-color'],
'text-halo-color': layerOptions['text-halo-color'],
'text-halo-width': 1
}
});
});
$('#elementarySchool').click();
});
function toggleSchoolDistLayers(target) {
if (target == schoolDistType[0]) {
setSchoolDistLayerVisibility(schoolDistType[0], 'visible');
setSchoolDistLayerVisibility(schoolDistType[1], 'none');
}
else if (target == schoolDistType[1]) {
setSchoolDistLayerVisibility(schoolDistType[0], 'none');
setSchoolDistLayerVisibility(schoolDistType[1], 'visible');
}
else {
setSchoolDistLayerVisibility(schoolDistType[0], 'none');
setSchoolDistLayerVisibility(schoolDistType[1], 'none');
}
}
function setSchoolDistLayerVisibility(schoolDistType, visibility) {
let layerNameSuffixes = ['', '_line', '_line_black', '_text'];
layerNameSuffixes.forEach(function(v) {
map.setLayoutProperty(schoolDistType + v, "visibility", visibility);
});
}