OpenLayers: perfil de elevación de líneas con deslizador

Question

Tengo un cliente OpenLayers que muestra pistas desde una fuente vectorial. Me gustaría mostrar un perfil de elevación de la pista. Al pasar el ratón sobre un punto del perfil de elevación, debería aparecer un marcador en el punto del mapa correspondiente. ¿Existe algún recurso en línea para construir esto?

Tutorial para un control similar en Google Maps API

Ejemplo de página que utiliza el control

Answer 1

Sería útil saber qué tipo de perfil de elevación está utilizando para conseguirlo, pero en realidad no importa.

Yo lo he conseguido asignando una función a un evento hover en un gráfico Kendo pero se podría hacer usando una tabla de datos o similar. Supongo que está utilizando Openlayers 3.

Básicamente, si identifica la latitud y la longitud del elemento, tendrá que convertir estos valores en una coordenada que coincida con la proyección del mapa y, a continuación, crear un elemento con estas coordenadas y añadirlo al mapa.

Sólo puede añadirse al mapa creando una fuente vectorial y añadiendo esta característica a la fuente, creando después una capa que utilice esta fuente y añadiendo esta capa al mapa.

Te facilitaré el código que he utilizado y espero que puedas averiguarlo a partir de ahí.

{
        // if a previous version of the layer was added, remove it
        if (session.map.elevationMarkerLayer) {
            session.map.removeLayer(session.map.elevationMarkerLayer);
        }

        var LonLat = [];
        LonLat.push(e.dataItem.Longitude, e.dataItem.Latitude);
        var coords = ol.proj.transform(LonLat, 'EPSG:4326', 'EPSG:3857');

        // set a style for the icon
        var iconStyle = new ol.style.Style({
            image: new ol.style.RegularShape({
                fill: new ol.style.Fill({
                    color: '#F58026'
                }),
                stroke: new ol.style.Stroke({
                    color: '#000',
                    width: 2
                }),
                points: 3,
                radius: 15,
                rotation: 0,//Math.PI / 4,
                angle: 0
            }),
            text: new ol.style.Text({
                text: e.value.toString(),
                scale: 1.3,
                offsetX: 0,
                offsetY: 15,
                fill: new ol.style.Fill({
                    color: '#F58026'
                }),
                stroke: new ol.style.Stroke({
                    color: '#000',
                    width: 4
                })
            })
        });
        var elevationMarker = new ol.Feature({
            type: 'elevationMarker',
            geometry: new ol.geom.Point(coords)
        });
        session.map.elevationMarkerLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [elevationMarker]
            }),
            style: iconStyle,
            zIndex: 30
        });
        session.map.addLayer(session.map.elevationMarkerLayer);
        // timeout method to make this temporary
        setInterval(function () {
            session.map.removeLayer(session.map.elevationMarkerLayer);
        }, 10000);
    }