defaults() | interaction | note |
✔ | DoubleClickZoom? | |
DragAndDrop | ファイルのDrag and Drop | |
Select | Vector feature を選択できるようにする | |
DragBox | ユーザが矩形選択をできるようにする。Select と一緒に使う | |
✔ | DragPan? | |
✔ | DragRotate? | Shift+mouseでローテート |
DragRotateAndZoom | Shift+mouseでローテートとズーム | |
Draw | ユーザが図形を描けるようにする | |
Modify | featureの変更を行う。Draw と一緒に使う | |
✔ | KeyboardPan? | |
✔ | KeyboardZoom? | |
✔ | PinchRotate? | |
✔ | PinchZoom? | |
Snap | Vector feature の端点を重ねあわせる(Snap)ことができるようにする | |
Translate | Vector feature を動かせるようにする | |
✔ | MouseWheelZoom? |
地理空間情報が格納されているファイルを Drag And Drop すると、その内容が描画されます
地図に、earthquake.geojson をダウンロードしてDrag And Drop すると、その内容が表示される。
※ ブラウザによっては、この Wiki のように IFRAME に Openlayers を表示した時 Drag And Drop が効かない場合がある。その場合には、 21_Interaction_dnd.html で全画面表示
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="css/ol.css" type="text/css"/> <link rel="stylesheet" href="css/sample.css" type="text/css"/> <style> body { padding : 0; margin : 0; } </style> <title>OpenLayers 3 example 21 Interaction DnD</title> </head> <body> <div id="map" class="map"></div> <script src="js/ol-debug.js"></script> <script type="text/javascript"> var dragAndDropInteraction = new ol.interaction.DragAndDrop({ formatConstructors: [ ol.format.GPX, ol.format.GeoJSON, ol.format.IGC, ol.format.KML, ol.format.TopoJSON ] }); var rasterLayer = new ol.layer.Tile({ source: new ol.source.Stamen({layer: 'watercolor'}) }); var map = new ol.Map({ target: 'map', layers: [rasterLayer], view: new ol.View({ center: ol.proj.transform([39.816667, 21.416667], 'EPSG:4326', 'EPSG:3857'), zoom: 3 }), interactions: ol.interaction.defaults().extend([dragAndDropInteraction]) }); dragAndDropInteraction.on('addfeatures', function(event) { var vectorSource = new ol.source.Vector({ features: event.features }); map.addLayer(new ol.layer.Image({ source: new ol.source.ImageVector({ source: vectorSource }) })); }); </script> </body> </html>
マウスクリックで国を選択。Shift クリックで複数選択も可。 Shift+Drag で、矩形選択。
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="css/ol.css" type="text/css"/> <link rel="stylesheet" href="css/sample.css" type="text/css"/> <style> body { padding : 0; margin : 0; } </style> <title>OpenLayers 3 example 22 Select</title> </head> <body> <div id="map" class="map"></div> <div id="selected"></div> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/ol-debug.js"></script> <script type="text/javascript"> var rasterLayer = new ol.layer.Tile({ source: new ol.source.Stamen({layer: 'watercolor'}) }); var vectorSource = new ol.source.Vector({ loader: function(extent, resolution, projection) { console.log(extent); var url = 'js/countries.geojson'; $.getJSON(url, function(json) { var features = new ol.format.GeoJSON().readFeatures(json,{ featureProjection: projection }); vectorSource.addFeatures(features); }); }, strategy: ol.loadingstrategy.all }); var countryStyle = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'gray', width: 1 }), fill : new ol.style.Fill({ color: 'rgba(0,0,0,0)' }), }); var selectedStyle = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'red', width: 1 }), fill : new ol.style.Fill({ color: 'rgba(128,64,64,0.5)' }), }); var vectorLayer = new ol.layer.Vector({ source: vectorSource, style: countryStyle }); // Select Interaction var selectInteraction = new ol.interaction.Select({ style: selectedStyle }); var selectedFeatures = selectInteraction.getFeatures(); // Dragbox Interaction var dragBoxInteraction = new ol.interaction.DragBox({ condition: ol.events.condition.shiftKeyOnly, style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: [0, 0, 255, 1] }) }) }); var map = new ol.Map({ target: 'map', layers: [rasterLayer, vectorLayer], view: new ol.View({ center: ol.proj.transform([135, 35], 'EPSG:4326', 'EPSG:3857'), zoom: 3 }), interactions: ol.interaction.defaults().extend([selectInteraction, dragBoxInteraction]) }); // Select Event selectInteraction.on('select', function(event /* ol.interaction.SelectEvent */){ /* // SelectEvent has only the last selected feature. var selectedFeatures = event.selected; for (feature of selectedFeatures) { console.log(feature.values_.name); } */ var names = ''; selectedFeatures.forEach(function(feature){ names += feature.values_.name + ' '; }); $('#selected').html(names); }); // DragBox Event dragBoxInteraction.on('boxend', function(e) { var extent = dragBoxInteraction.getGeometry().getExtent(); vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) { selectedFeatures.push(feature); }); var names = ''; selectedFeatures.forEach(function(feature){ names += feature.values_.name + ' '; }); $('#selected').html(names); }); // clear selection when drawing a new box and when clicking on the map dragBox.on('boxstart', function(e) { selectedFeatures.clear(); }); </script> </body> </html>
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="css/ol.css" type="text/css"/> <link rel="stylesheet" href="css/sample.css" type="text/css"/> <style> body { padding : 0; margin : 0; } input[name='drawType'] { -webkit-appearance: none; position: relative; display: inline-block; background-image: url(img/interaction_icons.png); overflow: hidden; width: 48px; height: 48px; } </style> <title>OpenLayers 3 example 23 Draw</title> </head> <body> <div id="map" class="map" style="width:640px;height:400px"></div> <p> <input type="radio" name="drawType" value="None" style="background-position: 0px 0px" checked="checked"> <input type="radio" name="drawType" value="Point" style="background-position: -48px -48px"> <input type="radio" name="drawType" value="LineString" style="background-position: -96px -48px"> <input type="radio" name="drawType" value="Polygon" style="background-position: -144px -48px"> <input type="radio" name="drawType" value="Circle" style="background-position: -192px -48px"> <input type="radio" name="drawType" value="Square" style="background-position: -240px -48px"> <input type="radio" name="drawType" value="Box" style="background-position: -288px -48px"> </p> <div id="selected"></div> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/ol-debug.js"></script> <script type="text/javascript"> var rasterLayer = new ol.layer.Tile({ source: new ol.source.Stamen({layer: 'watercolor'}) }); var vectorSource = new ol.source.Vector(); var vectorLayer = new ol.layer.Vector({ source: vectorSource, style: new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255,192,192,0.5)' }), stroke: new ol.style.Stroke({ color: 'red', width: 2 }), image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: 'red' }) }) }) }); var map = new ol.Map({ target: 'map', layers: [rasterLayer, vectorLayer], view: new ol.View({ center: ol.proj.transform([39.816667, 21.416667], 'EPSG:4326', 'EPSG:3857'), zoom: 4 }) }); var drawInteraction = null; $("input[name='drawType']").change(function(){ // change icons $("input[name='drawType']").each(function(){ var positions = $(this).css("background-position").split(" "); if($(this).is(":checked")){ $(this).css("background-position", positions[0] + ' 0px'); } else { $(this).css("background-position", positions[0] + ' -48px'); } }); // change interaction if (drawInteraction) { map.removeInteraction(drawInteraction); } var type = $("input[name='drawType']:checked").val(); switch (type) { case 'Point' : case 'LineString' : case 'Polygon' : case 'Circle' : drawInteraction = new ol.interaction.Draw({ source : vectorSource, type : type }); map.addInteraction(drawInteraction); break; case 'Square' : // If you want to make a regular polygon (正多角形), set type as 'Circle' // and geometryFucntion as ol.interaction.Draw.createRegularPolygon(). drawInteraction = new ol.interaction.Draw({ source : vectorSource, type : 'Circle', geometryFunction : ol.interaction.Draw.createRegularPolygon(4) }); map.addInteraction(drawInteraction); break; case 'Box' : // Overwrite LinsString behavior drawInteraction = new ol.interaction.Draw({ source : vectorSource, type : 'LineString', maxPoints : 2, geometryFunction : function(coordinates, geometry) { if (!geometry) { geometry = new ol.geom.Polygon(null); } // nw(mouse start) ne // latN *----------------------+ // | | // |sw |se(mouse end) // latS +----------------------* // lonW lonE var nw = coordinates[0]; var se = coordinates[1]; var latN = nw[0]; var latS = se[0]; var lonW = nw[1]; var lonE = se[1]; var ne = [latN,lonE]; var sw = [latS,lonW]; geometry.setCoordinates([[nw,ne,se,sw,nw]]); return geometry; } }); map.addInteraction(drawInteraction); break; default : break; } if (drawInteraction) { drawInteraction.on('drawend', function(event /* ol.interaction.DrawEvent */) { var format = new ol.format.WKT(); var geometry = (event.feature.getGeometry()).clone(); try { $('#selected').html(format.writeGeometry(geometry.transform('EPSG:3857', 'EPSG:4326'))); } catch(e) { console.log(e); $('#selected').html(e.message); } }); } }); </script> </body> </html>
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="css/ol.css" type="text/css"/> <link rel="stylesheet" href="css/sample.css" type="text/css"/> <style> body { padding : 0; margin : 0; } </style> <title>OpenLayers 3 example 24 Modify</title> </head> <body> <div id="map" class="map" style="width:640px;height:400px"></div> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/ol-debug.js"></script> <script type="text/javascript"> var rasterLayer = new ol.layer.Tile({ source: new ol.source.Stamen({layer: 'watercolor'}) }); // The modify interaction can only modify features, can't treat vectorSources or Layers. var features = new ol.Collection(); var vectorSource = new ol.source.Vector({features:features}); var vectorLayer = new ol.layer.Vector({ source: vectorSource, style: new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255,192,192,0.5)' }), stroke: new ol.style.Stroke({ color: 'red', width: 2 }), image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: 'red' }) }) }) }); var map = new ol.Map({ target: 'map', layers: [rasterLayer, vectorLayer], view: new ol.View({ center: ol.proj.transform([39.816667, 21.416667], 'EPSG:4326', 'EPSG:3857'), zoom: 4 }) }); var drawInteraction = new ol.interaction.Draw({ source : vectorSource, type : 'Polygon' }); map.addInteraction(drawInteraction); var modifyInteraction = new ol.interaction.Modify({ features: features, deleteCondition : function (event) { return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event); } }) map.addInteraction(modifyInteraction); </script> </body> </html>
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="css/ol.css" type="text/css"/> <link rel="stylesheet" href="css/sample.css" type="text/css"/> <style> body { padding : 0; margin : 0; } </style> <title>OpenLayers 3 example 25 Snap</title> </head> <body> <div id="map" class="map" style="width:640px;height:400px"></div> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/ol-debug.js"></script> <script type="text/javascript"> var rasterLayer = new ol.layer.Tile({ source: new ol.source.Stamen({layer: 'watercolor'}) }); // The modify interaction can only modify features, can't treat vectorSources or Layers. var features = new ol.Collection(); var vectorSource = new ol.source.Vector({features:features}); var vectorLayer = new ol.layer.Vector({ source: vectorSource, style: new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255,192,192,0.5)' }), stroke: new ol.style.Stroke({ color: 'red', width: 2 }), image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: 'red' }) }) }) }); var map = new ol.Map({ target: 'map', layers: [rasterLayer, vectorLayer], view: new ol.View({ center: ol.proj.transform([39.816667, 21.416667], 'EPSG:4326', 'EPSG:3857'), zoom: 4 }) }); var drawInteraction = new ol.interaction.Draw({ source : vectorSource, type : 'Polygon' }); map.addInteraction(drawInteraction); var modifyInteraction = new ol.interaction.Modify({ features: features, deleteCondition : function (event) { return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event); } }) map.addInteraction(modifyInteraction); // We must add Snap AFTER Draw and Modify. var snapInteraction = new ol.interaction.Snap({ source: vectorSource }); map.addInteraction(snapInteraction); </script> </body> </html>
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="css/ol.css" type="text/css"/> <link rel="stylesheet" href="css/sample.css" type="text/css"/> <style> body { padding : 0; margin : 0; } </style> <title>OpenLayers 3 example 26 Translate</title> </head> <body> <div id="map" class="map"></div> <div id="selected"></div> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/ol.js"></script> <script type="text/javascript"> var rasterLayer = new ol.layer.Tile({ source: new ol.source.Stamen({layer: 'watercolor'}) }); var vectorSource = new ol.source.Vector({ loader: function(extent, resolution, projection) { console.log(extent); var url = 'js/countries.geojson'; $.getJSON(url, function(json) { var features = new ol.format.GeoJSON().readFeatures(json,{ featureProjection: projection }); vectorSource.addFeatures(features); }); }, strategy: ol.loadingstrategy.all }); var countryStyle = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'gray', width: 1 }), fill : new ol.style.Fill({ color: 'rgba(0,0,0,0)' }), }); var selectedStyle = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'red', width: 1 }), fill : new ol.style.Fill({ color: 'rgba(128,64,64,0.5)' }), }); var vectorLayer = new ol.layer.Vector({ source: vectorSource, style: countryStyle }); // Select Interaction var selectInteraction = new ol.interaction.Select({ style: selectedStyle }); var map = new ol.Map({ target: 'map', layers: [rasterLayer, vectorLayer], view: new ol.View({ center: ol.proj.transform([135, 35], 'EPSG:4326', 'EPSG:3857'), zoom: 3 }), interactions: ol.interaction.defaults().extend([selectInteraction]) }); var translateInteraction = new ol.interaction.Translate({ features: selectInteraction.getFeatures() }); map.addInteraction(translateInteraction); </script> </body> </html>