再补充（2019年4月8日）

国家天地图地图服务需要携带key才能访问。别忘了去官网申请key。

补充（2018年8月2日）

现在leaflet.js已经支持EPSG4326。如果你使用的是新版本的leaflet，那么通过简单的配置就能实现：

var map = L.map('mapid', {crs: L.CRS.EPSG4326
}).setView([30, 120], 15);L.tileLayer('http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {maxZoom: 20,tileSize: 256,zoomOffset: 1
}).addTo(map );

如果你使用的是早版本的leaflet，那么下面的介绍会帮助你。

问题描述

使用Leaflet，主要是看中了它轻便、跨平台的特性。

1.Leaflet无法直接加载WMTS服务。

2.使用Leaflet扩展插件leaflet-tilelayer-wmts.js加载wmts，默认是只支持EPSG3857.无法支持EPSG4326.

Leaflet默认坐标系是EPSG3857，而天地图使用的投影方式是EPSG4326或者900913。

这样完全加不上嘛！

解决之道

查看leaflet-tilelayer-wmts.js源代码，试试能否找到解决方法。试了试，完全看不懂哎。我觉得我有必要再学习下EPSG和WMTS的相关知识了。

通过查找相关资料和代码分析，大体了解了切片的方式和加载的大致原理。

再回到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(20037508.3428,-20037508.3428)};}return matrixIds3857;}

只改一个地方：

    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';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,center: {lon:112 , lat:40},zoom: 13})map.addLayer(emap)

最后看结果（只加载了一个矢量图层）：

Demo下载

leaflet加载国家天地图服务相关推荐

arcgis android 天地图,arcgis runtime sdk for android 系列 - 在100.X系列中实现加载福建天地图...
基本思路: 使用WebTiledLayer来加载福建天地图,要根据加载的地图获取正确的范围和比例尺. 关键技术点: 主体代码是参考张工加载国家天地图,需要将其中的范围改成福建正确范围. 具体实现步骤: ...
leaflet 加载 geoserver 发布的 wms 服务
1. 安装 geoserver 服务:略 2. 启动 geoserver: 3. 登录 geoserver 控制台:( 默认账号.密码为 admin.geoserver ) 4. 新建工作区: 5. ...
leaflet加载天地图
概述: leaflet是一个轻量级的并且开源的地图框架,是由esri发起的,由于其轻量.简单而被大家喜欢,本文带你学习如何在leaflet中加载天地图. 实现: leaflet加载天地图比较简单,做了 ...
SuperMap iClient3D for WebGL中加载地方天地图
作者:taco 在实际的场景应用中,通常都会在场景中添加一些底图.官网示例中已经包含了本地底图,iserver发布的底图,必应底图等.但是这些底图的清晰度并不能满足大部分人的需求.这时候我们就选择到了 ...
Cesium 加载离线地图服务
Cesium 可以加载自定义的地图服务,一般在私有云上应用比较广. 原始地图数据有很多地方都可以下载.比如常用的下载工具,付费的有水经注.91助手等,还有国家空间地理服务的官网上也有可用的数据.假设你 ...
leaflet加载geojson热力图加载坐标组热力图
通过SuperMap Leaflet加载geojson热力图,geojson通过数据服务查询获取到. geojson需要转换为4326坐标. geojson热力图加载 <!DOCTYPE htm ...
Spring Cloud Alibaba - 19 Nacos Config配置中心加载不同微服务的通用配置的两种方式
文章目录 Pre 实现方式一通过 shared-dataids 方式方式二通过 ext-config方式配置文件优先级源码 Pre Spring Cloud Alibaba - 18 Na ...
leaflet加载离线地图教程以及下载离线地图瓦片工具
关于源码以及教程侵权请联系作者删除最近在做一个leaflet加载离线地图的东西,结果在网上找到一份相关的教程以及源码源码链接:https://pan.baidu.com/s/1cGew8PAU-L ...
Leaflet加载百度地图
为了验证一下百度地图的影像.矢量.注记等瓦片数据是否是坐标统一的,写了一个简单的leaflet加载百度影像瓦片.矢量瓦片.注记瓦片的页面,叠加在一起,看了一下,果然坐标系是统一的. <!DOCT ...

leaflet加载国家天地图服务

再补充（2019年4月8日）

补充（2018年8月2日）

问题描述

解决之道

总结

leaflet加载国家天地图服务相关推荐

最新文章

热门文章