如何使用不同的鍵從對象中提取2個值

Question

我正在使用mapbox創建基於作者地理位置的具有一堆書名的地圖。

我目前正在執行以下操作，以提取標題的名稱以及作者的位置。

   var nameValues = names.map((i) => ({i}))
console.log('NAMES VALUES', nameValues)

var extractedValues = business1.map(({type, geometry}) => ({type, geometry}));
 newObj = {
  type: "FeatureCollection",
  features: extractedValues,
properties: ''



};

var i = 0;
while (names.length >0 && i < names.length){
  var properties = {};
  properties.title= names[i];
  extractedValues[i]["properties"] = properties;
  i++;
}     

像這樣添加到地圖中

  // Add the data to your map as a lyer
    map.addLayer({
      id: 'business_location',
      type: 'symbol',
      minzoom: zoomthreshold,

      // Add a GeoJSON source containing place coordinates and information.
      source:{
        type:'geojson',
        data:newObj
      },
      layout: {
         'icon-image': 'restaurant-15',
  'icon-allow-overlap': true,
      }
    });

點擊方法

map.on('click', function(e) {
  // Query all the rendered points in the view
  var features = map.queryRenderedFeatures(e.point, { layers: ['business_location'] });
  var selectedFeatureIndex;


var objValues = newObj


for(i=0; i< names.length;i++){




      console.log(business1)
  dataPosition = i;

    var clickedPoint = objValues.features[i]

    var clickedName = objValues.features[clickedP.dataPosition].properties.title

    console.log(clickedName)
    console.log('clicws',clickedPoint)



    // 1. Fly to the point
    flyToStore(clickedPoint);
    // 2. Close all other popups and display popup for clicked store
    createPopUp(clickedPoint, clickedName);
    // 3. Highlight listing in sidebar (and remove highlight for all other listings)
    var activeItem = document.getElementsByClassName('active');
    if (activeItem[0]) {
      activeItem[0].classList.remove('active');
    }
    // Find the index of the store.features that corresponds to the clickedPoint that fired the event listener
    var selectedFeature = clickedPoint._geometry.coordinates;
    console.log(selectedFeature)

    for (var i = 0; i < business1.length; i++) {
      if (business1[i].geometry.coordinates === selectedFeature) {
        selectedFeatureIndex = i;

      }
    }
    // Select the correct list item using the found index and add the active class
    var listing = document.getElementById('listing-' + selectedFeatureIndex);
    listing.classList.add('active');
  }

}
});

這是newObj的輸出（該對象正在尋找以獲取名稱和幾何形狀）。

{type: "FeatureCollection", features: Array(7), nameValues: Array(7)
}
features: Array(7)
0: {type: "Feature", geometry: {…
    }
}
1: {type: "Feature", geometry: {…
    }
}
2: {type: "Feature", geometry: {…
    }
}
3: {type: "Feature", geometry: {…
    }
}
4: {type: "Feature", geometry: {…
    }
}
5: {type: "Feature", geometry: {…
    }
}
6:
geometry: {type: "Point", coordinates: Array(2)
}
type: "Feature"
__proto__: Object
length: 7
__proto__: Array(0)
nameValues: Array(7)
0: {i: "Using Adversarial Autoencoders for Multi-Modal Automatic Playlist Continuation"
}
1: {i: "An update on the 2014 report: "Review of Recircula…em Technologies and their Commercial Application""
}
2: {i: "An update on the 2014 report: "Review of Recircula…em Technologies and their Commercial Application""
}
3: {i: "Comparison of Alternative Meat Inspection Regimes …ontrolled Housing – Considering the Cost of Error"
}
4: {i: "ENSO Drives interannual variation of forest woody growth across the tropics"
}
5: {i: "ENSO Drives interannual variation of forest woody growth across the tropics"
}
6: {i: "The relationship between the abundance of the Nige…on concern in Mbam-Djerem National Park, Cameroon"
}
length: 7

基本上，我希望能夠單擊位置圖塊，並使其顯示與之對應的特定標題。 當前，標題始終是namesValue對象中的第一個元素，因為數據位置始終設置為0。

但是當我點擊3點時，它應該鏈接到namesValue中的第3個值

Answer 1

您必須以其他方式構建json， title是功能的屬性：

{
  "type": "Feature",
  "geometry": {
   "type": "Point",
   "coordinates": [-77.03238901390978, 38.913188059745586]
   },
  "properties": {
   "title": "Mapbox DC",
   "icon": "monument"
   }
}

您必須迭代nameValues數組以在每個功能的properties內分配title 。

var i = 0;
while (names.length >0 && i < names.length){
  var properties = {};
  properties.title= names[i];
  extractedValues[i]["properties"] = properties;
  i++;
}