OpenLayers 3は地図の基本操作を実現します。

5008 ワード

OpenLayers 3 地図

本論文の例では、OpenLayers 3の地図に対する基本的な操作コードを共有します。
1.はじめに
地図に対する基本的な操作は、地図の拡大、縮小、移動、リセット、更新などです。OpenLayers 3のフレームで地図ビューを操作する方法です。
2.考え方を実現する
（1）新しいウェブページを作成し、前の記事を参照してOSMM瓦地図をロードし、ビューで地図の最大、最小スケーリングレベル及び最初の試運転回転角度を設定することにより、jQuery及びbootstrapを使用することにより、スケーリングコントロール及び回転コントロールマウスのサスペンションで提示される効果を実現する。
（2）地図容器に4つのボタンを新規作成し、ボタンのidを設定し、css制御ボタンのスタイルで
（3）ボタンごとにOpenLayer 3で地図ビューを操作するそれぞれの方法を関数に呼び出して、クリック拡大、クリック縮小、移動、リセット機能を実現します。
（4）ズームコントロールおよび回転コントロールにtooltipメッセージを追加し、tooltipの発泡位置を設定します。
3.コードは以下の通りです
htmlコード:


<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>        </title>
 <link rel="stylesheet" href="css/bootstrap.min.css" >
 <link rel="stylesheet" href="css/ol.css" >
 <link rel="stylesheet" href="css/ZoomSlider.css" >
 <script src="js/ol.js"></script>
 <script src="js/jquery-3.2.1.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script src="js/Operation.js"></script>
 <style>
 #map {
  width: 100%;
  height: 570px;
 }

 #menu {
  float: left;
  position: absolute;
  bottom: 10px;
  z-index: 2000;
 }

 .tooltip-inner {
  white-space: nowrap;
 }
 </style>
</head>

<body onload="init()">
 <div id="map">
 <div id="menu">
  <button id="zoom-out" class="btn btn-info">    </button>
  <button id="zoom-in" class="btn btn-info">    </button>
  <button id="panto" class="btn btn-info">    </button>
  <button id="restore" class="btn btn-info">    </button>
 </div>
 </div>
</body>

</html>

jsコード:


function init() {
 //   Map  ，      
 var map = new ol.Map({
 target: 'map', //     div
 //           
 layers: [
  //         OSM
  new ol.layer.Tile({
  source: new ol.source.OSM()
  })
 ],
 //       
 view: new ol.View({
  center: [12950000, 4860000], //        
  zoom: 8, //        
  minZoom: 6, //    
  maxZoom: 12, //    
  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 lz = ol.proj.fromLonLat([103.73333, 36.03333]);
  view.setCenter(lz); //    
 }
 //     （       ）
 document.getElementById('restore').onclick = function() {
  view.setCenter(center); //     
  view.setRotation(rotation); //      
  view.setZoom(zoom); //    
 }
 //                tooltip    
 $('.ol-zoom-in,.ol-zoom-out').tooltip({
 placement: 'right' //tooltip     
 });
 $('.ol-rotate-reset,.ol-attribution button[title]').tooltip({
 placement: 'left' //tooltip     
 });
}

表示効果は以下の通りです。

4.コード解析
地図のスケーリング、並進、回転などの基本的な操作は地図ビュービュービュービュービュービューで制御され、地図ビューに対応するset方式で実現されます。まずMapのgetView()を通じて現在の地図を取得する必要があります。ビューオブジェクトからそのget方法を呼び出して、現在のスケーリングレベル（Zoom）、センターポイント（センター）、回転角度などのパラメータです。
（1）地図の拡大縮小
ViewのsetZoom法で実現したスケーリングレベルはsetZoom法のパラメータで設定されています。まずview.getZoom（）を通じて現在の地図のレベルを取得し、setZoom方法を呼び出してスケーリングを行う（view.setZoom（zom-1）。地図を一回り大きくしてもいいです。
（2）移動地図
移動地図とは、地図の現在の地図の中心を変えることによって、地図ビューのset Center方法で実現される。まずマップのビューオブジェクトをMapオブジェクトで取得し、set Centerメソッドを呼び出して設定します。関数が伝えるパラメータは地図の中心の座標点です。
（3）回転地図
地図でデフォルトでロードされている回転コントロール（ol.ntrol.Rotate）によって実現され、RotateコントロールのatoHDEパラメータはデフォルトでtrueに設定され、回転角度が0の場合は自動的に回転機能を隠します。この例では、地図の初期回転角は60°（rotation：Math.PI/6/設定回転角度）を設定していますので、回転ボタンをクリックすると、60°回転して0°に戻ります。
（4）地図をリセットする
地図をロードし始めたばかりの状態で地図を復元する機能です。Viewの設定に関連して、まず地図ロード時のズームレベル、中心点、回転角度を取得してから、setZoom、set Center、set Rotation方法で設定して、地図のリセット機能を実現します。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

OpenLayers 3はレイヤーコントロール機能を実現します。

vueでポップアップ層のアニメーション効果を実現する例示的なコード