时间戳

首页 > 解决方案 > Javascript 对象数组

javascript - Javascript 对象数组

问题描述

我正在关注本教程并弄清楚如何将地图居中放置在我想要的位置以及如何在我想要的位置放置标记。

https://medium.com/attentive-ai/working-with-openlayers-4-part-2-using-markers-or-points-on-the-map-f8e9b5cae098

但是我需要添加多个标记。在文章中它说“如果要添加多个标记，可以将多个特征对象数组添加到源对象的特征键，这样您就可以在地图上显示多个标记。 ”，但我没有知道该怎么做。任何人都可以帮忙吗？

编辑1：

我正在使用后面的 ASP.Net C# 代码从数据库中检索坐标并生成 javascript，如下所示：

strMapScript += "<script type=\"text/javascript\">" + Environment.NewLine;
strMapScript += "var baseMapLayer = new ol.layer.Tile({" + Environment.NewLine;
strMapScript += "source: new ol.source.OSM()" + Environment.NewLine;
strMapScript += "});" + Environment.NewLine;
strMapScript += "var map = new ol.Map({" + Environment.NewLine;
strMapScript += "target: 'map'," + Environment.NewLine;
strMapScript += "layers: [ baseMapLayer]," + Environment.NewLine;
strMapScript += "view: new ol.View({" + Environment.NewLine;
strMapScript += "center: ol.proj.fromLonLat([??.264861,??.0527032]), " + Environment.NewLine;
strMapScript += "zoom: 16" + Environment.NewLine;
strMapScript += "})" + Environment.NewLine;
strMapScript += "});" + Environment.NewLine;
//Adding a marker on the mapvar
foreach (DataRow drCoordinate in dtblCoordinates.Rows)
{
  strMapScript += "marker = new ol.Feature({geometry: new ol.geom.Point(ol.proj.fromLonLat(" + Convert.ToString(drCoordinate["Coords"]) + ")),});" + Environment.NewLine;
  strMapScript += "var vectorSource = new ol.source.Vector({features: [marker]});" + Environment.NewLine;
  strMapScript += "var markerVectorLayer = new ol.layer.Vector({source: vectorSource,});" + Environment.NewLine;
  strMapScript += "map.addLayer(markerVectorLayer);" + Environment.NewLine;
}
strMapScript += "</script>";

编辑2：

根据您的评论和回答，我将代码的最后一部分修改为如下所示，并且可以正常工作：

//Adding a marker on the mapvar
foreach (DataRow drCoordinate in dtblCoordinates.Rows)
{
  strMapScript += "marker" + Convert.ToString(drCoordinate["Id"]) + " = new ol.Feature({geometry: new ol.geom.Point(ol.proj.fromLonLat(" + Convert.ToString(drCoordinate["Coords"]) + ")),});" + Environment.NewLine;
  lstMarkers.Add("marker" + Convert.ToString(drCoordinate["Id"]) + "");
}
strMapScript += "var vectorSource = new ol.source.Vector({features: [" + String.Join(",",lstMarkers) + "]});" + Environment.NewLine;
strMapScript += "var markerVectorLayer = new ol.layer.Vector({source: vectorSource,});" + Environment.NewLine;
strMapScript += "map.addLayer(markerVectorLayer);" + Environment.NewLine;

标签： javascriptarraysopenlayers

解决方案

假设你有marker1和marker2标记：

var vectorSource = new ol.source.Vector({
  features: [marker1, marker2]
});

推荐阅读