通过文本输入过滤符号
使用文本输入过滤地图上显示的符号;
<!DOCTYPE html>
<html lang="en">
<head>
<title>通过文本输入过滤符号</title>
<meta property="og:description" content="使用文本输入过滤地图上显示的符号" />
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.js'></script>
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<style>
.filter-group {
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-weight: 600;
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
border-radius: 3px;
width: 220px;
color: #fff;
}
.filter-group input[type='text'] {
width: 100%;
border: none;
background-color: #fff;
margin: 0;
cursor: pointer;
height: 35px;
padding: 10px;
border-radius: 3px;
}
</style>
<div id="map"></div>
<nav id="filter-group" class="filter-group"></nav>
<script>
const places = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {
'icon': 'theatre',
'title': '赌场剧院'
},
'geometry': {
'type': 'Point',
'coordinates': [-77.038659, 38.931567]
}
},
{
'type': 'Feature',
'properties': {
'icon': 'theatre',
'title': '埃弗雷特大都会剧院'
},
'geometry': {
'type': 'Point',
'coordinates': [-77.003168, 38.894651]
}
},
{
'type': 'Feature',
'properties': {
'icon': 'bar',
'title': '解决方案酒吧'
},
'geometry': {
'type': 'Point',
'coordinates': [-77.090372, 38.881189]
}
},
{
'type': 'Feature',
'properties': {
'icon': 'bicycle',
'title': '自行车道'
},
'geometry': {
'type': 'Point',
'coordinates': [-77.052477, 38.943951]
}
},
{
'type': 'Feature',
'properties': {
'icon': 'music',
'title': '9:30俱乐部'
},
'geometry': {
'type': 'Point',
'coordinates': [-77.023982, 38.91638]
}
},
{
'type': 'Feature',
'properties': {
'icon': 'bicycle',
'title': '自行车共享'
},
'geometry': {
'type': 'Point',
'coordinates': [-77.038887, 38.935645]
}
},
{
'type': 'Feature',
'properties': {
'icon': 'bar',
'title': '巴拉德酒吧'
},
'geometry': {
'type': 'Point',
'coordinates': [-77.038887, 38.90386]
}
},
{
'type': 'Feature',
'properties': {
'icon': 'music',
'title': '黑猫'
},
'geometry': {
'type': 'Point',
'coordinates': [-77.009003, 38.914581]
}
},
{
'type': 'Feature',
'properties': {
'icon': 'music',
'title': '丹迪莱恩'
},
'geometry': {
'type': 'Point',
'coordinates': [-77.003724, 38.975516]
}
},
{
'type': 'Feature',
'properties': {
'icon': 'bar',
'title': '大板酒吧'
},
'geometry': {
'type': 'Point',
'coordinates': [-77.090372, 38.991573]
}
}
]
};
const map = new maplibregl.Map({
container: 'map',
style:
'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
center: [-77.04, 38.907],
zoom: 11.15
});
function normalize(string) {
return string.trim().toLowerCase();
}
// 创建文本输入
const filterInput = document.createElement('input');
filterInput.type = 'text';
filterInput.placeholder = '按名称过滤...';
filterInput.addEventListener('keyup', (e) => {
const value = normalize(e.target.value);
// 根据输入过滤可见要素
map.setFilter('poi-layer', [
'all',
['has', 'title'],
[
'to-boolean',
[
'case',
['==', ['string', ['get', 'icon']], 'theatre'],
['==', value, ''],
['==', ['string', ['get', 'icon']], 'music'],
['==', value, ''],
['==', ['string', ['get', 'icon']], 'bar'],
['==', value, ''],
['==', ['string', ['get', 'icon']], 'bicycle'],
['==', value, ''],
false
]
]
]);
if (value) {
map.setFilter('poi-layer-labels', [
'all',
['has', 'title'],
[
'match',
['downcase', ['get', 'title']],
value,
true,
false
]
]);
} else {
map.setFilter('poi-layer-labels', null);
}
});
document.getElementById('filter-group').appendChild(filterInput);
map.on('load', () => {
// 添加一个GeoJSON源，包含所有兴趣点
map.addSource('places', {
'type': 'geojson',
'data': places
});
// 添加一个图层显示所有基于图标属性的兴趣点
map.addLayer({
'id': 'poi-layer',
'type': 'symbol',
'source': 'places',
'layout': {
'icon-image': ['get', 'icon'],
'icon-allow-overlap': true
}
});
// 添加一个图层用于POI标签，默认不可见
map.addLayer({
'id': 'poi-layer-labels',
'type': 'symbol',
'source': 'places',
'layout': {
'text-field': ['get', 'title'],
'text-variable-anchor': ['top', 'bottom', 'left', 'right'],
'text-radial-offset': 0.5,
'text-justify': 'auto'
},
'paint': {
'text-color': '#c62828'
},
'filter': ['==', 'title', '']
});
// 添加导航控件到地图
map.addControl(new maplibregl.NavigationControl());
});
</script>
</body>
</html>