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数组才能在每个功能的title内分配properties。

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

如何使用不同的键从对象中提取2个值

1 个答案: