Vector Layer

GeoJSON 形式のデータを Vector Layer に描画する

REST API から今描画に必要なデータを取得する

いろいろな図形を地図に描画する


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

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

ol.source.GeoJSON は、3.5 で廃止


GIS


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2015-09-06 (日) 01:20:54 (3381d)
Short-URL: http://at-sushi.com/pukiwiki/index.php?cmd=s&k=a0cc2ff8b8
ISBN10
ISBN13
9784061426061