如何使用另一个属性返回特定的 Geojson 功能属性，例如按名称返回经度属性？

Question

我正在尝试使用 Mapbox 创建一个界面，该界面可以缩放到用户使用此功能单击的多边形，同时还更新非地图 div 中的下拉菜单值。

当用户点击地图中的多边形/城镇时，它会使用此map.on('click...) 脚本放大到正确的要素。

   map.on('click', 'Map Layer', function (e) {
            townnames = e.features[0].properties.Object_Name;
            townlat = e.features[0].properties.Object_latitude;
            townlong = e.features[0].properties.Object_longitude;
      map.setFilter('LayerFiltered', ['==', 'TOWN_NAME', Object_Name]);
      map.setFilter('LayerClicked', ['!=', 'TOWN_NAME', Object_Name]);
      map.setLayoutProperty('LayerFiltered', 'visibility', 'visible');
      map.flyTo({
      center: [
        townlong, townlat], 
        zoom : 11.5
});

但是，我尝试使用下拉菜单触发相同的功能。

我已经弄清楚如何使用下拉菜单中选项中的内部 HTML 值过滤图层，并将它们设置为等于 setFilter 中的“Object_Name”。但是有什么方法可以从与基于“TOWN_NAME”等属性之一的功能相关联的geojson返回其他属性？

换句话说，我可以使用下拉菜单中的变量，而不是在用户单击某个功能时返回e.features[0].properties.Object_longitude，而是当他们单击下拉菜单中的关联值时，它会返回一些内容，效果如下： "features.TOWN_NAME=DROPDOWN_VALUE_NAME".properties.Object_longitude"?

如果不清楚，我深表歉意。

Answer 1

下拉菜单不会触发加载事件。您必须将上面的工作分解为由地图和下拉菜单的处理程序调用的通用方法。

编辑：下拉菜单没有被分配点击事件，需要给一个监听器来调用一个函数，该函数也被地图对象点击监听器调用。

demo

// Add an event listener for the links in the sidebar listing
                listings.addEventListener('change', function () {
                    // Update the currentFeature to the store associated with the clicked link
                    var clickedListing = data.features[listings.selectedIndex];
                    // 1. Fly to the point associated with the clicked link
                    flyToStore(clickedListing);
                    // 2. Close all other popups and display popup for clicked store
                    createPopUp(clickedListing);
                });
        }


// Add an event listener for when a user clicks on the map
        map.on('click', function (e) {
            // Query all the rendered points in the view
            var features = map.queryRenderedFeatures(e.point, { layers: ['locations'] });
            if (features.length) {
                var clickedPoint = features[0];
                // 1. Fly to the point
                flyToStore(clickedPoint);
                // 2. Close all other popups and display popup for clicked store
                createPopUp(clickedPoint);

            // Find the index of the store.features that corresponds to the clickedPoint that fired the event listener
            var selectedFeature = clickedPoint.properties.address;

            for (var i = 0; i < stores.features.length; i++) {
                if (stores.features[i].properties.address === selectedFeature) {
                    selectedFeatureIndex = i;
                }
            }
            // Select the correct list item using the found index
            var listings = document.getElementById('mySelect').selectedIndex = selectedFeatureIndex ;
        }
    });