zoukankan      html  css  js  c++  java
  • Leaflet 加载天地图服务和Arcgis server服务

    本文主要将如何通过leaflet加载天地图服务,并通过leaflet加载Arcgis  Server服务。

    由于项目需要,原本是想通过加载切片服务得方式加载天地图作为底图,天地图图层也是通过太乐底图助手或者第三方底图助手下载TIF图片,然后进行系列配准,发布服务,加载arcgis server图层。

    这种方式得缺点有以下几点:

    • 第三方地图下载助手下载得地图到一定等级会模糊,而且收费。
    • 切图占用服务器空间,影响效率。
    • 地图数据不会在进行更新。

    因此采用国家天地图服务,用leaflet加载天地图WMTS服务。由于leaflet默认不可以加载wmts服务,使用Leaflet扩展插件leaflet-tilelayer-wmts.js加载wmts,默认是只支持EPSG3857.无法支持EPSG4326。因为项目中图层坐标系统一采用EPSG4326。

    所以leaflet-tilelayer-wmts.js代码需要修改一下配置。修改了内部的getDefaultMatrix方法:

       getDefaultMatrix : function () {
            /**
             * the matrix3857 represents the projection 
             * for in the IGN WMTS for the google coordinates.
             */
            var matrixIds3857 = new Array(22);
            for (var i= 0; i<22; i++) {
                matrixIds3857[i]= {
                    identifier    : "" + i,
                    topLeftCorner : new L.LatLng(90,-180)  //修改代码
                };
            }
            return matrixIds3857;
        }

     其他不多说,上代码:

           var url='http://t0.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&tk=eb35dddb3aa33c7a8fb4218b39d1e424';
            var url1="http://t0.tianditu.gov.cn/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&tk=eb35dddb3aa33c7a8fb4218b39d1e424'"
            var emap = new L.TileLayer.WMTS( url ,
                                    {
                                        tileSize:256,
                                        layer: 'vec',
                                        style: "default",
                                       tilematrixSet: "c",
                                        format: "tile",
                                        attribution: "<a href='https://github.com/mylen/leaflet.TileLayer.WMTS'>GitHub</a>&copy; <a href='http://www.ign.fr'>IGN</a>"
                                    }
                                    );
            var map = L.map('map',{crs:L.CRS.EPSG4326, measureControl: true, center: {lon:118.615 , lat:32},zoom: 18})
            map.addLayer(emap)
            var emap1 = new L.TileLayer.WMTS( url1 ,
                {
                    tileSize:256,
                  //  layer: 'cva',
                    style: "default",
                    tilematrixSet: "c",
                    format: "tile",
                    attribution: "<a href='https://github.com/mylen/leaflet.TileLayer.WMTS'>GitHub</a>&copy; <a href='http://www.ign.fr'>IGN</a>"
                }
            );
        map.addLayer(emap1)

    加载arcgis server 服务代码:

    L.esri.dynamicMapLayer(gxLayers[i].url, {
                    id: gxLayers[i].name,
                    layers: []
               }).addTo(map);

    好了,大功告成。

    一下需要注意得几点:

    • 调用天地图服务现在需要key
    • 天地图服务等级最大是19等级
    • 天地图服务坐标系和图层坐标系一致 
  • 相关阅读:
    主机名与域名
    Screen 状态栏配置
    linux 修改时间
    vsftpd2.3.2安装、配置详解
    mysql 二进制日志
    linux下mysql操作的命令
    Apache加载PHP.ini顺序
    页面异步加载javascript文件
    一段实现页面上的图片延时加载的js
    如何在MySql中记录SQL日志
  • 原文地址:https://www.cnblogs.com/lhgis/p/10608182.html
Copyright © 2011-2022 走看看