OpenLayer加载离线天地图切片

最新推荐文章于 2024-03-26 18:03:08 发布

一个修理地球的人

最新推荐文章于 2024-03-26 18:03:08 发布

阅读量3.9k

点赞数 2

分类专栏： javascript tomcat搭建虚拟路径离线地图天地图离线地图 openlayer 文章标签：天地图离线地图 OpenLayer 地图瓦片

本文链接：https://blog.csdn.net/wo_buzhidao/article/details/79172343

版权

javascript 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

openlayer

9 篇文章 0 订阅

订阅专栏

离线地图

5 篇文章 0 订阅

订阅专栏

天地图为免费的地图服务，使用WGS84坐标系，通过下载工具下载的地图切片，通过搭建虚拟路径可以用OpenLayer进行请求，具体步骤如下：

1.配置天地图虚拟路径服务地址：

tomcat虚拟路径：打开server.xml放在host标签内： <Context docBase="D:\tiandituTitle" reloadable="true" debug="0" path="/tiandituTitle"/>

docBase：为切片存放的路径；

path：为服务地址名称参数；

2.设置tomcat端口为8087；

3.实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OpenLayer加载离线天地图切片</title>
    <link href="../css/ol.css">
    <script src="../js/ol,js.js"></script>
    <script src="../js/jquery-1.3.1.js"></script>
</head>
<body>
<div id="map" style="height: 70%;">
</div>
</body>
<script>
    var tiandituLayer=new ol.layer.Tile({
        source:new ol.source.XYZ({
            url:"http://localhost:8087/tiandituTitle/{z}/{y}/{x}.png"    //加载天地图离线地图地址
        })
    })
    var view =new ol.View({
        projection:'EPSG:4326',
        zoom:12,
        center:[106.750102,25.435957]
    })
    //天地图加载方式
    var map=new ol.Map({
        target:'map',
        layers:[tiandituLayer],
        view:view
    })
</script>
</html>

参考资料

加载离线瓦片地图

一个修理地球的人

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
7
评论
OpenLayer加载离线天地图切片

天地图为免费的地图服务，使用WGS84坐标系，通过下载工具下载的地图切片，通过搭建虚拟路径可以用OpenLayer进行请求，具体步骤如下：1.配置天地图虚拟路径服务地址：tomcat虚拟路径：打开server.xml放在host标签内： docBase：为切片存放的路径；path：为服务地址名称参数；2.设置tomcat端口为8087；3.实现代码如下：
复制链接

扫一扫

专栏目录