Newer
Older
KaiFengPC / public / static / libs / map / WMTSLayer.js
@zhangdeliang zhangdeliang on 23 May 19 KB 初始化项目
  1. window.WMTSLayer = (function(){
  2.  
  3. function clamp(value,min,max){
  4. return value < min ? min : value > max ? max: value
  5. }
  6.  
  7. var caches = {
  8. data:{},
  9. get:function(key){
  10. return this.data[key];
  11. },
  12. put:function(key,value){
  13. this.data[key] = value;
  14. },
  15. clear:function(){
  16. this.data = {};
  17. }
  18. };
  19.  
  20. var lib = LKMap;
  21.  
  22. var transparentPngUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=';
  23.  
  24. var transparentImage = (function(){
  25. var canvas = document.createElement("canvas");
  26. canvas.width = 256;
  27. canvas.height = 256;
  28. var context = canvas.getContext("2d");
  29. context.fillStyle = "rgba(0,0,0,0)";
  30. context.fillRect(0,0,256,256);
  31. return canvas;
  32. })();
  33.  
  34. var vetexShaderSource = `
  35. uniform mat4 u_Matrix;
  36. uniform vec4 u_Translate;
  37. attribute vec3 a_Position;
  38. attribute vec2 a_UV;
  39. varying vec2 v_UV;
  40. void main(){
  41. v_UV = a_UV;
  42. gl_Position = u_Matrix * vec4( (a_Position.xy + u_Translate.xy), 0.0 ,1.0 );
  43. }
  44. `;
  45.  
  46. var fragmentShaderSource = `
  47. #ifdef GL_ES
  48. precision mediump float;
  49. #endif
  50. varying vec2 v_UV;
  51. uniform sampler2D texture;
  52. void main(){
  53. vec4 textureColor = texture2D(texture,v_UV);
  54. gl_FragColor = textureColor;
  55. }
  56. `;
  57.  
  58. //坐标转换
  59. var pi = 3.1415926535897932384626;
  60. var a = 6378245.0;
  61. var ee = 0.00669342162296594323;
  62. var x_pi = pi * 3000.0 / 180.0;
  63.  
  64. function transformLat(x, y) {
  65. var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
  66. ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
  67. ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
  68. ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
  69. return ret;
  70. }
  71.  
  72. function transform(lng, lat) {
  73. var dLat = transformLat(lng - 105.0, lat - 35.0);
  74. var dLng = transformLng(lng - 105.0, lat - 35.0);
  75. var radLat = lat / 180.0 * pi;
  76. var magic = Math.sin(radLat);
  77. magic = 1 - ee * magic * magic;
  78. var sqrtMagic = Math.sqrt(magic);
  79. dLat = dLat * 180.0 / (a * (1 - ee) / (magic * sqrtMagic) * pi);
  80. dLng = dLng * 180.0 / (a / sqrtMagic * Math.cos(radLat) * pi);
  81. var mgLat = lat + dLat;
  82. var mgLng = lng + dLng;
  83. var newCoord = {
  84. lng: mgLng,
  85. lat: mgLat
  86. };
  87. return newCoord;
  88. }
  89.  
  90. function transformLng(x, y) {
  91. var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
  92. ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
  93. ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
  94. ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
  95. return ret;
  96. }
  97.  
  98. function gcj02_To_gps84(lng, lat) {
  99. if (Array.isArray(lng)) {
  100. var _lng = lng[0];
  101. lat = lng[1];
  102. lng = _lng;
  103. }
  104. if (lng instanceof Object) {
  105. var _lng = lng.lng;
  106. lat = lng.lat;
  107. lng = _lng;
  108. }
  109.  
  110. var coord = transform(lng, lat);
  111. var lontitude = lng * 2 - coord.lng;
  112. var latitude = lat * 2 - coord.lat;
  113. var newCoord = {
  114. lng: lontitude,
  115. lat: latitude
  116. };
  117. return [lontitude,latitude];
  118. }
  119.  
  120. function gps84_To_gcj02(lng, lat) {
  121. if (Array.isArray(lng)) {
  122. var _lng = lng[0];
  123. lat = lng[1];
  124. lng = _lng;
  125. }
  126. if (lng instanceof Object) {
  127. var _lng = lng.lng;
  128. lat = lng.lat;
  129. lng = _lng;
  130. }
  131.  
  132. var dLat = transformLat(lng - 105.0, lat - 35.0);
  133. var dLng = transformLng(lng - 105.0, lat - 35.0);
  134. var radLat = lat / 180.0 * pi;
  135. var magic = Math.sin(radLat);
  136. magic = 1 - ee * magic * magic;
  137. var sqrtMagic = Math.sqrt(magic);
  138. dLat = dLat * 180.0 / (a * (1 - ee) / (magic * sqrtMagic) * pi);
  139. dLng = dLng * 180.0 / (a / sqrtMagic * Math.cos(radLat) * pi);
  140. var mgLat = lat + dLat;
  141. var mgLng = lng + dLng;
  142. var newCoord = {
  143. lng: mgLng,
  144. lat: mgLat
  145. };
  146. return [mgLng,mgLat];
  147. }
  148.  
  149.  
  150. function TileXYZLayerFor4326(options){
  151.  
  152. this._options = Object.assign({
  153. minzoom:1,
  154. maxzoom:22,
  155. tileSize:256
  156. },options);
  157.  
  158. this._extent = this._options.extent || [-180,-90,180,90];
  159.  
  160. this._map = null;
  161. this._transform = null;
  162. this._program = null;
  163. this._gl = null;
  164.  
  165. //当前可视区域的切片
  166. this._tiles = {};
  167.  
  168. }
  169.  
  170. TileXYZLayerFor4326.prototype = {
  171.  
  172. constructor:TileXYZLayerFor4326,
  173.  
  174. addTo:function(map){
  175.  
  176. this._map = map;
  177. this._transform = map.transform;
  178. this._layerId = "vectorTileLayer_"+Date.now();
  179.  
  180. map.addLayer({
  181. id:this._layerId,
  182. type: 'custom',
  183. onAdd: (function(_this){
  184. return function(map,gl){
  185. return _this._onAdd(map,gl,this);
  186. }
  187. })(this),
  188. render: (function(_this){
  189. return function(gl, matrix){
  190. return _this._render(gl, matrix, this);
  191. }
  192. })(this)
  193. });
  194.  
  195. map.on("remove",function(){
  196. caches.clear();
  197. });
  198. },
  199.  
  200. _onAdd: function(map,gl){
  201. var _this = this;
  202.  
  203. this._gl = gl;
  204.  
  205. this.transparentTexture = gl.createTexture();
  206. gl.bindTexture(gl.TEXTURE_2D, this.transparentTexture);
  207. gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
  208. gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, transparentImage);
  209. gl.bindTexture(gl.TEXTURE_2D,null);
  210.  
  211. var vetexShader = gl.createShader(gl.VERTEX_SHADER)
  212. gl.shaderSource(vetexShader,vetexShaderSource);
  213. gl.compileShader(vetexShader);
  214.  
  215. if (!gl.getShaderParameter(vetexShader,gl.COMPILE_STATUS)) {
  216. throw "Shader Compile Error: " + (gl.getShaderInfoLog(vetexShader));
  217. }
  218.  
  219. var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  220. gl.shaderSource(fragmentShader,fragmentShaderSource);
  221. gl.compileShader(fragmentShader);
  222.  
  223. if (!gl.getShaderParameter(fragmentShader,gl.COMPILE_STATUS)) {
  224. throw "Shader Compile Error: " + (gl.getShaderInfoLog(fragmentShader));
  225. }
  226.  
  227. var program = this._program = gl.createProgram();
  228. gl.attachShader(program, vetexShader);
  229. gl.attachShader(program, fragmentShader);
  230. gl.linkProgram(program);
  231. /**
  232. * 属性
  233. */
  234. var attributes = this._attributes = {
  235. aPosition:{
  236. name:"a_Position",
  237. location:gl.getAttribLocation(this._program,"a_Position"),
  238. },
  239. aUV:{
  240. name:"a_UV",
  241. location:gl.getAttribLocation(this._program,"a_UV"),
  242. }
  243. };
  244.  
  245. /**
  246. * 缓冲区
  247. */
  248. this._buffers = {
  249. aPositionBuffer:{
  250. buffer:gl.createBuffer(),
  251. size:3,
  252. attribute: attributes["aPosition"],
  253. points: new Float32Array(3 * 6),
  254. update:function(extent){
  255. },
  256. update1:function(extent){
  257. gl.bindBuffer(gl.ARRAY_BUFFER,this.buffer);
  258. var centerMecatorExtent = extent;
  259. var minx = centerMecatorExtent[0],
  260. miny = centerMecatorExtent[1],
  261. maxx = centerMecatorExtent[2],
  262. maxy = centerMecatorExtent[3];
  263. var points = this.points;
  264. points[0] = minx ,points[1] = maxy, points[2] = 0.0 ,
  265. points[3] = maxx ,points[4] = maxy, points[5] = 0.0,
  266. points[6] = minx ,points[7] = miny, points[8] = 0.0 ,
  267. points[9] = maxx ,points[10] = maxy, points[11] = 0.0 ,
  268. points[12] = minx,points[13] = miny, points[14] = 0.0,
  269. points[15] = maxx,points[16] = miny, points[17] = 0.0 ;
  270. gl.bufferData(gl.ARRAY_BUFFER,points, gl.STATIC_DRAW);
  271. gl.enableVertexAttribArray(this.attribute.location);
  272. gl.vertexAttribPointer(this.attribute.location,this.size,gl.FLOAT,false,0,0);
  273. }
  274. },
  275. aUVBuffer:{
  276. buffer:gl.createBuffer(),
  277. size:2,
  278. attribute:attributes["aUV"],
  279. points:new Float32Array( [0,0,1,0,0,1,1,0,0,1,1,1] ),
  280. hasBufferData:false,
  281. update:function(){
  282. gl.bindBuffer(gl.ARRAY_BUFFER,this.buffer);
  283. if(!this.hasBufferData){
  284. gl.bufferData(gl.ARRAY_BUFFER, this.points, gl.STATIC_DRAW);
  285. this.hasBufferData = true;
  286. }
  287. gl.enableVertexAttribArray(this.attribute.location);
  288. gl.vertexAttribPointer(this.attribute.location,this.size,gl.FLOAT,false,0,0);
  289. }
  290. }
  291. }
  292. /**
  293. * 变量
  294. */
  295. this._uniforms = {
  296. uMatrix:{
  297. value:null,
  298. location:gl.getUniformLocation(this._program,"u_Matrix"),
  299. update:function(matrix){
  300. if(this.value !== matrix){
  301. gl.uniformMatrix4fv(this.location,false,matrix);
  302. }
  303. }
  304. },
  305. uTranslate:{
  306. value:[0,0],
  307. location:gl.getUniformLocation(this._program,"u_Translate"),
  308. update:function(){}
  309. },
  310. uTexture:{
  311. value:null,
  312. location:gl.getUniformLocation(this._program, 'texture'),
  313. update:function(){}
  314. }
  315. };
  316. },
  317. /**
  318. * 渲染
  319. * @param {*} gl
  320. * @param {*} matrix
  321. */
  322. _render:function(gl, matrix){
  323. if(this._program){
  324. var transform = this._transform;
  325. var options = this._options;
  326. var tileSize = options.tileSize ||256;
  327.  
  328. var z = transform.coveringZoomLevel({
  329. tileSize:tileSize,
  330. roundZoom:true
  331. });
  332.  
  333. this.realz = z;
  334.  
  335. z = z < 5 ? 5 : z;
  336.  
  337. this.z = z;
  338.  
  339. if (options.minzoom !== undefined && z < options.minzoom) { z = 0; }
  340.  
  341. if (options.maxzoom !== undefined && z > options.maxzoom) { z = options.maxzoom; }
  342.  
  343. var resolution = this.resolution = this.getResolutionFromZ(z);
  344.  
  345. var center = transform.center;
  346. /*
  347. var lngLat = gps84_To_gcj02(center.lng,center.lat);
  348.  
  349. center.lng = lngLat[0];
  350. center.lat = lngLat[1];*/
  351.  
  352. //var centerCoord = lib.MercatorCoordinate.fromLngLat(transform.center);
  353. var maxx = clamp (center.lng + resolution * tileSize, -180, 180);
  354. var miny = clamp (center.lat - resolution * tileSize, -90, 90);
  355. var minx = clamp (center.lng, -180, 180) ,maxy = clamp(center.lat, -90,90) ;
  356. var leftBottom = lib.MercatorCoordinate.fromLngLat([minx,miny]);
  357. var topRight = lib.MercatorCoordinate.fromLngLat([maxx,maxy]);
  358.  
  359. this.centerMecatorExtent = [leftBottom.x,leftBottom.y,topRight.x,topRight.y];
  360.  
  361. gl.useProgram(this._program);
  362.  
  363. gl.enable(gl.BLEND);
  364.  
  365. gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
  366.  
  367.  
  368. for(let key in this._uniforms){
  369. this._uniforms[key].update(matrix);
  370. }
  371.  
  372. for(let key in this._buffers){
  373. this._buffers[key].update();
  374. }
  375.  
  376. this.calcTilesInView();
  377.  
  378. this.renderTiles();
  379.  
  380. }
  381. },
  382. renderTiles(){
  383. var gl = this._gl;
  384. var tiles = this._tiles;
  385. var tile;
  386.  
  387. for(var key in tiles){
  388.  
  389. tile = tiles[key];
  390.  
  391. tile.calcExtent();
  392.  
  393. this._buffers.aPositionBuffer.update1(tile.extent);
  394.  
  395. gl.uniform4fv(this._uniforms.uTranslate.location,tile.translate);
  396. gl.activeTexture(gl.TEXTURE0);
  397. if(tile.texture){
  398. gl.bindTexture(gl.TEXTURE_2D, tile.texture);
  399. }else{
  400. gl.bindTexture(gl.TEXTURE_2D, this.transparentTexture);
  401. }
  402. gl.uniform1i(this._uniforms.uTexture.location, 0);
  403. gl.drawArrays(gl.TRIANGLES, 0, 6);
  404. }
  405.  
  406. },
  407. /**
  408. * 计算当前可视范围内的切片
  409. */
  410. calcTilesInView:function(){
  411. var z = this.z;
  412. var options = this._options;
  413. var tileSize = options.tileSize ||256;
  414.  
  415. var resolution = this.resolution;
  416.  
  417. var extent = this._extent;
  418. var tileRes = resolution * tileSize;
  419. var viewExtent = this.getViewExtent();
  420.  
  421.  
  422. var startX = Math.floor((viewExtent[0] - extent[0]) / tileRes);
  423. var startY = Math.floor((extent[3] - viewExtent[3]) / tileRes);
  424. var endX = Math.ceil((viewExtent[2] - extent[0]) / tileRes);
  425. var endY = Math.ceil((extent[3] - viewExtent[1]) / tileRes);
  426.  
  427. // startX = startX < 20 ? 20 : startX;
  428. startY = startY < 1 ? 1 : startY;
  429. // endX = endX < 31 ? 31 : endX;
  430. //endY = endY < 20 ? 20 : endY;
  431. /* if(this.realz < 5){
  432. endY = endY > 10 ? 10 : endY
  433. }*/
  434.  
  435. var i,j,key,tile;
  436.  
  437. var tiles = this._tiles;
  438.  
  439. var newTiles = {}
  440.  
  441. for(i = startX ; i < endX; i ++){
  442. for(j = startY; j < endY ; j ++){
  443. key = this._key(z,i,j);
  444. if(!tiles[key]){
  445. caches.get(key);
  446. if(caches.get(key)){
  447. newTiles[key] = caches.get(key);
  448. }else{
  449. tile = new Tile(z,i,j,resolution,this);
  450. newTiles[key] = tile;
  451. }
  452. }else{
  453. newTiles[key] = tiles[key];
  454. delete tiles[key];
  455. }
  456. }
  457. };
  458.  
  459. for(var key in tiles){
  460. if(tiles[key].request){
  461. tiles[key].request.cancel();
  462. }
  463. }
  464.  
  465. this._tiles = newTiles;
  466.  
  467. },
  468. _key:function(z,x,y){
  469. return z+'/'+x+"/"+y;
  470. },
  471. /**
  472. * 计算分辨率
  473. */
  474. getResolutionFromZ:function(z){
  475. return [
  476. 1.25764139776733, 0.628820698883665, 0.251528279553466,
  477. 0.125764139776733, 0.0628820698883665, 0.0251528279553466,
  478. 0.0125764139776733, 0.00628820698883665, 0.00251528279553466,
  479. 0.00125764139776733, 0.000628820698883665, 0.000251528279553466,
  480. 0.000125764139776733, 0.0000628820698883665, 0.0000251528279553466,
  481. 0.0000125764139776733, 0.00000628820698883665, 0.00000251528279553466,
  482. 0.00000125764139776733, 0.000000628820698883665,
  483. 0.000000251528279553466,
  484. /* 0.7031250000000002, 0.3515625000000001, 0.17578125000000006,
  485. 0.043945312500000014, 0.021972656250000007, 0.010986328125000003,
  486. 0.005493164062500002, 0.002746582031250001, 0.0013732910156250004,
  487. 6.866455078125002E-4, 3.433227539062501E-4, 1.7166137695312505E-4,
  488. 8.583068847656253E-5, 4.2915344238281264E-5, 2.1457672119140632E-5,
  489. 1.0728836059570316E-5, 5.364418029785158E-6, 2.682209014892579E-6,
  490. 1.3411045074462895E-6*/
  491. ][z];
  492. // return 1.4062500000000002 / Math.pow(2,z);
  493. },
  494. /**
  495. * 计算extent
  496. */
  497. getViewExtent:function(){
  498. var transform = this._transform;
  499. var bounds = [
  500. transform.pointLocation(new lib.Point(0, 0)),
  501. transform.pointLocation(new lib.Point(transform.width, 0)),
  502. transform.pointLocation(new lib.Point(transform.width, transform.height)),
  503. transform.pointLocation(new lib.Point(0, transform.height))
  504. ];
  505.  
  506. var minx , miny , maxx, maxy;
  507.  
  508. for(var i = 0,point = null ; i < bounds.length ; i ++ ){
  509. point = bounds[i];
  510. if(i == 0 ){
  511. minx = point.lng;
  512. miny = point.lat;
  513. maxx = point.lng;i
  514. maxy = point.lat;
  515. }else {
  516. if(minx > point.lng) minx = point.lng;
  517. if(miny > point.lat) miny = point.lat;
  518. if(maxx < point.lng) maxx = point.lng;
  519. if(maxy < point.lat) maxy = point.lat;
  520. }
  521. }
  522.  
  523. // [minx,miny,maxx,maxy] = [gcj02_To_gps84(minx,miny),gcj02_To_gps84(maxx,maxy)].flat();
  524.  
  525. return [
  526. clamp(minx,-180,180),
  527. clamp(miny,-90,90),
  528. clamp(maxx,-180,180),
  529. clamp(maxy,-90,90)
  530. ]
  531. },
  532. /**
  533. * 重绘
  534. */
  535. repaint:function(){
  536. this._map.triggerRepaint();
  537. }
  538.  
  539. }
  540.  
  541. /**
  542. * 请求
  543. * @param {*} url
  544. * @param {*} callback
  545. * @param {*} async
  546. */
  547. var getImage = (function(){
  548.  
  549. var MAX_REQUEST_NUM = 16000;
  550.  
  551. var requestNum = 0;
  552. var requestQuenes = [];
  553.  
  554. function getImage(url,callback){
  555. if(requestNum > MAX_REQUEST_NUM){
  556. var quene = {
  557. url:url,
  558. callback:callback,
  559. canceled:false,
  560. cancel:function(){
  561. this.canceled = true;
  562. }
  563. }
  564. requestQuenes.push(quene);
  565. return quene;
  566. }
  567.  
  568. var advanced = false;
  569. var advanceImageRequestQueue = function () {
  570. if (advanced) { return; }
  571. advanced = true;
  572. requestNum--;
  573. while (requestQuenes.length && requestNum < MAX_REQUEST_NUM) { // eslint-disable-line
  574. var request = requestQuenes.shift();
  575. var url = request.url;
  576. var callback = request.callback;
  577. var canceled = request.canceled;
  578. if (!canceled) {
  579. request.cancel = getImage(url, callback).cancel;
  580. }
  581. }
  582. };
  583.  
  584. requestNum ++ ;
  585. var req = get(url,function(error,data){
  586. advanceImageRequestQueue();
  587. if(!error){
  588. var URL = window.URL || window.webkitURL;
  589. var blob = new Blob([data],{type:"image/png"});
  590. var blobUrl = URL.createObjectURL(blob)
  591. var image = new Image();
  592. image.src = blobUrl;
  593. image.onload = function(){
  594. callback(image);
  595. URL.revokeObjectURL(image.src);
  596. };
  597. image.src = data.byteLength ? URL.createObjectURL(blob) : transparentPngUrl;
  598. }
  599.  
  600. });
  601.  
  602. return {
  603. cancel:function(){
  604. req.abort();
  605. }
  606. }
  607. }
  608.  
  609. function get(url, callback, async) {
  610. var xhr = new XMLHttpRequest();
  611. xhr.open('GET', url, async === false ? false : true);
  612. xhr.responseType = "arraybuffer";
  613. xhr.onabort = function (event) {
  614. callback(true, null);
  615. };
  616. xhr.onload = function (event) {
  617. if (!xhr.status || xhr.status >= 200 && xhr.status < 300) {
  618. var source;
  619. source = xhr.response;
  620. if (source) {
  621. try {
  622. source = eval("(" + source + ")");
  623. } catch (e) {
  624. }
  625. }
  626. if (source) {
  627. callback(false, source);
  628. } else {
  629. callback(false, null);
  630. }
  631. }
  632. };
  633. xhr.onerror = function (e) {
  634. callback(true, null);
  635. };
  636. xhr.send(null);
  637. return xhr;
  638. }
  639.  
  640. return getImage;
  641. })()
  642.  
  643.  
  644.  
  645. function Tile(z,x,y,resolution,layer){
  646. this._resolution = resolution;
  647. this._layer = layer;
  648. this._coord = [z,x,y];
  649. this._gl = layer._gl;
  650. this._url = layer._options.url;
  651. this.texture = null;
  652. this.loaded = false;
  653. this.tileSize = layer._options.tileSize;
  654. this.worldExtent = layer._extent;
  655. this.extent = [0,0,0,0];
  656. this.translate = [0,0,0,0];
  657. this._load();
  658. }
  659.  
  660. Tile.prototype = {
  661. constructor:Tile,
  662.  
  663. calcExtent:function(){
  664.  
  665. var gl = this._gl;
  666. var worldExtent = this.worldExtent;
  667. var tileSize = this.tileSize;
  668. var resolution = this._resolution;
  669. var coord = this._coord;
  670. var x = coord[1],y = coord[2];
  671.  
  672. var maxTileNum = Math.ceil((worldExtent[3] - worldExtent[1]) / resolution / tileSize);
  673.  
  674. var minx = clamp(x * tileSize * resolution - worldExtent[2],-180,180);
  675. var maxx = clamp(minx + tileSize * resolution, -180,180);
  676. var maxy = clamp(worldExtent[3] - y * tileSize * resolution, -90 , 90 );
  677. var miny = clamp(maxy - tileSize * resolution, -90,90);
  678.  
  679. var y1 = y + 1;
  680. y1 = y1 > maxTileNum ? maxTileNum : y1;
  681. maxy1 = worldExtent[3] - y1 * tileSize * resolution;
  682.  
  683. var bl = lib.MercatorCoordinate.fromLngLat(gps84_To_gcj02(minx,miny));
  684. var tr = lib.MercatorCoordinate.fromLngLat(gps84_To_gcj02(maxx,maxy));
  685.  
  686. this.extent[0] = bl.x;
  687. this.extent[1] = bl.y;
  688. this.extent[2] = tr.x;
  689. this.extent[3] = tr.y;
  690.  
  691. //var centerMecatorExtent = this._layer.centerMecatorExtent;
  692.  
  693. // if(!this.translate){
  694. // this.translate = [0,0,0,0];
  695. // }
  696.  
  697. // this.translate[0] = bl.x - centerMecatorExtent[0];
  698. // this.translate[1] = bl.y - centerMecatorExtent[1];
  699. // this.translate[2] = tr.x - centerMecatorExtent[2];
  700. // this.translate[3] = tr.y - centerMecatorExtent[3];
  701.  
  702. },
  703. _load: function(){
  704. var gl = this._gl
  705. var _this = this;
  706. var z = this._coord[0];
  707. var x = this._coord[1];
  708. var y = this._coord[2];
  709. var url = this._url.replace("{x}",x).replace("{y}",y).replace("{z}",z);
  710. this.request = getImage(url,function(img){
  711. delete _this .request;
  712. if(_this._gl){
  713. var texture = _this.texture = gl.createTexture();
  714. gl.bindTexture(gl.TEXTURE_2D, texture);
  715. gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
  716. gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
  717. gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
  718. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  719. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  720. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  721. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  722. gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
  723. gl.bindTexture(gl.TEXTURE_2D, null);
  724. caches.put(z+"/"+x+"/"+y,_this);
  725. _this.loaded = true;
  726. _this._layer.repaint();
  727. }
  728. });
  729. }
  730. }
  731.  
  732.  
  733. return TileXYZLayerFor4326
  734.  
  735. })()