![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
|
GIS OpenLayers3 Interaction |
| 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>
