Annonce
L'appel à participation est ouvert jusqu'au 17 novembre 2025!
#1 Mon 09 September 2013 17:12
- abdoudiouck
- Participant occasionnel
- Lieu: RENNES
- Date d'inscription: 19 Aug 2010
- Messages: 17
Leaflet Reprojection TMS
Bonjour
J'ai appelé un TMS à partir de Leaflet avec une projection cc 3948 et ça marche très bien
Voici mon problème
J'essaye de consommer du TMS en 2154 mais j ai des problèmes de superpositions liés à la projection
Est ce que vous avez déjà rencontrer ce problème et qu'elles sont les solutions qui peuvent résoudre ce problème.
Code:
var options = {};
options.continuousWorld = true;
options.markerZoomAnimation = false;
options.inertia = false;
var map = L.map('map', options);
// register the custom projection with Proj4JS
Proj4js.defs['EPSG:2154'] = "+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs";
// create Transformation
var transformation = new L.Transformation(1, -1318451.0, -1, 7198441.0);
// set the CRS within Leaflet
map.options.crs = L.CRS.proj4js("EPSG:2154", undefined, transformation);
// resolutions
var res = [53.97500000000001,6.987500000000004,16.192500000000003,8.096250000000001,6.746875000000001,4.048125000000001,2.6987500000000004,2.0240625000000003,1.3493750000000002,0.9445625000000001,0.6746875000000001,0.5397500000000001,0.4048125000000001,0.26987500000000003,0.13493750000000002];
map.options.crs.scale = function (zoom) {
return 1 / res[zoom];
};
var layerOptions = {};
layerOptions.minZoom = 0;
//layerOptions.maxZoom = res.length - 1;
layerOptions.detectRetina = true;
// if not set to true, will only load positive tiles
layerOptions.continuousWorld = true;
var tileLayer = new L.TileLayer('http://www.geo.rennesmetropole.fr/tms/4566/PVI_2154/{z}/{x}/{y}.png', layerOptions);
// alter getTileUrl because Y axis is inverted (TMS profile is locale)
tileLayer.getTileUrl = function (tilePoint, zoom) {
console.log(tilePoint);
var toRet;
toRet = L.Util.template(this._url, L.Util.extend({
"z":this._getZoomForUrl(),
x:tilePoint.x,
//y: Math.pow(2,zoom) - tilePoint.y -1
y:-tilePoint.y - 1
}, this._urlParams));
return toRet;
}
map.addLayer(tileLayer);
map.setView([48.1, -1.67], 2);
var marker=new L.Marker(new L.LatLng(48.11, -1.67), {
title: 'Je suis a Renes'
});
map.addLayer(marker);Dernière modification par abdoudiouck (Mon 09 September 2013 17:17)
Hors ligne
#2 Thu 12 September 2013 10:16
- abdoudiouck
- Participant occasionnel
- Lieu: RENNES
- Date d'inscription: 19 Aug 2010
- Messages: 17
Re: Leaflet Reprojection TMS
Problème résolu : défaut de résolution et zoom trop éloigné
Pour je le laisse qu'en même pour les autres
Code:
<html>
<head>
<script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
<link rel="stylesheet" href="http://muurain.net/maps/lib/leaflet/leaflet.css" />
<script src="http://muurain.net/maps/lib/leaflet/leaflet-src.js"></script>
<script src="http://thematicmapping.org/playground/terrain/map/lib/proj4js-compressed.js"></script>
<script src="http://thematicmapping.org/playground/terrain/map/lib/proj4leaflet.js"></script>
</div>
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id='map'>
<script>
var options = {};
options.continuousWorld = true;
options.markerZoomAnimation = false;
options.inertia = false;
var map = L.map('map', options);
// register the custom projection with Proj4JS
Proj4js.defs['EPSG:2154'] = "+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs";
// create Transformation
var transformation = new L.Transformation(1, -319831.53125, -1, 6757812.0);
// set the CRS within Leaflet
map.options.crs = L.CRS.proj4js("EPSG:2154", undefined, transformation);
// resolutions
var res = [156543.033928,78271.516964,39135.758482,19567.879241,9783.939621,4891.96981,2445.984905,1222.992453,611.496226,305.748113,152.874057,76.437028,38.218514,19.109257,9.554629,4.777314,2.388657,1.194329];
map.options.crs.scale = function (zoom) {
return 1 / res[zoom];
};
var layerOptions = {};
layerOptions.minZoom = 0;
//layerOptions.maxZoom = res.length - 1;
layerOptions.detectRetina = true;
// if not set to true, will only load positive tiles
layerOptions.continuousWorld = true;
var tileLayer = new L.TileLayer('http://votre_tms_en_2154/{z}/{x}/{y}.png', layerOptions);
// alter getTileUrl because Y axis is inverted (TMS profile is locale)
tileLayer.getTileUrl = function (tilePoint, zoom) {
console.log(tilePoint);
var toRet;
toRet = L.Util.template(this._url, L.Util.extend({
"z":this._getZoomForUrl(),
x:tilePoint.x,
//y: Math.pow(2,zoom) - tilePoint.y -1
y:-tilePoint.y - 1
}, this._urlParams));
return toRet;
}
map.addLayer(tileLayer);
map.setView([48.1, -1.67], 12);
var marker=new L.Marker(new L.LatLng(48.11, -1.67), {
title: 'Je suis a Rennes'
});
map.addLayer(marker);
</script>
</body>
</html>Hors ligne
