| 購買即可傳送所有openlayers例項原始碼(vue + openlayers)
| 注意:所有類常用的方法,屬性,在例項中涉及,到時會說明和被使用
概述
OpenLayers 可以輕鬆地在任何網頁中放置動態地圖。它可以顯示從任何來源載入的地圖圖塊、向量資料和標記。OpenLayers 開發目的是進一步使用各種地理資訊。它是完全免費的開源 JavaScript。
OpenLayers 支援Open GIS 協會制定的WMS(Web Mapping Service)和WFS(Web Feature Service)等網路服務規範,可以透過遠端服務的方式,將以OGC 服務形式釋出的地圖資料載入到基於瀏覽器的OpenLayers 客戶端中進行顯示。OpenLayers採用面向物件方式開發,並使用來自Prototype。js和Rico中的一些元件。
如何入門
國內暫時還沒有很標準的中文API文件,只能訪問openlayers官網(
https://openlayers。org
)進行學習,但全部是英文,英文不好,或者沒接觸過地圖的小夥伴,可能暫時看不懂,不知道從哪下手,還會忽略一些技術點,所有暫時跟著我的學習章節開始學習!
我的原始碼是Vue + openlayers,所以很符合目前前端的學習開發,每一個vue檔案就是一個例項,簡潔,易懂,很適合新手去學習。
接下來我們就去建立專案並建立第一個map(openlayers簡稱ol)
openlayers基礎類
一個基礎map所需要的元素
OpenLayers 初始化一個地圖(map),
至少需要一個可視區域(view),一個或多個圖層( layer), 和 一個地圖載入的目標 HTML 標籤(target)
,其中最重要的是圖層( layer)。
① layers:
layer 是各種圖層的基類,主要包括Tile,Image,Vector,VectorTile等圖層。只用
於讓子型別繼承和實現,一般自身不會例項化。主要功能是對向量資料和柵格資料的視覺化。圖層渲染結果的樣式,主要與資料渲染方式有關,與資料來源關係不大。
②
view:
這個物件主要是控制地圖與人的互動,如進行縮放,調節解析度、地圖的旋轉等控制。也就是說每個 map物件包含一個 view物件部分,用於控制與使用者的互動。
③ target:
這就是你所建立的地圖容器,所謂的div的id
開始建立地圖
① 建立Vue專案
vue create vue-openlayers
②
執行Vue專案
cd vue-openlayersnpm run serve
③ 安裝openlayers
cnpm i -S ol
④ 建立路由和檢視
必須熟悉且使用過Vue框架,不然無法進行,這裡就不多說了哈,相信大家都會[呲牙]
然後我們建立Vue檔案FirstMap。vue
這樣就完成了,我們就用三個要素:layers、view、target
注意技術點:
①
layers圖層主要有以下幾類:
ol。layer。Tile():平鋪圖層。對於提供預呈現、平鋪的網格影象的層源,這些網格按特定解析度的縮放級別組織。
ol。layer。Image():影象圖層。伺服器呈現的映像,可用於任意範圍和解析度。
ol。layer。Vector():向量圖層。在客戶端呈現向量資料。
ol。layer。VectorTile():向量平鋪圖層。圖層用於客戶端呈現向量平鋪資料。
後面章節都會有這些圖層
②
view。projection:
座標系(coordinate system)通常有兩種座標系:
地理座標系
(geographic coordinate systems) 和
投影座標系
(projected coordinate systems)
地理座標系:EPSG:4326 (WGS84)
投影座標系:EPSG:3857
EPSG:
EPSP的英文全稱是European Petroleum Survey Group,
中文名稱為歐洲石油調查組織,EPSG對世界的每一個地方都制定了地圖,但是由於座標系不同,所以地圖也各不相同。
③
source:
source 是 Layer 的重要組成部分,表示圖層的來源,也就是服務地址。
④
OSM:OpenStreetMap 提供的切片資料