OpenLayers - eine Alternative zu Google Maps

openLayers: Eine leistungsstarke, anpassbare Alternative zu Google Maps

OpenLayers bietet eine überzeugende Alternative zu Google Maps und bietet umfangreiche Anpassungsoptionen und Unterstützung für verschiedene Kartenquellen, einschließlich WMS, WMTs, Bing Maps und OpenStreetMap (OSM). Im Gegensatz zu Google Maps ermöglicht OpenLayers die Verwendung in authentifizierten Website -Abschnitten.

Schlüsselvorteile:

• Vielseitige Kartenquellen: Integriert nahtlos in verschiedene Kartenanbieter und gewährt Flexibilität in der Hintergrundauswahl.
• Vektorschichtunterstützung: Ermöglicht die Hinzufügung von benutzerdefinierten Daten, wie z.
• hohe Anpassung: Ermöglicht ein umfassendes Styling von Kartenfunktionen, Steuerung des Kartensteuerungslayouts und die Erstellung von benutzerdefinierten Steuerelementen.
• hohe Leistung: verarbeitet große Datensätze effizient durch Fliesen zwischengeschnitten und hardwarebeschleunigt.
• Open Source und Community Driven: profitiert von Community -Beiträgen, um eine kontinuierliche Verbesserung und Open -Zugriff zu gewährleisten. OSM ermöglicht beispielsweise Community -Updates, Daten zu kartieren.

Warum OpenLayers über Google Maps auswählen?

Viele Entwickler sind mit Google Maps und Bing Maps -APIs vertraut, um Websites zu interaktiven Karten hinzuzufügen. Google Maps beschränkt jedoch die Nutzung in authentifizierten Bereichen. OpenLayers überwindet diese Einschränkung und bietet vollständige Kontrolle und Flexibilität in jeder Umgebung.

Erste Schritte mit OpenLayers:

Die Kernfunktionalität ist einfach: Fügen Sie die JavaScript -Bibliothek ein, erstellen Sie ein DIV -Element mit einer eindeutigen ID und geben Sie diese ID an OpenLayers weiter. Das folgende Beispiel (unter Verwendung von JQuery, obwohl nicht erforderlich) zeigt die Grundlagen:

<code class="language-javascript">jQuery(window).on('load', function() {
  var map = new OpenLayers.Map('map', {
    projection: new OpenLayers.Projection('EPSG:900913')
  });
  var osm = new OpenLayers.Layer.OSM();            
  var gmap = new OpenLayers.Layer.Google('Google street maps');
  var bing = new OpenLayers.Layer.Bing({
    key: 'register your api key at bingmapsportal.com',
    type: 'Road',
    metadataParams: { mapVersion: 'v1' }
  });

  map.addLayers([osm, gmap, bing]);
  map.setCenter(new OpenLayers.LonLat(2.2, 54.0)
    .transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject()), 5);
  map.addControl(new OpenLayers.Control.LayerSwitcher());
});</code>

Dieser Code erstellt eine Karte mit OpenStreetmap, Google Street Maps und Bing Street Maps. Die Einstellung

(EPSG: 900913, sphärischer Mercator) ist für die Kompatibilität mit Google und Bing Maps von entscheidender Bedeutung. OpenLayers zeichnet sich in den Umgang mit verschiedenen Projektionen über die Schichten aus. projection

Daten zu Ihrer Karte hinzufügen:

OpenLayers verwendet Vektorschichten, um benutzerdefinierte Daten hinzuzufügen. Das folgende Beispiel fügt den aktuellen Standort des Benutzers hinzu:

<code class="language-javascript">var overlay = new OpenLayers.Layer.Vector('Your location');
var map = new OpenLayers.Map('map');

map.addLayers([new OpenLayers.Layer.OSM('OSM'), overlay]);
map.setCenter(
  new OpenLayers.LonLat(2.2, 54.0).transform(
    new OpenLayers.Projection('EPSG:4326'),
    map.getProjectionObject()
  ), 11);

navigator.geolocation.getCurrentPosition(function(position) {
  var yourLocation = new OpenLayers.Geometry.Point(position.coords.longitude, position.coords.latitude)
        .transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject());

  map.getLayersByName('Your location')[0].addFeatures([new OpenLayers.Feature.Vector(yourLocation)]);
  map.setCenter(new OpenLayers.LonLat(yourLocation.getCentroid().x, yourLocation.getCentroid().y)); 
});</code>

Anpassen des Kartenstils:

OpenLayers ermöglicht eine detaillierte Anpassung der Stil. Die folgenden Beispiele zeigen, dass kundenspezifische Stile erstellen:

<code class="language-javascript">// Simple style
var styleMap = new OpenLayers.StyleMap({
  pointRadius: 20,
  strokeColor: '#ff0000',
  fillColor: '#ff0000',
  fillOpacity: 0.6
});
var overlay = new OpenLayers.Layer.Vector('Your position', {styleMap: styleMap});

// Style using feature attributes
var styleMap = new OpenLayers.StyleMap({
  pointRadius: '$(pointRadius)',
  strokeColor: '#ff0000',
  fillColor: '$(pointColor)',
  fillOpacity: 0.6
});

// Style using functions and context
var context = {
  getColor: function(feature) {
    return '#00ff00';
  },
  getPointRadius: function(feature) {
    return 15;
  }
}
var template = {
  strokeColor: '${getColor}',
  pointRadius: '${getPointRadius}',
}
var styleMap = new OpenLayers.StyleMap(new OpenLayers.Style(template, {context: context}));</code>

dynamische Kartendaten:

OpenLayers unterstützt das Abholen von Daten dynamisch von einem Backend -Server. In diesem Beispiel wird eine

Strategie verwendet, um Daten im aktuellen Ansichtsfenster anzufordern: BBOX

<code class="language-javascript">jQuery(window).on('load', function() {
  var map = new OpenLayers.Map('map', {
    projection: new OpenLayers.Projection('EPSG:900913')
  });
  var osm = new OpenLayers.Layer.OSM();            
  var gmap = new OpenLayers.Layer.Google('Google street maps');
  var bing = new OpenLayers.Layer.Bing({
    key: 'register your api key at bingmapsportal.com',
    type: 'Road',
    metadataParams: { mapVersion: 'v1' }
  });

  map.addLayers([osm, gmap, bing]);
  map.setCenter(new OpenLayers.LonLat(2.2, 54.0)
    .transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject()), 5);
  map.addControl(new OpenLayers.Control.LayerSwitcher());
});</code>

für große Datensätze, Clustering -Strategien (wie OpenLayers.Strategy.AnimatedCluster) verbessern die Leistung, indem sie in der Nähe von Funktionen in der Nähe gruppieren.

Schlussfolgerung:

OpenLayers bietet ein flexibles und leistungsstarkes Framework zum Erstellen benutzerdefinierter Kartenanwendungen. Die Open-Source-Natur, umfangreiche Anpassungsoptionen und die Unterstützung verschiedener Datenformate machen es zu einer starken Alternative zu proprietären Mapping-Lösungen. Entdecken Sie die OpenLayers -Website für detaillierte Dokumentation und Beispiele. Der vorgesehene FAQ -Abschnitt befasst sich weiter

Das obige ist der detaillierte Inhalt vonOpenLayers - eine Alternative zu Google Maps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!