1. 程式人生 > >openlayers調用瓦片地圖分析

openlayers調用瓦片地圖分析

說明 最小 最大 問題 undefine 結束 cti amp asc

網上有諸多資料介紹openlayers如何調用百度地圖或者是天地圖等常見互聯網地圖,本文作者使用的是不是常見的互聯網瓦片,現將調用過程進行整理與大家分享。

首先,openlayers就不贅述了(官網:http://openlayers.org/),之前一直使用的是arcgis js api,由於項目需要,轉戰到openlayer。特別感謝“扯淡大叔”的openlayers相關教程(http://weilin.me/ol3-primer/index.html),其中有很詳細的敘述了切片的原理與切片調用。

一. 切片

地圖切片是為了提高地圖顯示速度,預先在服務器上生成的一張張小圖片,地圖切片的層級原理詳見:http://weilin.me/ol3-primer/ch05/05-03.html 。地圖切片有幾個重要的概念,分別是層級、比例尺、行列號、分辨率、切片原點。

技術分享

層級:地圖切片都是分級的,不同層級的比例尺不同、顯示信息的詳細程度不同。

比例尺:圖上距離/實際距離,不同層級的比例尺不同。

行列號:固定層級下,地圖切片位於第幾行第幾列。

切片原點:切片原點一般有兩種:1、左上角;2、左下角。

分辨率:一個像素對應的實際距離。

二.分辨率計算

分辨率和比例尺是一一對應的,這之間有個計算公式:

切片比例尺=1:(分辨率*dpi/0.0254)

對於平面坐標,dpi一般取90.714,如果是經緯度dpi=90.714*111194.65191(天地圖就是這種)

這個分辨率的換算原理詳見:http://blog.csdn.net/yaoxiaochuang/article/details/50571957

三.openlayers調用瓦片

先直接上代碼:

技術分享
<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.3.3/css/ol.css" type="text/css">
    <style>
        .map {
            height:100%;
            width: 100%;
        }
    </style>
    <script src="https://openlayers.org/en/v4.3.3/build/ol.js" type="text/javascript"></script>
    <title>OpenLayers example</title>
</head>
<body>
<div id="map" style="width: 100%;height: 100%"></div>
<script>
    //
自定義分辨率和瓦片坐標系 var resolutions=[ 1.980325938, 0.990162969, 0.495081485, 0.247540742, 0.123770371, 0.061885186, 0.030942593, 0.015471296, 0.007735648, 0.003867824, 0.001933912, 0.000966956, 0.000483478, 0.000241739, 0.00012087, 6.04348E-05, 3.02174E-05, 1.51087E-05, 7.55434E-06, 3.77717E-06 ]; var tilegrid = new ol.tilegrid.TileGrid({ origin: [-252.3165,-253.7895], // 設置原點坐標 resolutions: resolutions // 設置分辨率 }); // 創建地圖的數據源 var gisSource = new ol.source.TileImage({ projection: ‘EPSG:4326‘, tileGrid: tilegrid, tileUrlFunction: function(tileCoord, pixelRatio, proj){ var z = tileCoord[0]; var x = tileCoord[1]; var y = tileCoord[2]; return "http://192.168.0.233/GIS/bin?services=default&row="+y+"&col="+x+"&level="+z; } }); // 地圖圖層 var gisMapLayer = new ol.layer.Tile({ source: gisSource }); // 創建地圖 var map = new ol.Map({ layers: [ gisMapLayer, //地圖切片格網,調試使用 new ol.layer.Tile({ source: new ol.source.TileDebug({ projection: ‘EPSG:4326‘, tileGrid: baiduSource.getTileGrid() }) }) ], view: new ol.View({ center: [118.386,31.366], projection: ‘EPSG:4326‘, zoom: 3 }), target: ‘map‘ }); // 顯示坐標控件 var mousePositionControl=new ol.control.MousePosition({ coordinateFormat:ol.coordinate.createStringXY(4), projection:"EPSG:4326", className:"custom-mose-position", target:document.getElementById("mouse-position"), undefinedHTML:"&nbsp" }); map.addControl(mousePositionControl); </script> </body> </html>
View Code

網絡上有很多類似調用百度地圖、天地圖的代碼,我找了一個調用百度地圖的代碼,在這基礎上修改的。代碼不復雜,但有幾個地方需要說明一下。

  1. resolutions數組:分辨率數組,即上文說到的分辨率,分辨率不正確,對應層級的坐標會有問題(可以理解為地圖被拉伸了)。註意:openlayers提供了設定最大最小層級的機制,但無論怎樣設置最大最小層級,這個分辨率數組必須從第0級開始,到最後一級結束,必須是一個完整的分辨率數組;
  2. origin:切片原點,這個根據每個地圖切片時采用的參數不同而不同,切片原點位置不同,會造成地圖的整體偏移。也就是說,當地圖發生偏移時,需要考慮是否是切片原點的設置不正確。

效果如下,切片格網用於調試的,可以看見當前切片的層級,每個切片的範圍和行列號:

技術分享

openlayers調用瓦片地圖分析