Я пытаюсь нарисовать линию (ы) на основе дать координаты (начальная и конечная точка).
Погуглил, нашел несколько примеров, но ни один из них, кажется, не работает, вероятно, потому что они для OL2, так что это мое последнее средство.
Координаты расположены в массиве маркеров
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/ol.css" type="text/css">
<style>
.map {
height: 100%;
width: 100%;
}
</style>
<script src="build/ol.js" type="text/javascript"></script>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
// inicijalizacija mape
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'osm'}) // Street mapa -> osm
})
],
// pozicioniranje mape
view: new ol.View({
center: ol.proj.transform([17.813988, 43.342019], 'EPSG:4326', 'EPSG:3857'), //koordinate -> obrnuto od google-a
zoom: 3
})
});
var vectorSource = new ol.source.Vector({
//create empty vector
});
var markers = [];
function AddMarkers() {
//create a bunch of icons and add to source vector
for (var i=0;i<50;i++){
var x= Math.random()*360-180;
var y= Math.random()*180-90;
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([x,y], 'EPSG:4326', 'EPSG:3857')),
name: 'Marker ' + i
});
markers[i]= [x,y];
vectorSource.addFeature(iconFeature);
}
//create the style
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'http://upload.wikimedia.org/wikipedia/commons/a/ab/Warning_icon.png'
}))
});
//add the feature vector to the layer vector, and apply a style to whole layer
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: iconStyle
});
return vectorLayer;
}
var layerMarkers = AddMarkers();
map.addLayer(layerMarkers);
console.log(markers);
</script>
</body>
</html>
Скриптовая ссылка:
openlayers
малинуа
источник
источник
Ответы:
Создание элементов может быть довольно сложным в OpenLayers 3. Официальных примеров для
ol.source.Vector
слоев не существует, большинство из них работают с GeoJSON или другим форматом обмена данными.Мне удалось создать рабочую скрипку .
Позвольте мне объяснить некоторые из ключевых аспектов достижения вашей задачи.
Векторный слой берет векторный источник, что обычно. Однако свойство features источника принимает массив функций, поэтому, если вы не хотите добавлять их с помощью
addFeature()
метода, вы должны предоставить массив с одним элементом.geometry
Свойство функции обрабатывает тип объекта. В этом случае вам нужна только одна строка, поэтомуol.geom.LineString
тип является правильным. Для многомерных классов (линий, многоугольников) вы должны предоставить массив координат или двумерные массивы для многофункциональных объектов.'XY'
Свойство является необязательным один, называемый макет. С помощью этого свойства вы можете определить, предоставляется ли в массиве координата Z или меры (M).name
Свойство является необязательным, тоже.Последний трюк - это преобразование координат в
AddMarkers()
функции. Чтобы создать правильные линии, вы должны передать преобразованный массив координат вmarker
массиве.источник