DevAndy | OpenStreetMap, OpenLayers Map anzeigen, Marker setzen und Route hinzufügen

einfacher Open Layer Code, mit dem man eine Linie zwischen 2 Punkten erstellen kann.

Diese bekommen am Anfangspunkt einen Marker, am Ende einen Marker und dazwischen einen.

Dies könnte z.B. so Aussehen:

<html>
<head>
    <title>Draw MultiLines</title>
    <meta charset="utf-8" />
</head>
<body>
    <div id="map" style="top: 0; left: 0; bottom: 0; right: 0; position: fixed;"></div>

    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript">
            // Initialize
            var mapnik         = new OpenLayers.Layer.OSM(); // OpenStreetMap
            var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
            var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
            var lon            = 24.9342;
            var lat            = 60.2017;
            var position       = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
            var zoom           = 5;

            var map = new OpenLayers.Map("map");
            map.addLayer(mapnik);




        // Add Controls
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.Navigation());
            map.addControl(new OpenLayers.Control.MousePosition());
            map.addControl(new OpenLayers.Control.PanZoomBar());
            map.addControl(new OpenLayers.Control.Attribution());
            map.addControl(new OpenLayers.Control.ScaleLine({ geodesic: true, maxWidth: 200, bottomOutUnits: "", bottomInUnits: "" }));


            // Add marker
            var markers = new OpenLayers.Layer.Markers( "Markers" );
            map.addLayer(markers);
            markers.addMarker(new OpenLayers.Marker(position));


            //1. Marker
            var size = new OpenLayers.Size(21, 25);
            var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
            var icon = new OpenLayers.Icon('/Static/start.png', size, offset);
            var lonLat = new OpenLayers.LonLat(9.2543506000, 52.9693262000).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());

            //2. Marker
            var size2 = new OpenLayers.Size(21, 25);
            var offset2 = new OpenLayers.Pixel(-(size.w / 2), -size.h);
            var icon2 = new OpenLayers.Icon('/Static/finish.png', size2, offset2);
            var lonLat2 = new OpenLayers.LonLat(8.8748346000, 53.0153977000).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());

            //3. Marker
            var size3 = new OpenLayers.Size(21, 25);
            var offset3 = new OpenLayers.Pixel(-(size.w / 2), -size.h);
            var icon3 = new OpenLayers.Icon('/Static/viktor.png', size3, offset3);
            var lonLat3 = new OpenLayers.LonLat(8.9903753000, 53.0377274000).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());

            markers.addMarker(new OpenLayers.Marker(lonLat, icon));
            markers.addMarker(new OpenLayers.Marker(lonLat2, icon2));
            markers.addMarker(new OpenLayers.Marker(lonLat3, icon3));




            // Add Vector
            var vector = new OpenLayers.Layer.Vector();
            map.addLayers([vector]);

            // Line styles
            var style = {
                strokeColor: "#679ae8",
                strokeWidth: 3,
                strokeDashstyle: "solid"
            };

        // Add second end point
            var p100 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(9.2543506000, 52.9693262000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(9.2542787000, 52.9686142000).transform(fromProjection, toProjection)]), null, style);
            var p101 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(9.2542787000, 52.9686142000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(9.2553051000, 52.9684521000).transform(fromProjection, toProjection)]), null, style);
            var p102 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(9.2553051000, 52.9684521000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(9.2546668000, 52.9666686000).transform(fromProjection, toProjection)]), null, style);
            var p103 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(9.2546668000, 52.9666686000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(9.2513078000, 52.9677900000).transform(fromProjection, toProjection)]), null, style);
            var p104 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(9.2513078000, 52.9677900000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(9.2460728000, 52.9603516000).transform(fromProjection, toProjection)]), null, style);
            var p105 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(9.2460728000, 52.9603516000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.9903753000, 53.0377274000).transform(fromProjection, toProjection)]), null, style);
            var p106 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.9903753000, 53.0377274000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8656025000, 53.0320309000).transform(fromProjection, toProjection)]), null, style);
            var p107 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.8656025000, 53.0320309000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8624373000, 53.0308507000).transform(fromProjection, toProjection)]), null, style);
            var p108 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.8624373000, 53.0308507000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8578393000, 53.0299369000).transform(fromProjection, toProjection)]), null, style);
            var p109 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.8578393000, 53.0299369000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8616874000, 53.0256636000).transform(fromProjection, toProjection)]), null, style);
            var p110 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.8616874000, 53.0256636000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8661411000, 53.0204771000).transform(fromProjection, toProjection)]), null, style);
            var p111 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.8661411000, 53.0204771000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8677173000, 53.0210561000).transform(fromProjection, toProjection)]), null, style);
            var p112 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.8677173000, 53.0210561000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8786732000, 53.0158934000).transform(fromProjection, toProjection)]), null, style);
            var p113 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.8786732000, 53.0158934000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8772210000, 53.0144770000).transform(fromProjection, toProjection)]), null, style);
            var p114 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.8772210000, 53.0144770000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8748346000, 53.0153977000).transform(fromProjection, toProjection)]), null, style);
            var p115 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.8748346000, 53.0153977000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8748346000, 53.0153977000).transform(fromProjection, toProjection)]), null, style);

            vector.addFeatures([p100, p101, p102, p103, p104, p105, p106, p107, p108, p109, p110, p111, p112, p113, p114, p115]);

            map.setCenter(position, zoom );
    </script>
</body>
</html>

100

<html>

<head>

<title>Draw MultiLines</title>

</head>

<body>

// Initialize

var mapnik = new OpenLayers.Layer.OSM(); // OpenStreetMap

var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984

var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection

var lon = 24.9342;

var lat = 60.2017;

var position = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);

var zoom = 5;

var map = new OpenLayers.Map("map");

map.addLayer(mapnik);

// Add Controls

map.addControl(new OpenLayers.Control.LayerSwitcher());

map.addControl(new OpenLayers.Control.Navigation());

map.addControl(new OpenLayers.Control.MousePosition());

map.addControl(new OpenLayers.Control.PanZoomBar());

map.addControl(new OpenLayers.Control.Attribution());

map.addControl(new OpenLayers.Control.ScaleLine({ geodesic: true, maxWidth: 200, bottomOutUnits: "", bottomInUnits: "" }));

// Add marker

var markers = new OpenLayers.Layer.Markers( "Markers" );

map.addLayer(markers);

markers.addMarker(new OpenLayers.Marker(position));

//1. Marker

var size = new OpenLayers.Size(21, 25);

var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);

var icon = new OpenLayers.Icon('/Static/start.png', size, offset);

var lonLat = new OpenLayers.LonLat(9.2543506000, 52.9693262000).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());

//2. Marker

var size2 = new OpenLayers.Size(21, 25);

var offset2 = new OpenLayers.Pixel(-(size.w / 2), -size.h);

var icon2 = new OpenLayers.Icon('/Static/finish.png', size2, offset2);

var lonLat2 = new OpenLayers.LonLat(8.8748346000, 53.0153977000).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());

//3. Marker

var size3 = new OpenLayers.Size(21, 25);

var offset3 = new OpenLayers.Pixel(-(size.w / 2), -size.h);

var icon3 = new OpenLayers.Icon('/Static/viktor.png', size3, offset3);

var lonLat3 = new OpenLayers.LonLat(8.9903753000, 53.0377274000).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());

markers.addMarker(new OpenLayers.Marker(lonLat, icon));

markers.addMarker(new OpenLayers.Marker(lonLat2, icon2));

markers.addMarker(new OpenLayers.Marker(lonLat3, icon3));

// Add Vector

var vector = new OpenLayers.Layer.Vector();

map.addLayers([vector]);

// Line styles

var style = {

strokeColor: "#679ae8",

strokeWidth: 3,

strokeDashstyle: "solid"

};

// Add second end point

var p100 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(9.2543506000, 52.9693262000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(9.2542787000, 52.9686142000).transform(fromProjection, toProjection)]), null, style);

var p101 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(9.2542787000, 52.9686142000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(9.2553051000, 52.9684521000).transform(fromProjection, toProjection)]), null, style);

var p102 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(9.2553051000, 52.9684521000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(9.2546668000, 52.9666686000).transform(fromProjection, toProjection)]), null, style);

var p103 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(9.2546668000, 52.9666686000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(9.2513078000, 52.9677900000).transform(fromProjection, toProjection)]), null, style);

var p104 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(9.2513078000, 52.9677900000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(9.2460728000, 52.9603516000).transform(fromProjection, toProjection)]), null, style);

var p105 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(9.2460728000, 52.9603516000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.9903753000, 53.0377274000).transform(fromProjection, toProjection)]), null, style);

var p106 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.9903753000, 53.0377274000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8656025000, 53.0320309000).transform(fromProjection, toProjection)]), null, style);

var p107 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.8656025000, 53.0320309000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8624373000, 53.0308507000).transform(fromProjection, toProjection)]), null, style);

var p108 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.8624373000, 53.0308507000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8578393000, 53.0299369000).transform(fromProjection, toProjection)]), null, style);

var p109 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.8578393000, 53.0299369000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8616874000, 53.0256636000).transform(fromProjection, toProjection)]), null, style);

var p110 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.8616874000, 53.0256636000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8661411000, 53.0204771000).transform(fromProjection, toProjection)]), null, style);

var p111 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.8661411000, 53.0204771000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8677173000, 53.0210561000).transform(fromProjection, toProjection)]), null, style);

var p112 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.8677173000, 53.0210561000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8786732000, 53.0158934000).transform(fromProjection, toProjection)]), null, style);

var p113 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.8786732000, 53.0158934000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8772210000, 53.0144770000).transform(fromProjection, toProjection)]), null, style);

var p114 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.8772210000, 53.0144770000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8748346000, 53.0153977000).transform(fromProjection, toProjection)]), null, style);

var p115 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(8.8748346000, 53.0153977000).transform(fromProjection, toProjection), new OpenLayers.Geometry.Point(8.8748346000, 53.0153977000).transform(fromProjection, toProjection)]), null, style);

vector.addFeatures([p100, p101, p102, p103, p104, p105, p106, p107, p108, p109, p110, p111, p112, p113, p114, p115]);

map.setCenter(position, zoom );

</script>

</body>

</html>

Download Beispielprojekt: OpenLayers

Denn ich habe kein Gefallen am Tod dessen, der sterben muss, spricht Gott, der Herr. So kehrt denn um, und ihr sollt leben!

OpenStreetMap, OpenLayers Map anzeigen, Marker setzen und Route hinzufügen

leave your comment cancel

Seiten

Neueste Beiträge

Neueste Kommentare

Archive