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>