Projection in openlayers and Map properties
9005 ワード
今回は
Section 6: Introduction to Openlayers
mapの座標系、位置、スケーリング機能についてご紹介します.Section 6: Introduction to Openlayers
Projection in openlayers and Map properties
今回作成したファイルのパスは以下の通りです.
コードから直接書きます.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Importing openlayers library-->
<link rel="stylesheet" href="./assets/ol/ol.css" type="text/css">
<script src="./assets/ol/ol.js"></script>
<!-- Custom style file-->
<link rel="stylesheet" href="./style.css" type="text/css">
<!--Proj4js-->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.4/proj4.js"></script> -->
<title>Open layers basic</title>
</head>
<body>
<h1> OpenLayers map</h1>
<div id="mymap" class="map"></div>
<script src="./main.js"></script>
</body>
</html>
main.js
// Define a view
var view = new ol.View({
projection:'EPSG:4326',
center: [127,37.5], //ol.proj.fromLonLat([127,37.5]), //Coordinates of center
zoom: 10 //zoom level of map
})
// Define basemap
var OSMBaseMap = new ol.layer.Tile({
source: new ol.source.OSM()
});
// Define array of layers
var layerArray = [OSMBaseMap];
// Define our map
var map = new ol.Map({
target:'mymap',
layers: layerArray,
view: view
});
style.css
.map {
height: 600px;
width: 100%;
}
result
ChromeまたはEdgeでF12(開発者ツール)を開き、
コンソールでmapを検索すると、より低いelementが表示されます.map.getView().getCenter()現在開いている地図の中心座標map.getView().getZoom() zoomレベルを表示し、map.getView().getProjection()は座標系(epsg)を表す.
ちなみに一言.
pro4jsからjsライブラリを取得できます.
epsg.ioから種々の座標系に関するpro 4 jsを取得することもできる.
終わりだ!
次の位置は、グリッドレイヤを表示します.
Reference
この問題について(Projection in openlayers and Map properties), 我々は、より多くの情報をここで見つけました
https://velog.io/@kimdong215/3.-Projection-in-openlayers-and-Map-properties
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
今回作成したファイルのパスは以下の通りです.
コードから直接書きます.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Importing openlayers library-->
<link rel="stylesheet" href="./assets/ol/ol.css" type="text/css">
<script src="./assets/ol/ol.js"></script>
<!-- Custom style file-->
<link rel="stylesheet" href="./style.css" type="text/css">
<!--Proj4js-->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.4/proj4.js"></script> -->
<title>Open layers basic</title>
</head>
<body>
<h1> OpenLayers map</h1>
<div id="mymap" class="map"></div>
<script src="./main.js"></script>
</body>
</html>main.js
// Define a view
var view = new ol.View({
projection:'EPSG:4326',
center: [127,37.5], //ol.proj.fromLonLat([127,37.5]), //Coordinates of center
zoom: 10 //zoom level of map
})
// Define basemap
var OSMBaseMap = new ol.layer.Tile({
source: new ol.source.OSM()
});
// Define array of layers
var layerArray = [OSMBaseMap];
// Define our map
var map = new ol.Map({
target:'mymap',
layers: layerArray,
view: view
});style.css
.map {
height: 600px;
width: 100%;
}result
ChromeまたはEdgeで
F12(開発者ツール)を開き、コンソールで
mapを検索すると、より低いelementが表示されます.map.getView().getCenter()現在開いている地図の中心座標map.getView().getZoom() zoomレベルを表示し、map.getView().getProjection()は座標系(epsg)を表す. ちなみに一言.
pro4jsからjsライブラリを取得できます.
epsg.ioから種々の座標系に関するpro 4 jsを取得することもできる.
終わりだ!
次の位置は、グリッドレイヤを表示します.
Reference
この問題について(Projection in openlayers and Map properties), 我々は、より多くの情報をここで見つけました https://velog.io/@kimdong215/3.-Projection-in-openlayers-and-Map-propertiesテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol