openlayers实例_介绍OpenLayers
簡介
Web開發(fā)有一個(gè)專門的方向就是Web GIS，而Openlayers庫就是Web GIS里的一個(gè)翹楚，想要開源的Web GIS的JavaScript庫幾乎就沒有別的選擇。
OpenLayers的官網(wǎng)是
OpenLayers - Welcome?openlayers.org目前最新的版本是5.3.x。它的github地址是
openlayers/openlayers?github.com看看官網(wǎng)上的一句話介紹——A high-performance, feature-packed library for all your mapping needs.，如果看不出什么來(微言而不大義)，那就再看看詳細(xì)的介紹和特性
OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector data and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).
- Tiled Layers
- Vector Layers
- Cutting Edge, Fast & Mobile Ready
- Easy to Customize and Extend
總結(jié)出來幾個(gè)特點(diǎn)是
要強(qiáng)調(diào)的是OpenLayers僅僅是Web GIS的前端，不包含后端，而整個(gè)前后端的Web GIS的解決方案可以參考Arc GIS。有的場景下，比如數(shù)據(jù)量特別大，假設(shè)有10000個(gè)標(biāo)記，那么不適合把數(shù)據(jù)傳送到前端在前端渲染，而是在后端制圖，在地圖移動(dòng)、縮放的時(shí)候把當(dāng)前范圍內(nèi)的標(biāo)記通過圖像的方式傳遞到前端展現(xiàn)。
另一個(gè)混淆的概念是LBS應(yīng)用，比如百度地圖API、高德地圖API等，這種適用于通用型的應(yīng)用，而對(duì)于特別專業(yè)化的應(yīng)用解決方案，比如電信業(yè)、交通業(yè)就不適合了，它們是不需要展現(xiàn)周圍有什么公交站和電影院的 : )。
Hello World
新建目錄，然后npm init -y初始化一下，修改package.json。
{"name": "openlayers","version": "1.0.0","description": "","main": "index.js","scripts": {"start": "webpack-dev-server --open"},"keywords": [],"author": "","license": "ISC","dependencies": {"ol": "^5.3.3"},"devDependencies": {"html-webpack-plugin": "^3.2.0","webpack": "^4.39.1","webpack-cli": "^3.3.6","webpack-dev-server": "^3.7.2"} }新建webpack.config.js文件，以下幾乎是最小化的配置了
const path = require("path"); const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {mode: "development",entry: {app: "./src/index.js"},devtool: "inline-source-map",devServer: {//靜態(tài)資源放這個(gè)目錄下，不然會(huì)找不到contentBase: "./dist",hot: true},plugins: [new HtmlWebpackPlugin({template: "./dist/index.html"}),new webpack.HotModuleReplacementPlugin()],output: {filename: "[name].bundle.js",path: path.resolve(__dirname, "dist")} };入口的html.js文件
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>Hello Openlayers</title><link rel="stylesheet" href="./ol.css" /><style>html,body {margin: 0;height: 100%;}#map {position: absolute;top: 0;bottom: 0;width: 100%;}</style></head><body><div id="map"></div></body> </html>入口的index.js文件
import { Map, View } from "ol"; import TileLayer from "ol/layer/Tile"; import OSM from "ol/source/OSM"; import { fromLonLat } from "ol/proj"; new Map({target: "map",layers: [new TileLayer({source: new OSM()})],view: new View({center: fromLonLat([121.47, 31.23]),zoom: 15}) });不需要幾行代碼就搭建出了一個(gè)地圖，這里加載的是OpenStreetMap，沒有版權(quán)、費(fèi)用的困擾。
基礎(chǔ)概念
OpenLayers里有幾個(gè)重要的概念，理清它們后有助于我們開發(fā)。
Map
Map就是地圖，它是一個(gè)抽象的概念。Map上可以關(guān)聯(lián)多個(gè)Layer或者一個(gè)View。它的定義在ol/Map下。
Layer
Layer表示一個(gè)圖層。OpenLayers的名字里就帶有Layer，表示最終它的展現(xiàn)效果是通過一層層的Layer來顯示出來的，比如你可以在底部顯示基礎(chǔ)的地圖，然后在地圖的上方顯示一些標(biāo)記、線路、提示等效果。
它的定義在ol/layer下，有如下四種基礎(chǔ)的Layer，前兩種屬于柵格，后兩種屬于矢量。
- ol/layer/Tile - 渲染瓦片圖片，就是那種將整個(gè)地圖分解為一張張圖片最后拼起來的
- ol/layer/Image - 渲染圖像
- ol/layer/Vector - 渲染矢量數(shù)據(jù)
- ol/layer/VectorTile - 渲染矢量瓦片
Source
Source就是地圖的來源，在OpenLayers里可以支持多種地圖源，比如OpenStreetMap 、Bing、XYZ或者矢量的KML等。
Source是跟Layer關(guān)聯(lián)的。它的定義在ol/source下。
View
View用來表示一組屬性，比如中心點(diǎn)，縮放大小以及映射等。它的定義在ol/View下。
控件
在ol/control下已經(jīng)定義了一些內(nèi)置的控件，如果不滿意，部分也是可以定制的。
大致有如下一些內(nèi)置控件
- 全屏
- 鼠標(biāo)經(jīng)緯度
- 旋轉(zhuǎn)
- 縮放
- 小地圖(類似于打游戲時(shí)的那種小地圖)
交互
交互事件定義在ol/interaction下，大致有如下一些交互事件
- DragRotate
- DoubleClickZoom
- DragPan
- PinchRotate
- PinchZoom
- KeyboardPan
- KeyboardZoom
- MouseWheelZoom
- DragZoom
下圖是測距和測面積的交互實(shí)例
API和Demo
我覺得只要理清基礎(chǔ)概念，那么查閱API就不會(huì)很困難，在線API地址是
OpenLayers v5.3.0 API - Index?openlayers.org可以先瀏覽一遍Demo，目前大約有將近170個(gè)例子，瀏覽過后就可以對(duì)OpenLayers能做一些什么事情心里有數(shù)了，它的地址是
OpenLayers Examples?openlayers.org總結(jié)
以上是生活随笔為你收集整理的openlayers实例_介绍OpenLayers的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php输出mysql的数据结构_php课
- 下一篇： java的oauth2.0_[转]Jav