Openlayer4加载ArcGIS离线瓦片地图,Python爬取地图瓦

2019-10-06 19:39 来源:未知

Openlayer4加载ArcGIS离线瓦片地图

本来以前是用openlayer2,在太乐地图下载的地图,会有模版.之前直接在此基础上更改的代码,但是随着项目的发展功能的增多,openlayer2越来越不适应现在的项目,所以决定换成openlayer4,今天给大家说的是Openlayer4加载ArcGIS离线瓦片地图.

本人博客主页:

由于要在内网开发地图项目,不能访问在线的地图服务了,就想把地图瓦片下载下来,网上找了一些下载器都是需要注册及收费的,否则下载到的图都是打水印的,如下:

步骤1:下载地图(我用的是太乐地图下载器)

[站外图片上传中...(image-80b6a-1515736060536)]

2017年春节已经过完,新一年的奋斗也刚刚开始。今年要经历的挑战也是大大的。。。不扯了。

图片 1

由于大小的原因,我们选择前6级下载

[站外图片上传中...(image-8f9a3c-1515736060536)]

年底前软件项目相对较多,恰巧在年底进入一家新公司,项目自然一个接一个,没有丝毫停歇。年底之前的电信运营商春节保障项目时节前做的最后一个项目,时间紧,任务中。主要还是涉及到以前没有用过,并且公司也没人实践过的离线地图瓦片加载热力图效果的应用。

因为地图瓦片就是按照层级、行、列规则组织的一张张图片(如下图,14是瓦片的级别,13478是行号,6202是列号),所以想到可以试试用python把这些图爬取下来。

步骤2:导出ArcGIS地图

导出ArcGIS地图

接到这个任务也是摸不着头脑,产品经理让先看看openstreetmap,了解一下其中的一些API接口。经过了解才知道这只是一大个地图包,并没有提供现实的离线地图的方案。带我的师傅说可以了解一下openlayers,使用openlayers也加载了一个离线地图瓦片进来。团队中的大神建议使用leaflet来做离线地图瓦片的加载,因为相对简单,不需要像openlayers那样加载太多依赖。

图片 2

步骤3:复制出我们想要的地图瓦片文件

[站外图片上传中...(image-e999d7-1515736060536)]

这个样子的
[站外图片上传中...(image-f6774d-1515736060536)]

先上代码:

主要可以分为三步:

步骤4:代码这样写,里面有注释可以修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ol加载ArcGIS本地切片</title>
    <link rel="stylesheet" href="js/ol.css">
    <script src="js/ol.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
    // 设置地图中心,此处进行坐标转换, 把EPSG:4326(经纬度坐标),转换为EPSG:3857(WGS84网络墨卡托(辅助球))坐标,因为ol默认使用的是EPSG:3857坐标
    //[106.677, 36.7388]是下载地图的中心经纬度
    var centerPos = ol.proj.transform([106.677, 36.7388], 'EPSG:4326', 'EPSG:3857');

    //创建地图
    var map = new ol.Map({
        view: new ol.View({
            center: centerPos,//地图中心位置
            zoom: 0//地图初始层级
        }),
        //添加地图图层
        //这里注销在下面添加新的离线地图图层
        /*layers: [
           new ol.layer.Tile({
                source:new  ol.source.OSM()
           })
       ],*/
        //将地图添加到的map容器中
        target: 'map'
    });

    //给8位字符串文件名补0
    function zeroFill(num, len, radix) {
        var str = num.toString(radix || 10);
        while (str.length < len) {
            str = "0" + str;
        }
        return str;
    }

    // ol.source.XYZ添加瓦片地图的层
    var tileLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            tileUrlFunction: function (coordinate) {
                //alert(coordinate[0] + " X= " + coordinate[1] + " Y= " + coordinate[2]);
                var x = 'C' + zeroFill(coordinate[1], 8, 16);
                var y = 'R' + zeroFill(-coordinate[2] - 1, 8, 16);
                var z = 'L' + zeroFill(coordinate[0], 2, 10);
                return '_alllayers/' + z + '/' + y + '/' + x + '.jpg';//这里可以修改地图路径
            },
            projection: 'EPSG:3857'
        })
    });
    map.addLayer(tileLayer);//添加到map里面
</script>
</body>
</html>

先加载:leaflet.js和leaflet.css,以及heatmap.js和heatmap-leaflet.js文件。

1.确定要下载的瓦片的级别,经度和纬度范围(可以通过百度坐标拾取获得,

源码下载地址:https://github.com/1294083463/openlayersLoadArcGIS

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
    <title>leaflet</title>  
    <link rel="stylesheet" href="./leaflet.css" type="text/css">  
    <style>
        #map{
            height: 360px;
            width: 600px;
        }
    </style>
</head>  
<body>  
    <div id = 'map'></div>
    <script type="text/javascript" src="./leafletsrc.js"></script>
    <script type="text/javascript" src="./heatmap.js"></script>
    <script type="text/javascript" src="./heatmap-leaflet.js"></script>
    <script type="text/javascript" src="./test.js"></script>
</body>  
</html>

2.计算出这个范围内瓦片的起始和终止行列号

作者

css文件是leaflet提供的CSS默认样式,包括里边气泡的样式等,如果需要修改,可以单独写CSS样式进行覆盖。

1 # 经纬度反算切片行列号 3857坐标系2 def deg2num(lat_deg, lon_deg, zoom):3     lat_rad = math.radians4     n = 2.0 ** zoom5     xtile = int((lon_deg + 180.0) / 360.0 * n)6     ytile = int((1.0 - math.log(math.tan + (1 / math.cos) / math.pi) / 2.0 * n)7     return (xtile, ytile)
TAG标签:
版权声明:本文由金沙澳门官网4166发布于世界史,转载请注明出处:Openlayer4加载ArcGIS离线瓦片地图,Python爬取地图瓦