Openlayer4加载ArcGIS离线瓦片地图

当然在此以前是用openlayer2,在太乐地图下载的地形图,会有模版.从前一直在那基本功上转移的代码,不过随着项指标上扬意义的充实,openlayer2越来越不适应现在的类型,所以决定换来openlayer4,明日给我们说的是Openlayer4加载ArcGIS离线瓦片地图.

作者博客主页:

鉴于要在内网开辟地图项目,不可能访谈在线的地图服务了,就想把地图瓦片下载下来,网络找了有个别下载器都以索要注册及收取金钱的,不然下载到的图都以打水印的,如下:

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

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

二零一七年新禧已由此完,新一年的冲锋也刚刚起头。二零一六年要经历的挑衅也是大大的。。。不扯了。

图片 1

是因为大小的缘由,大家选择前6级下载

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

年底前软件项目相对非常多,适逢其时在年初进来一家新公司,项目本来多个接四个,未有丝毫悬停。年终事先的邮电通讯运行商新春保险项目时节前做的末尾叁个种类,时间紧,任务中。首要仍然有趣的事关到早前未有用过,並且公司也没人施行过的离线地图瓦片加载热力图效果的采取。

因为地图瓦片正是依据层级、行、列准绳协会的一张张图片(如下图,14是瓦片的等第,13478是行号,6202是列号卡塔 尔(英语:State of Qatar),所以想到能够实行用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)

作者: 孟庆岳

leaflet.css和leaflet.js可以用:

3.依据行列号拼接出瓦片的url地址

官方网站: 百度寻觅(shmily科技)

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
1 #Google地图瓦片为例,zoom是地图层级,x,y为行列号2 tilepath = 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i'+str+'!2i'+str+'!3i'+str+'!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0'

CSDN博客:http://blog.csdn.net/qq\_27118895

接下去便是具体的加载离线瓦片的法子,离线地图是应用太乐地图下载器下载的地图瓦片,由于要求的地形图是相比精简的地形图,所以就挑选了openstreetmap的地图,这里运用Google地图的平整实行下载(分裂的地形图准绳须求更动,谷歌地图准则最相像原始法则,所以下载的地形图日常都用Google地图法则实行下载卡塔 尔(英语:State of Qatar)。

下载图片

github:https://github.com/1294083463/openlayersLoadArcGIS

var url = "http://localhost:8080/mapTest/offlineMapTiles/{z}/{x}/{y}";
//z表示地图的缩放级别
//x表示地图瓦片的横向坐标
//y表示地图瓦片的纵向坐标
//其中的路径就是保存地图瓦片的的路径
var tilemap = new L.TileLayer(url);
//加载地图的底层对象
var mapcenter = new L.latLng(21.5,67.89);
//地图的中心点的对象
 1 # 下载图片 2 def getimg(Tpath, Spath, x, y): 3     try: 4         f = open(Spath, 'wb') 5         req = urllib.request.Request 6         req.add_header('User-Agent', random.choice  # 换用随机的请求头 7         pic = urllib.request.urlopen(req, timeout=60) 8         f.write(pic.read 9         f.close()10         print + '_' + str + '下载成功')11     except Exception:12         print + '_' + str + '下载失败,重试')13         getimg(Tpath, Spath, x, y)

创制二个地形图对象Map,将地图瓦片等对象增加进这些目的:

封存图片时也亟需据守层级,行创制好目录存款和储蓄

map = new L.Map("map", {    //"map"为需要插入地图的div的id
            CRS:'Simple',   //离线地图加载规则
            center:mapcenter,   //地图中心点
            zoom: 12,           //默认展示的缩放级别
            layers: [tilemap],  //插入的地图的图层
            minZoom: 0,         //最小缩放级别
            maxZoom: 15,        //最大缩放级别
            opacity: 0.1,       //图层的不透明度
            maxBounds: [        //地图的东西南北最大边界,
                                //在缩放级别和是的情况下,地图只会展示在当前的区域内
                //south west
                [34.6, 113.4],
                //north east
                [34.9, 113.98]
            ]
        });
1 path = "D:\\GoogleImg\\" + str + "\\" + str2     if not os.path.exists:3         os.makedirs

离线地图瓦片加载成功后,就须求成立热力图图层:

结果如下:

function setHeatMap(heatmapData){
        /**
         * 创建热力图的方法
         * 传一个参数,从后台获取到的热力图的点的数据
         * 数据结构
             var heatmapData={
                max: 1000,
                data: [
                    {lngField:67.89,latitude:21.5,count:100,radius:0.002},
                    {lngField:67.869,latitude:21.551,count:19,radius:0.002}
                ]
            };
         */
        if(heatmapLayer != null){、
            /*这个方法是在每一次刷新热力图之前把前一次创建的热力图对象清除,
             *如果不对这个对象进行重置,会在每一刷新的时候给这个对象添加数据上去,
             *会导致这个对象内存增长
             */
            map.removeLayer(heatmapLayer);
        }
        var config = {  //热力图的配置项
            radius: 'radius',       //设置每一个热力点的半径
            maxOpacity: 0.9,        //设置最大的不透明度
            // minOpacity: 0.3,     //设置最小的不透明度
            scaleRadius: true,      //设置热力点是否平滑过渡
            blur: 0.95,             //系数越高,渐变越平滑,默认是0.85,
                                    //滤镜系数将应用于所有热点数据。
            useLocalExtrema: true,  //使用局部极值
            latField: 'latitude',   //维度
            lngField: 'longitude',  //经度
            valueField: 'count',    //热力点的值
            gradient: {   "0.99": "rgba(255,0,0,1)",
                    "0.9": "rgba(255,255,0,1)",
                    "0.8": "rgba(0,255,0,1)",
                    "0.5": "rgba(0,255,255,1)",
                    "0": "rgba(0,0,255,1)"
                },
            //过渡,颜色过渡和过渡比例,范例:
            /*
                {   "0.99": "rgba(255,0,0,1)",
                    "0.9": "rgba(255,255,0,1)",
                    "0.8": "rgba(0,255,0,1)",
                    "0.5": "rgba(0,255,255,1)",
                    "0": "rgba(0,0,255,1)"
                }
            */
            // backgroundColor: 'rgba(27,34,44,0.5)'    //热力图Canvas背景
        };
        heatmapLayer = null;                        //重置热力图对象为null
        heatmapLayer = new HeatmapOverlay(config);  //重新创建热力图对象
        $(".leaflet-overlay-pane").empty();         //清空热力图的空间
        map.addLayer(heatmapLayer);                 //将热力图图层添加在地图map对象上
        heatmapLayer.setData(heatmapData);          //设置热力图的的数据
    }

图片 3

经过以上的不二等秘书技,基本能够完结离线加载瓦片地图,然后增加热力图图层的功力。

用Openlayers加载出来的作用和在线地图是同样的。

 

图片 4

图片 5

Python获取地图瓦片的全部代码

Openlayers加载离线瓦片参谋例子

Leaflet加载离线瓦片参谋例子

设若对你有用,请陈赞!多谢!

图片 6

相关文章