openlayers实例_介绍OpenLayers

简介

Web开发有一个专门的方向就是Web GIS，而Openlayers库就是Web GIS里的一个翘楚，想要开源的Web GIS的JavaScript库几乎就没有别的选择。

OpenLayers的官网是

OpenLayers - Welcomeopenlayers.org

目前最新的版本是5.3.x。它的github地址是

openlayers/openlayersgithub.com

看看官网上的一句话介绍——A high-performance, feature-packed library for all your mapping needs.，如果看不出什么来(微言而不大义)，那就再看看详细的介绍和特性

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

总结出来几个特点是

做地图的
能支持不同的层类型，比如瓦片、矢量等
能支持移动设备了
方便定制和扩展
Licence也不让你有后顾之忧

要强调的是OpenLayers仅仅是Web GIS的前端，不包含后端，而整个前后端的Web GIS的解决方案可以参考Arc GIS。有的场景下，比如数据量特别大，假设有10000个标记，那么不适合把数据传送到前端在前端渲染，而是在后端制图，在地图移动、缩放的时候把当前范围内的标记通过图像的方式传递到前端展现。

另一个混淆的概念是LBS应用，比如百度地图API、高德地图API等，这种适用于通用型的应用，而对于特别专业化的应用解决方案，比如电信业、交通业就不适合了，它们是不需要展现周围有什么公交站和电影院的 : )。

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: {//静态资源放这个目录下，不然会找不到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})
});