OpenLayers 3 - dibuja múltiples líneas / caminos basados en coordenadas

Estoy tratando de dibujar una (s) línea (s) basada en coordenadas de dar (punto inicial y final).

Busqué en Google, encontré algunos ejemplos, pero ninguno parece funcionar probablemente porque son para OL2, así que este es mi último recurso.

Las coordenadas están ubicadas en una matriz de marcadores

<!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>

Enlace de violín:

http://jsfiddle.net/tr8691ev/

openlayers Malinois
fuente

Proporcione los ejemplos que desea aplicar en su solicitud. ¿Desea definir los puntos de inicio y fin de las líneas manualmente o tiene algunas coordenadas predefinidas para conectarse?

Gabor Farkas

Para este ejemplo, me gustaría conectar los puntos aleatorios que están almacenados en la matriz markres.

Malinois

Respuestas:

La creación de características puede ser un poco complicada en OpenLayers 3. No hay ejemplos oficiales de ol.source.Vectorcapas, la mayoría de ellas están trabajando con GeoJSON, o algún otro formato de intercambio de datos.

He logrado crear un violín de trabajo .

Permíteme explicarte algunos de los aspectos clave para lograr tu tarea.

var layerLines = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [new ol.Feature({
            geometry: new ol.geom.LineString(markers, 'XY'),
            name: 'Line'
        })]
    })
});

La capa vectorial toma una fuente vectorial, eso es habitual. Sin embargo, la propiedad de características de la fuente toma una matriz de características, por lo que si no desea agregarlas con el addFeature()método, debe proporcionar una matriz con un elemento.

La geometrypropiedad de la característica maneja el tipo de la característica. En este caso, solo necesita una sola línea, por lo que el ol.geom.LineStringtipo es el correcto. Para las clases multidimensionales (líneas, polígonos), debe proporcionar una matriz de coordenadas o matrices bidimensionales para funciones múltiples. La 'XY'propiedad es opcional, llamada diseño. Con esta propiedad, puede definir si se proporciona una coordenada Z o una medida (M) en la matriz. La namepropiedad también es opcional.

El último truco es la transformación de coordenadas en la AddMarkers()función. Para crear líneas adecuadas, debe pasar una matriz transformada de coordenadas en la markermatriz.

markers[i]= ol.proj.transform([x,y], 'EPSG:4326',   'EPSG:3857');

Gabor Farkas
fuente

Gracias, esto funciona como un encanto. Además, muchas gracias por la explicación, revisé la documentación y di ejemplos, pero no pude resolver esto. Saludos

Malinois

OpenLayers 3 - dibuja múltiples líneas / caminos basados ​​en coordenadas

Respuestas:

OpenLayers 3 - dibuja múltiples líneas / caminos basados en coordenadas