[Mapbox GL]通过输入过滤标志

来源：互联网发布：手机视频裁剪软件编辑：程序博客网时间：2024/06/13 08:02
根据输入的图标名字过滤标志
<!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://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />    <style>        body { margin:0; padding:0; }        #map { position:absolute; top:0; bottom:0; width:100%; }    </style></head><body><style>    .filter-ctrl {        position: absolute;        top: 10px;        right: 10px;        z-index: 1;        width: 180px;    }    .filter-ctrl input[type=text] {        font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;        width: 100%;        border: 0;        background-color: #fff;        height: 40px;        margin: 0;        color: rgba(0,0,0,.5);        padding: 10px;        box-shadow: 0 0 0 2px rgba(0,0,0,0.1);        border-radius: 3px;    }</style><div id='map'></div><div class='filter-ctrl'>    <input id='filter-input' type='text' name='filter' placeholder='Filter by name' /></div><script>mapboxgl.accessToken = '<your access token here>';var places = {    "type": "FeatureCollection",    "features": [{        "type": "Feature",        "properties": {            "icon": "theatre"        },        "geometry": {            "type": "Point",            "coordinates": [-77.038659, 38.931567]        }    }, {        "type": "Feature",        "properties": {            "icon": "theatre"        },        "geometry": {            "type": "Point",            "coordinates": [-77.003168, 38.894651]        }    }, {        "type": "Feature",        "properties": {            "icon": "bar"        },        "geometry": {            "type": "Point",            "coordinates": [-77.090372, 38.881189]        }    }, {        "type": "Feature",        "properties": {            "icon": "bicycle"        },        "geometry": {            "type": "Point",            "coordinates": [-77.052477, 38.943951]        }    }, {        "type": "Feature",        "properties": {            "icon": "music"        },        "geometry": {            "type": "Point",            "coordinates": [-77.031706, 38.914581]        }    }, {        "type": "Feature",        "properties": {            "icon": "music"        },        "geometry": {            "type": "Point",            "coordinates": [-77.020945, 38.878241]        }    }, {        "type": "Feature",        "properties": {            "icon": "music"        },        "geometry": {            "type": "Point",            "coordinates": [-77.007481, 38.876516]        }    }]};var layerIDs = []; // Will contain a list used to filter against.var filterInput = document.getElementById('filter-input');var map = new mapboxgl.Map({    container: 'map',    style: 'mapbox://styles/mapbox/light-v9',    center: [-77.04, 38.907],    zoom: 11.15});map.on('load', function() {  /* 地图加载时的处理 */    // Add a GeoJSON source containing place coordinates and information.    map.addSource('places', {        "type": "geojson",        "data": places    });    places.features.forEach(function(feature) {        var symbol = feature.properties['icon'];        var layerID = 'poi-' + symbol;        // Add a layer for this symbol type if it hasn't been added already.        if (!map.getLayer(layerID)) {   /* getLayer(layerID)获取layerID的layer  */            map.addLayer({                "id": layerID,                "type": "symbol",                "source": "places",                "layout": {   /* 设置layout属性 */                    "icon-image": symbol + "-15",                    "icon-allow-overlap": true,                    "text-field": symbol,                    "text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],                    "text-size": 11,                    "text-transform": "uppercase",                    "text-letter-spacing": 0.05,                    "text-offset": [0, 1.5]                },                "paint": {    /* 设置paint属性 */                    "text-color": "#202",                    "text-halo-color": "#fff",                    "text-halo-width": 2                },                "filter": ["==", "icon", symbol] /* 根据icon名称过滤数据 */            });            layerIDs.push(layerID); /*push():数组添加成员*/        }    });    filterInput.addEventListener('keyup', function(e) {   /* element.addEventListener(type,callback(e)):添加type事件监听器，KeyUp事件是键盘上的某个键按下后再松开时触发，此处为input标签添加，通过keyup事件更新layer对应数据的可见性*/        // If the input value matches a layerID set        // it's visibility to 'visible' or else hide it.        var value = e.target.value.trim().toLowerCase(); /* e.target.property:获取事件目标的对应属性值，trim()消除字符串两端空格，toLowerCase()转换为小写 */        layerIDs.forEach(function(layerID) {    /* forEach遍历数组 */            map.setLayoutProperty(layerID, 'visibility',         /* setLayoutProperty()设置layer的对应Layout属性值 */                layerID.indexOf(value) > -1 ? 'visible' : 'none'); /* indexOf(value):indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,如果要检索的字符串值没有出现，则该方法返回 -1,字符位置是从 0 开始的 */        });    });});</script></body></html>
原文：https://www.mapbox.com/mapbox-gl-js/example/filter-markers-by-input/
0 0