![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
|
GIS OpenLayers3 Vector Layer |
| Raster Layer | サーバ側で作られた地図画像を表示する |
| Vector Layer | 端点の情報を元に、クライアントサイド(Javascript)で図形を作成して表示する |
| EsriJSON | ESRI社 (GIS業界の親玉) の REST API で用いられる形式 |
| GeoJSON | 一般的に用いられる、地理空間情報を格納するJSON形式 |
| TopoJSON | GeoJSON を位相幾何学(トポロジー) を使って、形を保ったままデータ量を少なくした形式。1/10 くらいになる |
| IGC | スポーツグライディングで使われる形式 |
| Polyline | 多角形 |
| WKT | Well Known Text形式、WKT のバイナリ形式 (WKB) は、PostGIS や DB2 などで地理空間情報を保存する際の形式 |
| GML,GML2,GML3 | GML 3.2.1=ISO 19136=JIS X 7136, 国土地理院基盤地図情報 のデータ形式 |
| GPX | GPS のログによく使われる形式。ウェイポイントと軌跡を表現しやすい |
| KML | Google のサービスで使われるデータ形式。Keyhole は、後に Google Earth となるアプリを開発していた会社。2004 年に Google と合併 |
| OSMXML | Open Street Map で使われるデータ形式 |
| WFS | WMS (Mapserver) のベクター情報版。Mapserver も WFS をしゃべれる。GML3 もしゃべれるので WFS の出番は少ないかも |
| WMSGetFeatureInfo? | WMS のレイヤ情報 |
<!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 10 Earthquake</title>
</head>
<body>
<div id="map" class="map"></div>
<div id="overlay" style="background-color:white; border: 1px solid black; padding: 5px 10px;"></div>
<script src="js/ol-debug.js"></script>
<script type="text/javascript">
var rasterLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: 'js/earthquake.geojson'
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var overlay = new ol.Overlay({
element: document.getElementById('overlay'),
positioning: 'bottom-center'
});
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
})
});
map.on('click', function(e) {
var coordinate = e.coordinate;
var pixel = map.getPixelFromCoordinate(coordinate);
var label = '';
map.forEachFeatureAtPixel(pixel, function(feature){
// the attribute data of GeoJSON of USGS earthquake data.
var date = new Date(feature.get('time'));
label += feature.get('title') + ' @ ' + date.getFullYear() + '<br/>';
});
if (label.length > 0) {
var element = overlay.getElement();
element.innerHTML = label;
overlay.setPosition(coordinate);
map.addOverlay(overlay);
}
});
</script>
</body>
</html>[-60112525.02836773, -2665308.711046496, 60112525.02836773, 13106401.957203632]これをGETパラメータに乗っけて GeoJSON を返す REST API を呼び出す
http://...../cgi-bin/getMap?bbox=-60112525.02836773, -2665308.711046496, 60112525.02836773, 13106401.957203632&callback=とか
<!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 11 Countries</title>
</head>
<body>
<div id="map" class="map"></div>
<div id="overlay" style="background-color:white; border: 1px solid black; padding: 5px 10px;"></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.OSM()
});
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 vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var overlay = new ol.Overlay({
element: document.getElementById('overlay'),
positioning: 'bottom-center'
});
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
})
});
map.on('click', function(e) {
var coordinate = e.coordinate;
var pixel = map.getPixelFromCoordinate(coordinate);
map.forEachFeatureAtPixel(pixel, function(feature){
// the attribute data of GeoJSON of Natural Earth data.
var label = feature.get('formal_en');
var element = overlay.getElement();
element.innerHTML = label;
overlay.setPosition(coordinate);
map.addOverlay(overlay);
});
});
</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 12 Polygon</title>
</head>
<body>
<div id="map" class="map"></div>
<script src="js/ol-debug.js"></script>
<script type="text/javascript">
var featureArray = new ol.Collection();
featureArray.push(createCircleFeature({lng:-60, lat:10}, 10));
featureArray.push(createLineFeature({lng:-30, lat:10}, 10));
featureArray.push(createPointFeature({lng:0, lat:10}, 10));
featureArray.push(createRectFeature({lng:30, lat:10}, 10));
var vectorSource = new ol.source.Vector({
features: featureArray
});
var vectorLayer = new ol.layer.Vector({
source : vectorSource
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
view: new ol.View({
center: ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'),
zoom: 2
})
});
/**
* Create Circle Feature.
* @param center provide center {lng,lat}
* @param size referential width
* @return feature
*/
function createCircleFeature(center, size) {
var geom = new ol.geom.Circle([center.lng, center.lat], size);
geom.transform('EPSG:4326', 'EPSG:3857');
return new ol.Feature(geom);
}
/**
* Create Line Feature.
* @param center provide center {lng,lat}
* @param size referential width
* @return feature
*/
function createLineFeature(center, size) {
var shape = [
[center.lng + size, center.lat - size], // east-south
[center.lng - size, center.lat + size], // west-north
[center.lng + size, center.lat + size], // east-north
];
var geom = new ol.geom.LineString(shape);
geom.transform('EPSG:4326', 'EPSG:3857');
return new ol.Feature(geom);
}
/**
* Create Point Feature.
* @param center provide center {lng,lat}
* @param size referential width
* @return feature
*/
function createPointFeature(center, size) {
var geom = new ol.geom.Point([center.lng, center.lat]);
geom.transform('EPSG:4326', 'EPSG:3857');
return new ol.Feature(geom);
}
/**
* Create Rectangle Feature.
* @param center provide center {lng,lat}
* @param size referential width
* @return feature
*/
function createRectFeature(center, size) {
var shape = [
[center.lng + size, center.lat - size], // east-south
[center.lng + size, center.lat + size], // east-north
[center.lng - size, center.lat + size], // west-north
[center.lng - size, center.lat - size], // west-south
[center.lng + size, center.lat - size], // east-south (start)
];
var geom = new ol.geom.Polygon([shape]);
geom.transform('EPSG:4326', 'EPSG:3857');
return new ol.Feature(geom);
}
</script>
</body>
</html>
