Openlayers 3 初次使用記錄

本次項目是門戶網站，屬于該行業各種業務的總入口，各業務由不同的廠商提供，其中有一個業務的廠商使用的是瓦片地圖。作為門戶網站要展現比較概要一點的資訊，則相應的也需要加載使用瓦片地圖。選擇使用Openlayer，在此記錄基本使用方法，具體詳細使用方法和文檔，請見官網：

https://openlayers.org

一、瓦片圖初識

使用地圖，第一反應是基于類似于百度或安德地圖一樣，有具體的使用接口和文檔介紹，

而瓦片地圖僅提供了URL 

http://xxx.xxx.xxx.xxx/ht/{z}/{x}/{y}?dc=3

 而具體顯示則需要借助第三方，經過咨詢和搜尋篩選，最終選擇使用Openlayer來加載瓦片地圖。

二、基本概念

1，Map：把整個地圖看作一個容器

2, Layer: 為地圖圖層。一個圖層是資源中資料的可視化顯示，OpenLayers 包含三種基本圖層類型：ol.layer.Tile、ol.layer.Image 和 ol.layer.Vector。

1），ol.layer.Tile 用于顯示瓦片資源，這些瓦片提供了預渲染，并且由特定分别率的縮放級别組織的瓦片圖檔網格組成。

2），ol.layer.Image用于顯示支援渲染服務的圖檔，這些圖檔可用于任意範圍和分辨率。

3），ol.layer.Vector用于顯示在用戶端渲染的矢量資料。

3, Source: 每個圖層有對應的資料源

4, View: 地圖視圖, 進行地圖表現

ol. View負責地圖的中心點，放大，投影之類的設定。

一個ol.View執行個體包含投影projection，該投影決定中心center 的坐标系，放大zoom 選項是一種友善的方式來指定地圖的分辨率，可用的縮放級别由maxZoom （預設值為28）、zoomFactor （預設值為2）、maxResolution （預設由投影在256×256像素瓦片的有效成都來計算） 決定。起始于縮放級别0，以每像素maxResolution 的機關為分辨率，後續的縮放級别是通過zoomFactor區分之前的縮放級别的分辨率來計算的，直到縮放級别達到maxZoom 

5, 地與使用者互動的控件（Control和Interaction）和事件機制

三、代碼實作

1，地圖map建立，并設定source 、view、layer

new Map({

target: 'map',

layers: [

// 建立圖層

new TileLayer({

source: new XYZ({

url: 'https://xxx.xxx.xxx.xxx:60443/map/ht/{z}/{x}/{y}?dc=3',

}),

],

view: new View(

//建立視圖

{

center: fromLonLat([123.094561, 29.033898]), // 中心點

zoom: 7, // 顯示比例

針對坐标連結顯示瓦片地圖傳入的URL，類似于：

https://xxx.xxx.xxx.xxx:8080/map/ht/{z}/{x}/{y}?dc=3

由openlayer具體定位顯示哪一片地圖。

瓦片地圖單個瓦片顯示的連結顯示見文章清單配圖：

http://39.104.80.249/ht/7/105/51?dc=3

 連結中數字 7/105/51用于定位地圖中具體某一個瓦片圖，這個具體加載定位由OL根據設定source，layer和view自動定位加載

2，增加标注點：在map中增加LayerVector 

//矢量要素資料源

var source = new Vector({

features: markerPoints,

});

//聚合标注資料源

var clusterSource = new Cluster({

distance: 10, //聚合的距離參數，即當标注間距離小于此值時進行聚合，機關是像素

source: source, //聚合的資料源，即矢量要素資料源對象

//加載聚合标注的矢量圖層

var styleCache = {}; //用于儲存特定數量的聚合群的要素樣式

var clusters = new LayerVector({

source: clusterSource,

style: function (feature, resolution) {

var style = undefined; 

var markType = feature.values_.features[0].get('type');

if (!style) {

style = [

new Style({

image: new Icon({

scale: 0.3, // 圖示縮小顯示

anchorOrigin: 'top-right', //标注樣式的起點位置

anchorXUnits: 'pixels', //X方向機關：分數

anchorYUnits: 'pixels', //Y方向機關：像素

offsetOrigin: 'bottom-left', //偏移起點位置的方向

opacity: 0.9, //透明度

src:

markType === '1'

? require('./../../assets/markericon/boat.png')

: require('./../../assets/emergency.png'), //圖檔路徑

];

}

return style;

},

map.addLayer(clusters);

3，在map中添加點選事件

map.on('singleclick', (evt) => {

// 擷取點選的标注

let features = map.forEachFeatureAtPixel(evt.pixel, function (feature, layerVetor) {

return feature;

// 處理點選擷取到的标注點

if (features) {

if (features && features?.length > 0) {

setShowfeature(features[0]);

} else {

setShowfeature(features);

hiddenOverlay(features);

由于初次接觸瓦片地圖，使用Openlayer，在此的過程中還是遇到一些問題：

1）瓦片地圖和現在常用的地圖開發使用上有個概念上的差別，瓦片地圖僅僅是地圖資源，而沒有常用的地圖接口和相關文檔。

2）Openlayer中的坐标體系不止一種，常用的經緯度坐标，需要通過坐标系轉換後，才能

被接受，并達到預期效果。

3）添加标注時，可選擇是否需要聚合效果（即某一區域如果标注點過于密集，在顯示時，一定範圍内标注點，顯示為一個标注點），在密集的情況下，點選擷取标注點時，則需要判斷此處标注點，是否被聚合過，即隻有一個标注點，還是有多個标注點。

以上是本次項目中使用到的一些功能點，也隻是Openlayer的冰山一角，在此記錄備查或供未使用過并需要用Openlayer的同學一點點參考。随着項目的深入或需要，可能會進一步深入學習并使用Openlayer，并加以記錄。