OpenLayers:无法将坐标线串添加到地图
OpenLayers: Can't add a linestring of coordinates to a map
我在显示基于现有坐标列表的线串时遇到问题,希望得到一些帮助。下面是我的代码,它显示了一个 OpenLayers5 地图,但没有覆盖线串。
我读过很多不同的话题
() 和 API 文档,但我不知道我遗漏了什么。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var view = new ol.View({
center: ol.proj.fromLonLat([10,50]),
zoom: 14
})
//Dummy coords
var coordinates = [
[10, 50],
[11, 51],
[12, 55]
];
var layerLines = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.LineString(coordinates),
name: 'Line'
})]
}),
style : new ol.style.Style({
stroke : new ol.style.Stroke({
strokeColor: '#ff0000',
strokeWidth: 5
})
})
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: view
});
map.addLayer(layerLines);
</script>
</body>
</html>
两个错误。首先,它是 width
和 color
,而不是 strokeWidth/Color
。其次,您将中心从 lon/lat 重新投影到 WebMercator,但忘记对线坐标做同样的事情 - 所以您的线实际上位于几内亚湾的某个地方(距离 0,0 点 10/50 米) .
这是更正后的版本。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"
type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var view = new ol.View({
center: ol.proj.fromLonLat([10, 50]),
zoom: 14
})
//Dummy coords
var coordinates = [
ol.proj.fromLonLat([10, 50]),
ol.proj.fromLonLat([11, 51]),
ol.proj.fromLonLat([12, 55])
];
var layerLines = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.LineString(coordinates),
name: 'Line'
})]
}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 3
})
})
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: view
});
map.addLayer(layerLines);
</script>
</body>
</html>
我在显示基于现有坐标列表的线串时遇到问题,希望得到一些帮助。下面是我的代码,它显示了一个 OpenLayers5 地图,但没有覆盖线串。
我读过很多不同的话题
(
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var view = new ol.View({
center: ol.proj.fromLonLat([10,50]),
zoom: 14
})
//Dummy coords
var coordinates = [
[10, 50],
[11, 51],
[12, 55]
];
var layerLines = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.LineString(coordinates),
name: 'Line'
})]
}),
style : new ol.style.Style({
stroke : new ol.style.Stroke({
strokeColor: '#ff0000',
strokeWidth: 5
})
})
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: view
});
map.addLayer(layerLines);
</script>
</body>
</html>
两个错误。首先,它是 width
和 color
,而不是 strokeWidth/Color
。其次,您将中心从 lon/lat 重新投影到 WebMercator,但忘记对线坐标做同样的事情 - 所以您的线实际上位于几内亚湾的某个地方(距离 0,0 点 10/50 米) .
这是更正后的版本。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"
type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var view = new ol.View({
center: ol.proj.fromLonLat([10, 50]),
zoom: 14
})
//Dummy coords
var coordinates = [
ol.proj.fromLonLat([10, 50]),
ol.proj.fromLonLat([11, 51]),
ol.proj.fromLonLat([12, 55])
];
var layerLines = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.LineString(coordinates),
name: 'Line'
})]
}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 3
})
})
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: view
});
map.addLayer(layerLines);
</script>
</body>
</html>