OpenLayers

Aus Thomas Wiki
Version vom 11. August 2016, 10:16 Uhr von Thomas (Diskussion | Beiträge) (Erste Erstellung)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Zur Navigation springen Zur Suche springen

Mit Hilfe der JavaScript OpenLayers 3 Library können Open Street Map Karten in eine Webseite eingebunden werden. Die Library kann in der aktuellen Version von OpenLayers.org als ZIP-Archiv heruntergeladen werden.

Nach dem Herunterladen wird die Libray in einem eigenen Verzeichnis ol3 entpackt und über folgende Befehle eingebunden.

<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<script src="ol3/ol.js"></script>

Einbetten der Karte in den HTML-Code

Die Karte wird über folgenden HTML-Code in die Seite eingebunden. Wichtig ist die Bezeichnungen der Tags mit id=map, da die Library hierüber den Bereich der Karte anspricht.

<div class="chart-area">
<div class="container-fluid">
<div class="row-fluid">
  <div class="span12">
    <div id="map" class="map"></div>
  </div>
</div>
</div>
</div>

Ansprechen der Karte in JavaScript

var map = new ol.Map({
  controls: ol.control.defaults().extend([
    new ol.control.OverviewMap()
  ]),
    layers: [new ol.layer.Tile({
     source: new ol.source.OSM()
    })
  ],
  target: 'map',
   view: new ol.View({
      center: ol.proj.fromLonLat([6.948952,50.625882]),
     zoom: 14  })
});


Vollständiges Beispiel

Ein vollständiges Beispiel zeigt die Freifunk-Node Karte.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >


<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Freifunk-Node Karte</title>
<!-- script src="/js/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.js"></script -->
<link rel="stylesheet" href="css/ol.css" type="text/css">
<script src="js/ol.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css">
    <style>
      #map {
        position: relative;
      }
      #popup {
        padding-bottom: 45px;
      }
    </style>

</head>

<body>


<nav class="menue">

<ul class="back-button">
<li class="menu-button"><a href="index.php">Home</a></li>
<li class="menu-button"><a href="map.php">Karte</a></li>
<!-- li class="menu-button"><a href="test.html">Test</a></li-->

</ul>
</nav>
<h1>Freifunk-Node Karte</h1>

<p class="text-normal">
Die Karte soll die ungefähre Abdeckung mit Freifunk verdeutlichen. Um die registrierten Freifunk-Router sind dazu drei Kreise (10m, 30m und 50m) um die Standorte eingezeichnet.
</p>

<div class="chart-area">

<div class="container-fluid">

<div class="row-fluid">
  <div class="span12">
    <div id="map" class="map"></div>
  </div>
</div>
</div>
</div>

<script>

// Kreis mit Radius in Metern um einen Geografischen Punkt zeichnen.

var map = new ol.Map({
  controls: ol.control.defaults().extend([
    new ol.control.OverviewMap()
  ]),
    layers: [new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
    view: new ol.View({
      center: ol.proj.fromLonLat([6.948952,50.625882]),
      zoom: 14  })
});

var circleFill = [
  new ol.style.Fill({
   color: 'rgba(255,0,0,0.1)'
  }),
  new ol.style.Fill({
   color: 'rgba(255,255,0,0.2)'
  }),
  new ol.style.Fill({
   color: 'rgba(0,255,0,0.5)'
  })
];

var circleStroke = new ol.style.Stroke({
   color: 'blue',
   width: 0.25
});

var circleStyle =
  [
    new ol.style.Style({
      image: new ol.style.Circle({
	fill: circleFill[0],
	stroke: circleStroke,
	radius: 5
      }),
      fill: circleFill[0],
      stroke: circleStroke
    }),
    new ol.style.Style({
      image: new ol.style.Circle({
	fill: circleFill[1],
	stroke: circleStroke,
	radius: 5
      }),
      fill: circleFill[1],
      stroke: circleStroke
    }),
    new ol.style.Style({
      image: new ol.style.Circle({
	fill: circleFill[2],
	stroke: circleStroke,
	radius: 5
      }),
      fill: circleFill[2],
      stroke: circleStroke
    })
  ];

// Kreis mit Radius in Metern um einen Geografischen Punkt zeichnen.

var drawCircleInMeter = function(map, lat, long , radius, circleStyle ) {

  var view = map.getView();
  var projection = view.getProjection();
  var resolutionAtEquator = view.getResolution();
  var center = ol.proj.fromLonLat([lat,long]);
  var pointResolution = projection.getPointResolution(resolutionAtEquator, center);
  var resolutionFactor = resolutionAtEquator/pointResolution;
  var radius = (radius / ol.proj.METERS_PER_UNIT.m) * resolutionFactor;


  var circle = new ol.geom.Circle(center, radius);
  var circleFeature = new ol.Feature(circle);
  
  circleFeature.setStyle(circleStyle);
  
// Source and vector layer
  var vectorSource = new ol.source.Vector({
    projection: 'EPSG:4326'
  });

  vectorSource.addFeature(circleFeature);

  var vectorLayer = new ol.layer.Vector({
    source: vectorSource
  });

   map.addLayer(vectorLayer);

} // End drawCircleInMeter 


var oOrtsfilter = document.getElementById('Ortsfilter');
var Ortsfilter = '';


var xmlhttp = new XMLHttpRequest();
var url = "data/nodes.json";

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}

xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {

    var NodesData = JSON.parse(response);
    var i;
    var out = "";
    var count = 0;
   
    NodesData.nodes.sort(function(a,b) {
      return a["nodeinfo"]["hostname"].localeCompare(b["nodeinfo"]["hostname"]) ;
    });
    
    var re = new RegExp(Ortsfilter,"i");

    for(i = 0; i < NodesData.nodes.length; i++) {

      if ((Ortsfilter == "//i") | ( NodesData.nodes[i].nodeinfo.hostname.search(re) != -1))
      
      { 
	if ( !((typeof NodesData.nodes[i].nodeinfo.location === 'undefined') || (NodesData.nodes[i].nodeinfo.location === null))) {
	  lat=NodesData.nodes[i].nodeinfo.location.latitude;
          lon=NodesData.nodes[i].nodeinfo.location.longitude;
	  drawCircleInMeter(map,lon,lat,50,circleStyle[0]);
        }
	
      }
    }
    for(i = 0; i < NodesData.nodes.length; i++) {

      if ((Ortsfilter == "//i") | ( NodesData.nodes[i].nodeinfo.hostname.search(re) != -1))
      
      { 
	if ( !((typeof NodesData.nodes[i].nodeinfo.location === 'undefined') || (NodesData.nodes[i].nodeinfo.location === null))) {
	  lat=NodesData.nodes[i].nodeinfo.location.latitude;
          lon=NodesData.nodes[i].nodeinfo.location.longitude;
	  drawCircleInMeter(map,lon,lat,30,circleStyle[1]);
        }
	
      }
    }
    for(i = 0; i < NodesData.nodes.length; i++) {

      if ((Ortsfilter == "//i") | ( NodesData.nodes[i].nodeinfo.hostname.search(re) != -1))
      
      { 
	if ( !((typeof NodesData.nodes[i].nodeinfo.location === 'undefined') || (NodesData.nodes[i].nodeinfo.location === null))) {
	  lat=NodesData.nodes[i].nodeinfo.location.latitude;
          lon=NodesData.nodes[i].nodeinfo.location.longitude;
	  drawCircleInMeter(map,lon,lat,10,circleStyle[2]);
        }
	
      }
    }

}

</script>
<h2>Filter</h2>
<div class="ff-form-box">

<form action="" method="post">
<label>Ort:</label><br />
<input type="text" id="Ortsfilter" name="Ortsfilter" size="32" maxlenght="255" value=""><br>
<input type="submit" name="submit" value="Neu laden und filtern">
</form>
</div>

</body>
</html>