OCAD Internet Map Scripting: Unterschied zwischen den Versionen
JBO (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
(2 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
OCAD Internet Map | Eine OCAD Internet Map kann benutzerdefiniert mit JavaScript gescriptet werden. | ||
==Zoomen auf die hälfte == | |||
Um die Webkarte nicht im kleinsten Zoomlevel zu laden, kann man folgende Zeile in die html-Datei nach dem Befehl: | |||
<pre> | |||
zoomChanged(); | |||
</pre> | |||
einfügen: | |||
<pre> | |||
map.zoomTo(map.numZoomLevels- Math.floor(map.numZoomLevels/2)); | |||
</pre> | |||
Damit wir die Karte auf die hälfte der verfügbaren Zoom-level bereits beim laden gesetzt und nicht auf den Zoom-Level 0. | |||
==Ebenen zeigen und verbergen== | ==Ebenen zeigen und verbergen== | ||
Ebenen können mit dem Ebenenbefehl setVisibility angezeigt oder verborgen werden. Alle Ebenen werden in der Reihenfolge, in der sie im Array _poiLayers aufgelistet sind, exportiert. | |||
Beispiel: | |||
<pre> | <pre> | ||
function ShowLayer() { | function ShowLayer() { | ||
Zeile 14: | Zeile 26: | ||
} | } | ||
</pre> | </pre> | ||
Die Javascript-Funktionen können mit einem externen Link von der gleichen Seite aufgerufen werden. | |||
=Zu einem bestimmten Punkt springen= | =Zu einem bestimmten Punkt springen= | ||
Um zu einem bestimmten Standort auf der Karte zu springen, kann die folgende Funktion aufgerufen werden. | |||
<pre> | <pre> | ||
function JupToPointOfInterest() { | function JupToPointOfInterest() { | ||
Zeile 25: | Zeile 37: | ||
} | } | ||
</pre> | </pre> | ||
Die Variable map.numZoomLevels muss immer um eins verringert werden, um das maximale Zoomlevel zu erreichen. | |||
=Zusätzliche Vektorpunkte für Standorte hinzufügen= | =Zusätzliche Vektorpunkte für Standorte hinzufügen= | ||
Um zusätzliche Vektorpunkte für Standorte hinzuzufügen, können Sie folgende Funktion aufrufen: | |||
<pre> | <pre> | ||
function ShowPointOfInterest() { | function ShowPointOfInterest() { | ||
Zeile 40: | Zeile 53: | ||
} | } | ||
</pre> | </pre> | ||
Dafür muss eine zusätzliche Ebene im init script mit den folgenden Linien erstellt werden: | |||
<pre> | <pre> | ||
Zeile 47: | Zeile 60: | ||
</pre> | </pre> | ||
Die zwei Zeilen müssen zwischen den Befehlen "addControl" und "XMLInitPois" platziert werden. | |||
Für die Handhabung mit Vektoren, können die Optionen in der Dokumentation für OpenLayers aufgerufen werden: [[http://dev.openlayers.org/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.style style options]] | |||
=Standorte mit drop down list zentrieren= | =Standorte mit drop down list zentrieren= | ||
Um einen Standort mit einer select-Liste zu zentrieren, können Sie den folgenden Code ausführen: | |||
<pre> | <pre> | ||
function JupToPoint(coords) { | function JupToPoint(coords) { | ||
Zeile 65: | Zeile 78: | ||
</pre> | </pre> | ||
In | In der HTML-Datei kann der Code folgendermassen aussehen: | ||
<pre> | <pre> | ||
<select id= "dropdown-select" onchange="JupToPoint(this.value);"> | <select id= "dropdown-select" onchange="JupToPoint(this.value);"> |
Aktuelle Version vom 15. Oktober 2014, 10:31 Uhr
Eine OCAD Internet Map kann benutzerdefiniert mit JavaScript gescriptet werden.
Zoomen auf die hälfte
Um die Webkarte nicht im kleinsten Zoomlevel zu laden, kann man folgende Zeile in die html-Datei nach dem Befehl:
zoomChanged();
einfügen:
map.zoomTo(map.numZoomLevels- Math.floor(map.numZoomLevels/2));
Damit wir die Karte auf die hälfte der verfügbaren Zoom-level bereits beim laden gesetzt und nicht auf den Zoom-Level 0.
Ebenen zeigen und verbergen
Ebenen können mit dem Ebenenbefehl setVisibility angezeigt oder verborgen werden. Alle Ebenen werden in der Reihenfolge, in der sie im Array _poiLayers aufgelistet sind, exportiert.
Beispiel:
function ShowLayer() { _poiLayers[0].setVisibility(true); } function HideLayer() { _poiLayers[0].setVisibility(false); }
Die Javascript-Funktionen können mit einem externen Link von der gleichen Seite aufgerufen werden.
Zu einem bestimmten Punkt springen
Um zu einem bestimmten Standort auf der Karte zu springen, kann die folgende Funktion aufgerufen werden.
function JupToPointOfInterest() { var point = new OpenLayers.LonLat(136733, 6667650); map.zoomTo(map.numZoomLevels-1); map.panTo(point); }
Die Variable map.numZoomLevels muss immer um eins verringert werden, um das maximale Zoomlevel zu erreichen.
Zusätzliche Vektorpunkte für Standorte hinzufügen
Um zusätzliche Vektorpunkte für Standorte hinzuzufügen, können Sie folgende Funktion aufrufen:
function ShowPointOfInterest() { var point1 = new OpenLayers.Geometry.Point(149667,6680327); var point2 = new OpenLayers.Geometry.Point(150386,6678682); var feature_point = new OpenLayers.Feature.Vector(point1, {},{fillOpacity : 0.4, pointRadius: 45, fillColor: "#ff0000" }); var feature_point2 = new OpenLayers.Feature.Vector(point2, {},{pointRadius: 15, fillColor: "#ff0000"}); highlight_layer.addFeatures([feature_point, feature_point2]); }
Dafür muss eine zusätzliche Ebene im init script mit den folgenden Linien erstellt werden:
highlight_layer = new OpenLayers.Layer.Vector('Highlight Layer'); map.addLayer(highlight_layer);
Die zwei Zeilen müssen zwischen den Befehlen "addControl" und "XMLInitPois" platziert werden.
Für die Handhabung mit Vektoren, können die Optionen in der Dokumentation für OpenLayers aufgerufen werden: [style options]
Standorte mit drop down list zentrieren
Um einen Standort mit einer select-Liste zu zentrieren, können Sie den folgenden Code ausführen:
function JupToPoint(coords) { if (value = null) { exit; } var cord = coords.split(","); var point1 = new OpenLayers.LonLat(cord[0],cord[1]); map.zoomTo(map.numZoomLevels-1); map.panTo(point1); }
In der HTML-Datei kann der Code folgendermassen aussehen:
<select id= "dropdown-select" onchange="JupToPoint(this.value);"> <option value="null">Select</option> <option value="134314,6668774">Location 1</option> <option value="149659,6679976">Location 2</option> <option value="140800,6668437">Location 3</option> </select>