openlayers开发完整示例代码教程

    

   （OpenLayers DEMO）点击下载

   本案例介绍如何在离线（单机、或局域网无Internet）状态下发布离线地图，且结合OpenLayer做基于地图的二次开发。

 

一、   离线地图数据下载

离线地图下载，可以使用bigemap地图下载器全能版（下载地址http://www.bigemap.com/reader/download/detail201802015.html）。

  打开bigemap地图下载器，左上角“选择地图”选择谷歌地球，右上角“选择行政区域”我们选择四川省为例，如下图所示：

双击下载，此次注意选择“存储选项”选择，“瓦片：bigemap”，勾选下载级别。

至此，离线地图即下载完毕，基础数据准备完成，我们可以打开下载目录简单查看瓦片目录。

二、   发布离线地图服务

基础数据准备完毕后，我们通过bigemap离线地图开发工具将地图瓦片发布成OGC协议的wmts服务，（下载地址：http://www.bigemap.com/reader/download/detail2020040918.html）。

打开离线地图开发工具，选择“添加离线地图”，如下图：

第二步：选择“添加离线地图”，弹出如下对话框

 

地图名称：四川地图 （工具你自己的需要任意命名）

    瓦片库文件：选择后面的浏览，找到你下载的离线地图瓦片，里面有个map.ini文件，选择这个文件，如下图:

 

创建完成，我们即可通过“浏览”按钮，在浏览器中查看刚才发布的离线地图。

浏览结果如下：

 

一、   基于OpenLayer加载WMTS地图服务及二次开发

接下来是下载openlayers了，我们给处理具体的案例代码和OpenLayer包（点击下载），到时候大家可自行下载。

这里采用了OpenLayers2为例,

引用Openlayers如下:

设置坐标系统和中心点位置

 

源代码：openlayers.html

 

   

   

   

   

         选中的经纬度：

       

   

   

   

       

           

       

       

   

   

 

创建wmts服务：打开bigemap离线地图开发工具，找到四川省地图，选择“开发使用”，选择“WMTS服务”

 

使用浏览器打开wmts服务地址，配置如下几个选项（这几个选项对应到OpenLayer里面的具体参数

 

 

如下图所示，将WMTS的具体参数设置到OpenLayer

 

 

设置鼠标事件，显示经纬度

 

完成后，运行界面如下: