最新消息:请随时分享你的乐趣!

GOOGLE离线地图+tomcat+openlayers4

技术博客 磊子 86浏览 0评论

该教程是新手版,完全不懂Gis。直接哪里啊就可以用了。

使用乐太地图下载器

附下载地址破解版
链接:https://pan.baidu.com/s/1nwLhXod 密码:ne38
安装就不说了

下载Google地图

注意红色部分。需要选择,就按照google自己的方式进行存储。不用修改

下载下来如下目录:

级别/列/行.png

发布服务

讲下载下来的目录放到tomcat中:
不用war啥的复杂的东西,直接在tomcat的webapps 中创建一个目录tiles让后将刚才的下载的瓦片目录拷贝过来,然后请求就好了。
目录如下:

好了看见了,整个目录就这样了。启动tomcat

然后请求: http://localhost:8080/tiles/googleworld/{z}/{x}/{y}.png
将z/x/y 换成你的级别,行列号,就可以请求到一个地图分片了。

如何使用这个离线地图Demo

    <!DOCTYPE html>  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title></title>  
        <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">  
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->  
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>  
        <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>  

        <!--<script type="text/javascript" src="js/ol.js" ></script>-->
        <!--<script type="text/javascript" src="js/p.js" ></script>-->

    </head>  
    <body>  
        <div id="googleMap" style="width: 100%"></div>
<script>
    // google地图层
    var googleMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            //url:'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0'
             url:'http://localhost:8080/tiles/googleworld/{z}/{x}/{y}.png'
        })
    });

    // 创建地图
  var map = new ol.Map({
        layers: [
            googleMapLayer
        ],
        view: new ol.View({
            center: [108.4250, 34.0890],
            projection: 'EPSG:4326',
            zoom: 4
        }),
        target: 'googleMap'
  });
</script> 
    </body>  
    </html>  

最主要的一项内容

就是研究Openlayers4 如何做业务了。
给个链接:这是一个各种个地图的加载说明,这个地址里边的其他文章也可以看看。

http://weilin.me/ol3-primer/ch05/05-03.html

转载请注明:印迹. » GOOGLE离线地图+tomcat+openlayers4

发表我的评论
取消评论

表情