Last active
November 28, 2019 08:48
-
-
Save tsauerwein/ff5deb1d50b9de2b5b5661f7ea95ae25 to your computer and use it in GitHub Desktop.
ol3-google-maps test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version='1.0' encoding='UTF-8'?> | |
| <!DOCTYPE HTML> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <meta name="robots" content="index, all" /> | |
| <title>OL3-Google-Maps vector example</title> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> | |
| <link rel="stylesheet" href="http://dev5.mapgears.com/ol3-google-maps/node_modules/openlayers/css/ol.css" type="text/css" /> | |
| <link rel="stylesheet" href="http://dev5.mapgears.com/ol3-google-maps/css/ol3gm.css" type="text/css" /> | |
| <link rel="stylesheet" href="http://dev5.mapgears.com/ol3-google-maps/examples/resources/layout.css" type="text/css" /> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <div class="row-fluid"> | |
| <div class="span12"> | |
| <div id="map" class="map"></div> | |
| </div> | |
| </div> | |
| <div class="row-fluid"> | |
| <div class="span12"> | |
| <h4>Vector example</h4> | |
| <p> | |
| Demonstrates the synchronization between a vector layer added | |
| to the OpenLayers map with Google Maps. | |
| </p> | |
| <p> | |
| OL3-Google-Maps detects any vector layer added to the OpenLayers | |
| map and synchronize the vector features added to it to the | |
| Google Maps map. The geometry and style are also synchronized. | |
| </p> | |
| <input id="toggle" type="button" onclick="toggle();" | |
| value="Toggle Between OL3 and GMAPS" /> | |
| <input id="toggle" type="button" onclick="toggleDrawModify();" | |
| value="Toggle Draw/Modify" /> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="http://openlayers.org/en/v3.15.0/build/ol-debug.js"></script> | |
| <script type="text/javascript" | |
| src="https://maps.googleapis.com/maps/api/js?v=3.21"></script> | |
| <script src="http://dev5.mapgears.com/ol3-google-maps/dist/ol3gm.js"></script> | |
| <script src="vector.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var center = [-7908084, 6177492]; | |
| var googleLayer = new olgm.layer.Google(); | |
| var osmLayer = new ol.layer.Tile({ | |
| source: new ol.source.OSM(), | |
| visible: false | |
| }); | |
| var source = new ol.source.Vector(); | |
| var feature = new ol.Feature(new ol.geom.Point(center)); | |
| feature.setStyle(new ol.style.Style({ | |
| image: new ol.style.Circle({ | |
| 'fill': new ol.style.Fill({color: 'rgba(153,51,51,0.3)'}), | |
| 'stroke': new ol.style.Stroke({color: 'rgb(153,51,51)', width: 2}), | |
| 'radius': 20 | |
| }) | |
| })); | |
| source.addFeature(feature); | |
| var vector = new ol.layer.Vector({ | |
| source: source | |
| }); | |
| var sourceDraw = new ol.source.Vector({wrapX: false}); | |
| var vectorDraw = new ol.layer.Vector({ | |
| source: sourceDraw, | |
| style: new ol.style.Style({ | |
| fill: new ol.style.Fill({ | |
| color: 'rgba(255, 255, 255, 0.2)' | |
| }), | |
| stroke: new ol.style.Stroke({ | |
| color: '#ffcc33', | |
| width: 2 | |
| }), | |
| image: new ol.style.Circle({ | |
| radius: 7, | |
| fill: new ol.style.Fill({ | |
| color: '#ffcc33' | |
| }) | |
| }) | |
| }) | |
| }); | |
| var map = new ol.Map({ | |
| // use OL3-Google-Maps recommended default interactions | |
| interactions: olgm.interaction.defaults(), | |
| controls: ol.control.defaults().extend([ | |
| new ol.control.ZoomSlider() | |
| ]), | |
| layers: [ | |
| googleLayer, | |
| osmLayer, | |
| vector, | |
| vectorDraw | |
| ], | |
| target: 'map', | |
| view: new ol.View({ | |
| center: center, | |
| zoom: 12 | |
| }) | |
| }); | |
| var drawInteraction = new ol.interaction.Draw({ | |
| source: sourceDraw, | |
| type: 'LineString' | |
| }); | |
| map.addInteraction(drawInteraction); | |
| var select = new ol.interaction.Select({ | |
| wrapX: false | |
| }); | |
| var modify = new ol.interaction.Modify({ | |
| features: select.getFeatures() | |
| }); | |
| var olGM = new olgm.OLGoogleMaps({map: map}); // map is the ol.Map instance | |
| olGM.activate(); | |
| function toggle() { | |
| googleLayer.setVisible(!googleLayer.getVisible()); | |
| osmLayer.setVisible(!osmLayer.getVisible()); | |
| }; | |
| var drawActive = true; | |
| function toggleDrawModify() { | |
| if (drawActive) { | |
| drawActive = false; | |
| map.removeInteraction(drawInteraction); | |
| map.addInteraction(select); | |
| map.addInteraction(modify); | |
| } else { | |
| drawActive = true; | |
| map.addInteraction(drawInteraction); | |
| map.removeInteraction(select); | |
| map.removeInteraction(modify); | |
| } | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment