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;

假设你有marker1marker2标记:

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

你可以这样做

var marker1 = new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.fromLonLat([-74.006,40.7127])
),  // Cordinates of New York's site
});
var marker2 = new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.fromLonLat([-14.006,40.7127])
),  // Cordinates of New York's center
});
var marker3 = new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.fromLonLat([-64.006,40.7127])
),  // Cordinates of New York's Town Hall
});
var vectorSource = new ol.source.Vector({
features: [marker1,marker2,marker3]
});

相关内容

  • 没有找到相关文章

最新更新