WebGIS入门实战(05)：基于不同地图库的地图服务加载展示demo(实战篇) （持续更新中）

实战：基于不同地图库的地图服务加载展示demo

本章将介绍使用不同的地图JS库去实现地图服务加载，demo预览效果会默认使用上一篇文章中介绍的node.js环境，学习的同学自己学以致用，下边不会重复的介绍demo部署预览效果的内容。

ArcGIS API for JavaScript Demo

本Demo基于ArcGIS API for JavaScript 4.10 版本。

创建一个文件夹arcgisdemo，然后新建一个index.html文件，引入arcgis js api。(可以下载本地api包引用，也可以引用在线的CDN js文件)

然后导入esri/Map、esri/views/MapView 模块，创建地图

全部的index.html代码

改变加载的地图服务类型。更换basemap为hybrid 就为下图效果

OpenLayers Demo

本demo基于 openlayers 4.6.5。

openlayers最新版已经支持前端主流的模块化，可以使用ES6 Module的方式进行模块导入使用。如导入Map模块的话：import Map from 'ol/Map';，如官方给的demo例子：

本专栏主要针对基础薄弱的同学，所以现在介绍的是偏原生的方式实现的demo。

创建index.html文件，引入openlayers脚本文件和样式文件（可以在线CDN或者本地源码文件引入，demo演示为了方便，使用在线CDN）：

然后使用 ol.Map 创建地图，其中接收三个主要参数:target、layers、view，target是html DOM节点ID，layers是要加载的图层，数组，支持多图层。view定义地图视图的中心点和缩放大小等。

所有的index.html代码为：

openlayers demo

更多demo实现可以看官方的demo列表，都有源码可以学习openlayers examples

Leaflet.js Demo

本demo基于Leaflet 1.3.4 版本。1.3.4 api文档

新建leafletdemo/index.html文件，引入api文件

新建div，然后创建map对象

使用 tileLayer 来创建切片图层

在通过 Polyline 来创建矢量图层（折线）

整个demo代码为：

本章小结

本章主要介绍几个常用地图JS库的简单地图展示Demo实现，目的是对比了解不同JS库实现方式的异同，初学者可以认识到不同的API实现方式，了解各自的特点，只有多写demo，才能熟悉对于API，学习的时候，可以从简单的Demo迭代功能点的方式去学习，比如：地图展示、地图缩放控制、鹰眼区域、测量工具（距离测量，面积测量）、地图坐标定位、地图坐标获取、 Marker气泡展示、矢量地图要素展示和查询等等。这样一系列功能迭代起来，就是一个复杂的Demo了，就会了解熟悉更多的API。总之，学一个新东西，都要多写代码多动手、然后思考和总结。

源码地址：gis616（备注源码）

（持续更新中......）