leaflet加载天地图

概述：

leaflet是一个轻量级的并且开源的地图框架，是由esri发起的，由于其轻量、简单而被大家喜欢，本文带你学习如何在leaflet中加载天地图。

实现：

leaflet加载天地图比较简单，做了一个WMTS扩展的类，源代码如下：

tdtLayer.js

L.TileLayer.WMTS = L.TileLayer.extend({defaultWmtsParams: {service: 'WMTS',request: 'GetTile',version: '1.0.0',layer: '',style: '',tilematrixSet: '',format: 'image/jpeg'},initialize: function (url, options) { // (String, Object)this._url = url;var wmtsParams = L.extend({}, this.defaultWmtsParams),tileSize = options.tileSize || this.options.tileSize;if (options.detectRetina && L.Browser.retina) {wmtsParams.width = wmtsParams.height = tileSize * 2;} else {wmtsParams.width = wmtsParams.height = tileSize;}for (var i in options) {// all keys that are not TileLayer options go to WMTS paramsif (!this.options.hasOwnProperty(i) && i!="matrixIds") {wmtsParams[i] = options[i];}}this.wmtsParams = wmtsParams;this.matrixIds = options.matrixIds||this.getDefaultMatrix();L.setOptions(this, options);},onAdd: function (map) {L.TileLayer.prototype.onAdd.call(this, map);},getTileUrl: function (tilePoint, zoom) { // (Point, Number) -> Stringvar map = this._map;crs = map.options.crs;tileSize = this.options.tileSize;nwPoint = tilePoint.multiplyBy(tileSize);//+/-1 in order to be on the tilenwPoint.x+=1;nwPoint.y-=1;sePoint = nwPoint.add(new L.Point(tileSize, tileSize));nw = crs.project(map.unproject(nwPoint, zoom));se = crs.project(map.unproject(sePoint, zoom));tilewidth =se.x-nw.x;zoom=map.getZoom();ident = this.matrixIds[zoom].identifier;X0 =this.matrixIds[zoom].topLeftCorner.lng;Y0 =this.matrixIds[zoom].topLeftCorner.lat;tilecol=Math.floor((nw.x-X0)/tilewidth);tilerow=-Math.floor((nw.y-Y0)/tilewidth);var layer = this.wmtsParams.layer;return url = this._url+'?T='+layer+'&L='+ident+'&Y='+tilerow+'&X='+tilecol;},setParams: function (params, noRedraw) {L.extend(this.wmtsParams, params);if (!noRedraw) {this.redraw();}return this;},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;}
});L.tileLayer.wmts = function (url, options) {return new L.TileLayer.WMTS(url, options);
};

说明：

该类中，核心代码为getTileUrl这个部分，可仔细研究研究。

前台调用：

<!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="../../plugin/leaflet/leaflet.css" type="text/css"><style>html, body, #map {height: 100%;padding: 0;margin: 0;overflow: hidden;}</style><script src="../../plugin/jquery/jquery-1.8.3.js"></script><script src="../../plugin/leaflet/leaflet.js"></script><script src="extend/layer/tdtLayer.js"></script><script>var map;$(window).load(function() {var url = "http://localhost:8081/tile/tdttile";
//          var url = "http://t2.tianditu.com/DataServer";/*** 天地图地图类型说明______________________________图层名称  |  说明vec_c  | 矢量img_c  | 影像ter_c  | 地形cva_c  | 注记eva_c  | 英文注记cia_c  | 路网eia_c  | 英文路网————————————————————————*/var vec_c = new L.TileLayer.WMTS(url ,{tileSize:256,layer: 'vec_c'});var cva_c = new L.TileLayer.WMTS(url ,{tileSize:256,layer: 'cva_c'});                          var map = L.map('map',{crs:L.CRS.EPSG4326,center: {lon:103.847 , lat:36.0473},zoom: 4})map.addLayer(vec_c);map.addLayer(cva_c);});</script>
</head>
<body>
<div id="map"></div>
</body>
</html>

说明：

代码中，有两个url，未注释的是离线天地图的url，注释掉的是在线天地图的url，离线天地图的可参考我的博文Openlayer是离线加载天地图.

---------------------------------------------------------------------------------------------------------------

技术博客

http://blog.csdn.NET/gisshixisheng

在线教程

http://edu.csdn.Net/course/detail/799
Github

https://github.com/lzugis/

联系方式

q q:1004740957

e-mail:niujp08@qq.com

公众号:lzugis15

Q Q 群:452117357(webgis)
337469080(Android)

leaflet加载天地图相关推荐

leaflet加载天地图影像、地形、矢量底图
第一步: 到天地图官网(国家地理信息公共服务平台天地图)注册账号,然后登陆,再点击图中的开发资源,在点击后会弹出选择框,再点击地图api(天地图API).这里直接点击我给的两个链接就行. 就会出现如 ...
leaflet 加载天地图
1.引入天地图的WMTS(两个都要用,一个是名称标注,一个地形) (1)矢量地图 const VEC_C = 'http://t1.tianditu.com/vec_c/wmts?layer=vec& ...
leaflet加载天地图DataServer
1. 天地图下载ChineseTmsProviders.js,https://github.com/htoooth/Leaflet.ChineseTmsProviders/tree/master/sr ...
osgEarth3.0 加载天地图
2.8版本里面有个xyz图层的例子,稍作修改就可以加载天地图的影像图层.在3.0版本中,XYZ , bing 等图层已经被移植到内核中.所以我们直接用XYZ图层来加载天地图即可 XYZImageLay ...
基于ArcGIS API for JavaScript加载天地图
文章目录前言效果图详细代码总结参考链接前言该篇主要介绍如何用ArcGIS JS API加载天地图,具体应用场景以及需求分析等,在上篇基于ArcGIS API for JavaScript ...
Vue+Openlayers实现加载天地图WMTS服务显示
场景 Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图: Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图_BADAO_ ...
leaflet加载离线地图教程以及下载离线地图瓦片工具
关于源码以及教程侵权请联系作者删除最近在做一个leaflet加载离线地图的东西,结果在网上找到一份相关的教程以及源码源码链接:https://pan.baidu.com/s/1cGew8PAU-L ...
ol xyz 加载天地图_OpenLayers加载天地图方法——WMTS和XYZ
1.ol.layer.Tile及数据源类结构 openlayers中,图层(layer)不可缺少的组成部分是数据源(source),天地图是切片的数据服务,对应的图层是ol.layer.Tile,下图 ...
(转载）arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。...
1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...

leaflet加载天地图

leaflet加载天地图相关推荐

最新文章

热门文章