Interaction

DragAndDrop

地理空間情報が格納されているファイルを Drag And Drop すると、その内容が描画されます


Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /OL3Exam/21_Interaction_dnd.html

地図に、fileearthquake.geojson をダウンロードしてDrag And Drop すると、その内容が表示される。
※ ブラウザによっては、この Wiki のように IFRAME に Openlayers を表示した時 Drag And Drop が効かない場合がある。その場合には、 file21_Interaction_dnd.html で全画面表示

https://github.com/kagyuu/OL3Exam/blob/master/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>

Select, DragBox


Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /OL3Exam/22_Select.html

マウスクリックで国を選択。Shift クリックで複数選択も可。 Shift+Drag で、矩形選択。

https://github.com/kagyuu/OL3Exam/blob/master/22_Select.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 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>

DragRotateAndZoom


GIS OpenLayers3#tc36c716

Draw


Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /OL3Exam/23_Draw.html

https://github.com/kagyuu/OL3Exam/blob/master/23_Draw.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>

Modify


Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /OL3Exam/24_Modify.html

https://github.com/kagyuu/OL3Exam/blob/master/24_Modify.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>

Snap


Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /OL3Exam/25_Snap.html

https://github.com/kagyuu/OL3Exam/blob/master/25_Snap.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>

Translate


Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /OL3Exam/26_Translate.html

https://github.com/kagyuu/OL3Exam/blob/master/26_Translate.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>


GIS


添付ファイル: fileearthquake.geojson 103件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2015-12-18 (金) 01:38:40 (358d)
ISBN10
ISBN13
9784061426061