网页设计实训报告思考建议seopeixun

地图服务数据可视化是根据调用的地图服务请求Web服务器端的地图数据，实现地图数据可视化的过程。通过地图服务、地图、要素和属性数据可以在多种类型的客户端应用程序中使用。下面介绍几种常见的地图服务，重点介绍利用Leaflet加载这些地图服务的方法，包括OSM、Bing地图、Google地图、天地图地图、百度地图、高德地图、智图、ArcGIS瓦片地图。

OSM（Open Street Map，开放街道地图）

是一个网络地图协作计划，目标是创造一个内容自由且能让所有人编辑的世界地图，也称为开源wiki地图。OSM数据开源可以被用户自由下载使用，OSM数据主要从网站（https://www.openstreetmap.org/）中的“导出”界面进行获取。

基于Leaflet加载OSM的主要实现步骤如下。
（1）新建一个Web网站，将Leaflet开发库和样式文件（leaflet.js和leaflet.css）复制到网站的某一个目录下。
（2）在新建网站中创建一个HTML网页，在网页的中引入leaflet.js和leaflet.css。
（3）在HTML网页的中新建一个div作为地图容器，设置其id为“leaf_map”，并设置其高度。
（4）在脚本区域编写代码，实现一个加载地图的函数init()，即在该函数中分别创建Leaflet的Map类、Layer类（L.TileLayer）的对象，通过addTo()方法将图层加载到地图容器中，并在Map类的属性参数中设置参考坐标系、显示中心和显示级数等。
（5）在HTML网页中由onload事件处理函数调用加载地图的函数init()，完成地图加载显示功能。
下面以一个墨卡托坐标系的OSM世界地图服务为例，进行地图的加载显示，地图服务的下载地址为http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png。
代码如下：

Bing地图（必应地图）

是微软必应搜索引擎的一项功能，它提供了网络地图服务。Bing地图包括街景地图、鸟瞰图、街边地图和3D地图，全面支持国内外用户进行地图浏览和出行规划，并提供地点搜索、公共交通线路查询、自驾车导航、路况查询和位置定位等功能。使用Bing地图，首先要去官网注册一个微软账户，申请一个Bing地图的密钥，然后就可以在Bing地图集合中使用任意底图。

下面实例实现了Bing地图的加载显示，该服务是一个墨卡托坐标系的瓦片地图服务，加载后的效果如图

基于Leaflet加载Bing地图的主要实现步骤如下。
（1）加载OSM的过程，先定义一个地图容器。
（2）在区域中添加leaflet-bing-layer.js脚本的引用，该插件用于加载Bing地图的显示，下载地址为https://github.com/digidem/leaflet-bing-layer。
（3）定义Bing图层（创建与实例化L.TileLayer.Bing类的对象），并添加到Map容器中。
代码如下：

Google地图（谷歌地图）

是Google公司提供的电子地图服务，包括局部详细的卫星照片。该服务提供的功能有全球行政区划图、道路网、卫星影像和地形图。
下面以一个墨卡托坐标系的Google地图服务为例，实现地图的加载显示功能，该服务的下载地址为http://mt1.google.cn/vt/lyrs=m@207000000&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Galile
基于Leaflet加载显示Google地图的主要实现步骤如下。
（1）加载OSM的过程，先定义一个地图容器。
（2）定义Google地图图层（创建与实例化L.TileLayer类的对象），并加载到地图容器中。
代码如下：