制作网络网站,小型办公室网络组建方案,静安企业网站建设,益阳建站网站制作简介Web开发有一个专门的方向就是Web GIS#xff0c;而Openlayers库就是Web GIS里的一个翘楚#xff0c;想要开源的Web GIS的JavaScript库几乎就没有别的选择。OpenLayers的官网是OpenLayers - Welcomeopenlayers.org目前最新的版本是5.3.x。它的github地址是openlayers/op…简介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 LayersVector LayersCutting Edge, Fast Mobile ReadyEasy 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
htmlheadmeta charsetutf-8 /titleHello Openlayers/titlelink relstylesheet href./ol.css /stylehtml,body {margin: 0;height: 100%;}#map {position: absolute;top: 0;bottom: 0;width: 100%;}/style/headbodydiv idmap/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})
});
不需要几行代码就搭建出了一个地图这里加载的是OpenStreetMap没有版权、费用的困扰。基础概念OpenLayers里有几个重要的概念理清它们后有助于我们开发。MapMap就是地图它是一个抽象的概念。Map上可以关联多个Layer或者一个View。它的定义在ol/Map下。LayerLayer表示一个图层。OpenLayers的名字里就带有Layer表示最终它的展现效果是通过一层层的Layer来显示出来的比如你可以在底部显示基础的地图然后在地图的上方显示一些标记、线路、提示等效果。它的定义在ol/layer下有如下四种基础的Layer前两种属于栅格后两种属于矢量。ol/layer/Tile - 渲染瓦片图片就是那种将整个地图分解为一张张图片最后拼起来的ol/layer/Image - 渲染图像ol/layer/Vector - 渲染矢量数据ol/layer/VectorTile - 渲染矢量瓦片SourceSource就是地图的来源在OpenLayers里可以支持多种地图源比如OpenStreetMap 、Bing、XYZ或者矢量的KML等。Source是跟Layer关联的。它的定义在ol/source下。ViewView用来表示一组属性比如中心点缩放大小以及映射等。它的定义在ol/View下。控件在ol/control下已经定义了一些内置的控件如果不满意部分也是可以定制的。大致有如下一些内置控件全屏鼠标经纬度旋转缩放小地图(类似于打游戏时的那种小地图)交互交互事件定义在ol/interaction下大致有如下一些交互事件DragRotateDoubleClickZoomDragPanPinchRotatePinchZoomKeyboardPanKeyboardZoomMouseWheelZoomDragZoom下图是测距和测面积的交互实例API和Demo我觉得只要理清基础概念那么查阅API就不会很困难在线API地址是OpenLayers v5.3.0 API - Indexopenlayers.org可以先浏览一遍Demo目前大约有将近170个例子浏览过后就可以对OpenLayers能做一些什么事情心里有数了它的地址是OpenLayers Examplesopenlayers.org
