[英]how to add lines between point in openlayers
我正在嘗試在地圖上的兩點之間添加一條線。 我有以下代碼,但網頁只顯示我沒有我想要的行的基本地圖。
如何將此行添加到OpenLayers地圖?
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([ -95.36,29.75]),
zoom: 10
})
});
var coords = [[-95.36,29.75], [-96.36,30.75]];
var lineString = new ol.geom.LineString(coords);
// transform to EPSG:3857
lineString.transform('EPSG:4326', 'EPSG:3857');
// create the feature
var feature = new ol.Feature({
geometry: lineString,
name: 'Line'
});
var lineStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 10
})
});
var raster = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
});
var source = new ol.source.Vector({
features: [feature]
});
var vector = new ol.layer.Vector({
source: source,
style: [lineStyle]
});
map.addLayer(vector);
</script>
`
您的代碼包含OpenLayers v5.x中的javascript錯誤(以及v4.6.5中未出現的v4.6.5):
Uncaught TypeError: ol.source.MapQuest is not a constructor
刪除指定以下內容的代碼:
var raster = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
});
並顯示該行。
代碼段:
var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([-95.36, 29.75]), zoom: 10 }) }); var coords = [ [-95.36, 29.75], [-96.36, 30.75] ]; var lineString = new ol.geom.LineString(coords); // transform to EPSG:3857 lineString.transform('EPSG:4326', 'EPSG:3857'); // create the feature var feature = new ol.Feature({ geometry: lineString, name: 'Line' }); var lineStyle = new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#ffcc33', width: 10 }) }); var source = new ol.source.Vector({ features: [feature] }); var vector = new ol.layer.Vector({ source: source, style: [lineStyle] }); map.addLayer(vector);
html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px; }
<link rel="stylesheet" href="https://openlayers.org/en/v5.2.0/css/ol.css" type="text/css"> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script> <div id="map" class="map"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.