Skip to content

Instantly share code, notes, and snippets.

@9SQ 9SQ/openlayers_test1.html
Last active Aug 29, 2015

Embed
What would you like to do?
OpenStreetMap(EPSG:3857)の上にVector Layer(EPSG:4326)を乗せる (OpenLayers 3)
<!doctype html>
<html lang="ja">
<head>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
<style>
.map {
height: 500px;
width: 100%;
}
</style>
<script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"></script>
<title>WGS84 Vector Layer on OSM</title>
</head>
<body>
<p>球面メルカトル図法(EPSG:3857)なOpenStreetMapの上に世界測地系(WGS84/EPSG:4326)で指定した位置をプロット、図形を描画する<br />(ViewのProjectionはEPSG:3857のまま)</p>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM
}),
new ol.layer.Vector({
source: new ol.source.GeoJSON({
format: new ol.format.GeoJSON({
defaultProjection: 'EPSG:4326'
}),
projection: 'EPSG:3857',
text: '{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[130.42, 32.35],[134.15, 35.27],[139.43, 35.78],[137.32, 31.37]]]}}'
})
})
],
view: new ol.View({
center: ol.proj.transform([134.15, 35.27], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
</script>
</body>
</html>
@Assimilator

This comment has been minimized.

Copy link

commented Jan 27, 2015

Great conversion example!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.