OpenLayers 3 - dibujar múltiples líneas/trayectos basados en coordenadas

Question

OpenLayers 3 - dibujar múltiples líneas/trayectos basados en coordenadas

Preguntado el 30 de Octubre, 2014: Cuando se hizo la pregunta
6007 visitas: Cuantas visitas ha tenido la pregunta
1 Respuestas: Cuantas respuestas ha tenido la pregunta
Resuelta: Estado actual de la pregunta

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

Busqué en Google, encontré pocos ejemplos pero ninguno de ellos 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>

Un eslabón perdido:

http://jsfiddle.net/tr8691ev/

Gracias.

Preguntado el 30 de Octubre, 2014 por Mykola

0 votos

Indique los ejemplos que desea aplicar en su solicitud. ¿Le gustaría definir los puntos de inicio y final de las líneas manualmente o tener algunas coordenadas predefinidas para conectar?

Comentado el 30 de Octubre, 2014 por Mike

0 votos

Para este ejemplo me gustaría conectar los puntos aleatorios que se almacenan en el array de markres.

Comentado el 30 de Octubre, 2014 por Mykola

Answer 1

1 Respuestas

Answer 2

14voto

Mike Puntos 11

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

He conseguido crear un fiddle .

Permítame explicarle algunos de los aspectos clave para lograr su cometido.

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, que es la habitual. La propiedad features de la fuente, sin embargo toma un array de features, por lo que si no quieres añadirlos con el addFeature() hay que proporcionar un array con un elemento.

El geometry de la característica maneja el tipo de la característica. En este caso, sólo se necesita una única línea, por lo que la propiedad ol.geom.LineString es el adecuado. Para las clases multidimensionales (líneas, polígonos), tiene que proporcionar una matriz de coordenadas, o matrices bidimensionales para las características múltiples. La página web 'XY' es una propiedad opcional, llamada layout. Con esta propiedad se puede definir si se proporciona una coordenada Z o una medida (M) en el array. La dirección name también es opcional.

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

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

Respondido el 30 de Octubre, 2014 por Mike (11 Puntos )

1 votos

Gracias, esto funciona de maravilla. También, un gran agradecimiento por la explicación, me fui a través de la documentación y los ejemplos dados, pero no podía entender esto. Saludos

Comentado el 30 de Octubre, 2014 por Mykola

0 votos

js fiddle jsfiddle.net/GFarkas/tr8691ev/1 no funciona pueden arreglar esto por favor

Comentado el 27 de Marzo, 2021 por Yusuf Khan

OpenLayers 3 - dibujar múltiples líneas/trayectos basados en coordenadas

Respuesta

Preguntas Destacadas

Etiquetas mas usadas

i-Ciencias.com

Powered by:

OpenLayers 3 - dibujar múltiples líneas/trayectos basados en coordenadas

Respuesta

Preguntas relacionadas

Preguntas Destacadas

Etiquetas mas usadas

En nuestra red

i-Ciencias.com

Powered by: