如何使用Openlayer发布地图

时间:2023-02-01 13:50:31

        如何使用Openlayer发布地图

一. 说明:

    本实例中使用的Openlayer 版本为最新的 Openlayer3,地图下载器使用的是Bigemap 地图下载器。

    Openlayer 下载地址:https://github.com/openlayers/ol3/releases/download/v3.20.1/v3.20.1-dist.zip

二. 下载地图瓦片

    1.打开Biemap地图下载器,框选要发布的地图范围,双击弹出下载选项框,瓦片类型选择谷歌,文件类型建议使用png 格式,以获得最佳清晰度。

如何使用Openlayer发布地图

三。配置Openlayer:

        地图瓦片下载完成之后 ,将瓦片放置在网站目录下的tile文件夹中。

        新建一个index.html文件,放在网站目录下。

        引入下载的Openlayer文件,这两个文件都需要引入

    如何使用Openlayer发布地图

    最后文件结构如下图:

    如何使用Openlayer发布地图

index.html的HTML部分如下图:

如何使用Openlayer发布地图

   

JS部分如下图:


如何使用Openlayer发布地图

    

        这样就配置好了,在浏览器中输入网站地址,可以正常浏览了,如下图:


如何使用Openlayer发布地图

点我下载源码