OpenLayers 官网例子的中文详解
當(dāng)你希望實(shí)現(xiàn)某種功能的時(shí)候，即使你對 openlayers 幾乎一竅不通，照著官網(wǎng)的例子做，也可以很快的實(shí)現(xiàn)想要的效果。
問題在于，官網(wǎng)的例子都是英文啊，不能很快定位到想要的效果是在哪個(gè)例子里面！！( 英文不渣就別看這篇文章了 )
最近在學(xué) openlayers ，我覺得非常有必要將 openlayers 官網(wǎng)的所有例子都看過去一遍，這篇文章就當(dāng)是筆記了。
名詞解釋
在 openlayer 里，下面這些單詞應(yīng)該這么翻譯。
layer：層
contorl：控件
feature：元素
interaction：交互
Vector：矢量的
Tile：瓦片
source：資源
format：轉(zhuǎn)換
projection：投影
無障礙地圖
Accessible Map
當(dāng)?shù)貓D獲得焦點(diǎn)之后，可以使用鍵盤對地圖進(jìn)行控制，+ 鍵放大地圖，- 鍵縮小地圖，tab 鍵切換地圖中的按鈕，enter 鍵點(diǎn)擊地圖中的按鈕，↑ ↓ ← → 鍵移動(dòng)地圖...
對于小白來說，官網(wǎng)的例子有些東西是不必要的，比如官網(wǎng)例子中的 controls，最初我以為要使用鍵盤控制地圖是不是和這個(gè) controls 有點(diǎn)關(guān)聯(lián)呢？其實(shí)它們一點(diǎn)關(guān)系都沒有，地圖默認(rèn)就支持無障礙訪問，為了更好更快的理解例子，我會(huì)在每個(gè)例子中給出最精簡的代碼：
<div id="map"></div> <script>//layers、target、view是地圖最基本的部分，是必需的new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()})],target: 'map',view: new ol.View({center: [0, 0],zoom: 2})}); </script>視圖動(dòng)畫
View Animation
讓地圖的視圖擁有動(dòng)畫啊效果，關(guān)鍵點(diǎn)在于 loadTilesWhileAnimating 和 view.animate。這個(gè)動(dòng)畫最基本 的效果有三種：移動(dòng)、旋轉(zhuǎn)、放縮，通過這三種效果的組合，可以做出很多特效。
使用 ArcGIS 圖片服務(wù)器
Image ArcGIS MapServer
這個(gè)沒弄懂，貌似官網(wǎng)給的這個(gè) url：https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer 用不了了????。
使用 ArcGIS 瓦片服務(wù)器
Tiled ArcGIS MapServer
這里使用了 ArcGIS 瓦片服務(wù)器的圖源，和上面的 ArcGIS 圖片服務(wù)器類似，注意對比兩者的區(qū)別。
版權(quán)歸屬
Attributions
Attributions 的意思是「歸屬」，指的是右下角那個(gè)版權(quán)控件。
為了更好的理解這一個(gè)例子，下面代碼展示了如何給地圖添加控件：
<div id="map"></div> <script>var attribution = new ol.control.Attribution();//這是版權(quán)控件var FullScreen = new ol.control.FullScreen();//這是全屏控件var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()})],controls: [attribution,FullScreen],//如果不設(shè)置 controls ，地圖會(huì)默認(rèn)設(shè)置target: 'map',view: new ol.View({center: [0, 0],zoom: 2})}); </script>這樣，我們就能在地圖上顯示版權(quán)和全屏按鈕了，如果不設(shè)置 controls ，那么地圖會(huì)默認(rèn)幫我們設(shè)置，默認(rèn)的效果等同于如下代碼：
<div id="map"></div> <script>var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()})],controls: ol.control.defaults(),//這就是默認(rèn)的效果target: 'map',view: new ol.View({center: [0, 0],zoom: 2})}); </script>接下來我們來看官網(wǎng)的例子：
<div id="map"></div> <script>var attribution = new ol.control.Attribution({collapsible: false});var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()})],//這里的意思是，使用默認(rèn)的 controls ，但是把默認(rèn)的「版權(quán)控件」設(shè)置為false，隱藏掉了//然后使用 .extend 來添加一個(gè)新的「版權(quán)控件」controls: ol.control.defaults({attribution: false}).extend([attribution]),target: 'map',view: new ol.View({center: [0, 0],zoom: 2})});function checkSize() {var small = map.getSize()[0] < 600;attribution.setCollapsible(small);attribution.setCollapsed(small);}window.addEventListener('resize', checkSize);checkSize(); </script>必應(yīng)地圖
Bing Maps
就是使用必應(yīng)地圖的一些API接口。這個(gè)例子展示了如何動(dòng)態(tài)顯示、隱藏地圖的層 ( layers )，主要用到的是 setVisible 方法。
setVisible 主要繼承于 ol.layer.Base 類，擁有這個(gè)方法的類有：
ol.layer.Baseol.layer.Groupol.layer.Layerol.layer.Imageol.layer.Tile//我們用到的就是這個(gè)ol.layer.Vectorol.layer.Heatmapol.layer.VectorTile框選
Box Selection
按住 ctrl + 鼠標(biāo)左鍵，拖拽，就可以框選地圖上的一些元素。
這里框選屬于一種交互，分別是 選擇、畫框 兩種交互：
<div id="map"></div> <script>var map = new ol.Map({layers: [new ol.layer.Vector({//這是一個(gè)能選擇的地圖源source: new ol.source.Vector({url: 'https://openlayers.org/en/v4.1.1/examples/data/geojson/countries.geojson',format: new ol.format.GeoJSON()})})],interactions:[//交互new ol.interaction.Select(),//選擇new ol.interaction.DragBox({condition: ol.events.condition.platformModifierKeyOnly})//畫框],target: 'map',view: new ol.View({center: [0, 0],zoom: 2})}); </script>interactions是交互的意思，如果不設(shè)置默認(rèn)為 ol.interaction.defaults()。接下來看官網(wǎng)的例子：
未完待續(xù)...
混合模式
Blend Modes
提示框
Custom Tooltips
調(diào)試瓦片
Canvas Tiles
給元素添加漸變樣式
Styling feature with CanvasGradient or CanvasPattern
CartoDB 圖源
CartoDB source example
這個(gè)東西可以通過 sql 語句來篩選元素。
顯示的密集元素
Clustered Features
根據(jù)元素定位視圖
Advanced View Positioning
調(diào)整地圖的顏色
Color Manipulation
自定義控件
Custom Controls
自定義logo
Custom Icon
自定義交互
Custom Interactions
整合 D3 來繪圖
d3 Integration
設(shè)備方向
Device Orientation
Drag-and-Drop Image Vector
Drag-and-Drop Image Vector
Drag-and-Drop
Drag-and-Drop
Drag, Rotate, and Zoom
Drag, Rotate, and Zoom
用鼠標(biāo)交互繪制點(diǎn)、線、面、圓
Draw Features
用鼠標(biāo)交互繪和修改制點(diǎn)、線、面、圓
Draw and Modify Features
用鼠標(biāo)繪制線、面
Freehand Drawing
與上面「用鼠標(biāo)交互繪制點(diǎn)、線、面、圓」不同的是，上面是點(diǎn)兩點(diǎn)就成為線了，這里的線要拖著鼠標(biāo)繪制，不是直線，是純手繪的。
用鼠標(biāo)繪制形狀
Draw Shapes
動(dòng)畫的實(shí)現(xiàn)
Dynamic Data
postcompose 在地圖渲染的時(shí)候會(huì)觸發(fā)。
KML 文件繪制元素---- 地震集中區(qū)
Earthquake Clusters
KML文件繪制元素---- 自定義地震點(diǎn)的元素
Earthquakes with custom symbols
EPSG:4326
EPSG:4326
總結(jié)
以上是生活随笔為你收集整理的OpenLayers 官网例子的中文详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 希捷操作系统SeaOS工作原理
- 下一篇： Apache OpenOffice 下载