Openlayersは地図の基本操作を実現します。
3866 ワード
本論文の例では、Openlayers地図基本操作を実現するための具体的なコードを共有します。
1、htmlページを新たに作成し、ol.jsとol.cssファイルを導入して、bodyの中にDivタグと4つのButtonボタンを作成して、地図の拡大、縮小、並進などの機能を実現します。
2、コード実現
初期化画面
縮小ボタンをクリックして、地図の縮小を実現します。
拡大ボタンをクリックして、地図の拡大を実現します。
ボタンをクリックして、地図を指定の場所に移動します。（阜陽の近く）
地図の右上の矢印ボタンをクリックして、地図を回転しないようにします。
リセットボタンをクリックして、地図を初期状態に戻します。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
1、htmlページを新たに作成し、ol.jsとol.cssファイルを導入して、bodyの中にDivタグと4つのButtonボタンを作成して、地図の拡大、縮小、並進などの機能を実現します。
2、コード実現
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../lib/ol/ol.js"></script>
<link href="../css/ol.css" rel="stylesheet" />
<style type="text/css">
#menu
{
float : left;
position : absolute;
bottom : 10px;
font-size : 20px;
z-index : 2000;
}
</style>
<script type="text/javascript">
window.onload = function () {
// map
var map = new ol.Map({
//
target: 'map',
//
layers: [
//
new ol.layer.Tile({
//
source: new ol.source.OSM()
})
],
//
view: new ol.View({
//
center: [12550000, 3680000],
//
zoom: 8,
//
minZoom: 6,
//
maxZoom: 12,
// 30
rotation: Math.PI/6
})
});
//
var view = map.getView();
var zoom = view.getZoom();
var center = view.getCenter();
var rotation = view.getRotation();
//
document.getElementById("zoom-out").onclick = function () {
//
var view = map.getView();
//
var zoom = view.getZoom();
// ，
view.setZoom(zoom - 1);
};
//
document.getElementById("zoom-in").onclick = function () {
//
var view = map.getView();
//
var zoom = view.getZoom();
// ，
view.setZoom(zoom + 1);
};
//
document.getElementById("panto").onclick = function () {
//
var view = map.getView();
//
var position = ol.proj.fromLonLat([115.2341, 32.4652]);
// ，
view.setCenter(position);
};
//
document.getElementById("restore").onclick = function () {
//
view.setCenter(center);
//
view.setRotation(rotation);
//
view.setZoom(zoom);
};
}
</script>
</head>
<body>
<div id="map">
<div id="menu">
<button id="zoom-out"> </button>
<button id="zoom-in"> </button>
<button id="panto"> ...</button>
<button id="restore"> </button>
</div>
</div>
</body>
</html>初期化画面
縮小ボタンをクリックして、地図の縮小を実現します。
拡大ボタンをクリックして、地図の拡大を実現します。
ボタンをクリックして、地図を指定の場所に移動します。（阜陽の近く）
地図の右上の矢印ボタンをクリックして、地図を回転しないようにします。
リセットボタンをクリックして、地図を初期状態に戻します。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。