我正在尝试开始处理一个基于 OpenMapLayers 的项目，我所做的是在您的网站上将基本示例复制粘贴到 html 文件中并运行它，一切都按预期工作，而不是我基本上尝试在新的 MVC 项目上做同样的事情，但没有渲染任何东西。知道为什么会这样吗？
@{
ViewBag.Title = "Home Page";
}
<h2>Getting started</h2>
<div id="mapdiv"></div>
@section scripts{
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
var lonLat = new OpenLayers.LonLat(-0.1279688, 51.5077286)
.transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);
var zoom = 16;
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(lonLat));
map.setCenter(lonLat, zoom);
</script>
}
在这里，我为您做了一个例子，让我知道这是否是您正在寻找的。
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<title>GeoJSON to Points</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
const geojsonObject = {
'type': 'FeatureCollection',
'crs': {
'type': 'name',
'properties': {
'name': 'EPSG:3857'
}
},
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': ol.proj.fromLonLat([37.41, 8.82])
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': ol.proj.fromLonLat([38.41, 9.82])
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': ol.proj.fromLonLat([37.41, 9.82])
}
}
]
};
const style = new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'red', width: 2})
})
});
const vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
const vectorLayer = new ol.layer.Vector({
source: vectorSource,
style
});
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 8
})
});
</script>
</body>
</html>更新
如果您的 JSON 格式是您在问题注释中描述的格式，这应该有效，
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<title>JSON to Points</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
const jsonObject = {
"coords": [
{ "latitude": "8.417334", "longitude": "45.322557" },
{ "latitude": "8.411594", "longitude": "45.324352"}
]
};
const features = [];
for(const coord of jsonObject.coords) {
features.push(new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.fromLonLat([coord.longitude, coord.latitude]),
'XY'
)
}));
}
const style = new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'red', width: 2})
})
});
const vectorSource = new ol.source.Vector({
features
});
const vectorLayer = new ol.layer.Vector({
source: vectorSource,
style
});
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([45.32, 8.41]),
zoom: 14
})
});
</script>
</body>
</html>