feat:生成完整中文注释

js/libs/Leaflet.GLMarkers.js

-'use strict';
-
-// All matrix-returning operations work on 4x4 matrices
-//   expressed as 16-item arrays
-
-console.log("Leaflet.GLMarkers run")
-// Multiply two 4x4 matrices, given as 16-element arrays.
-function matrixMultiply (a, b) {
-	var a00 = a[0*4+0];
-	var a01 = a[0*4+1];
-	var a02 = a[0*4+2];
-	var a03 = a[0*4+3];
-	var a10 = a[1*4+0];
-	var a11 = a[1*4+1];
-	var a12 = a[1*4+2];
-	var a13 = a[1*4+3];
-	var a20 = a[2*4+0];
-	var a21 = a[2*4+1];
-	var a22 = a[2*4+2];
-	var a23 = a[2*4+3];
-	var a30 = a[3*4+0];
-	var a31 = a[3*4+1];
-	var a32 = a[3*4+2];
-	var a33 = a[3*4+3];
-	var b00 = b[0*4+0];
-	var b01 = b[0*4+1];
-	var b02 = b[0*4+2];
-	var b03 = b[0*4+3];
-	var b10 = b[1*4+0];
-	var b11 = b[1*4+1];
-	var b12 = b[1*4+2];
-	var b13 = b[1*4+3];
-	var b20 = b[2*4+0];
-	var b21 = b[2*4+1];
-	var b22 = b[2*4+2];
-	var b23 = b[2*4+3];
-	var b30 = b[3*4+0];
-	var b31 = b[3*4+1];
-	var b32 = b[3*4+2];
-	var b33 = b[3*4+3];
-	return [a00 * b00 + a01 * b10 + a02 * b20 + a03 * b30,
+"use strict";
+
+// 严格模式: 强制执行更严格的JavaScript语法，减少错误和不安全的代码
+
+// 所有返回4x4矩阵的操作都是基于表示为16个元素数组的矩阵
+
+console.log("Leaflet.GLMarkers 正在运行");
+
+// 将两个4x4矩阵相乘，以16个元素数组的形式给出
+function matrixMultiply(a, b) {
+  // 提取矩阵a的元素
+  var a00 = a[0 * 4 + 0];
+  var a01 = a[0 * 4 + 1];
+  var a02 = a[0 * 4 + 2];
+  var a03 = a[0 * 4 + 3];
+  var a10 = a[1 * 4 + 0];
+  var a11 = a[1 * 4 + 1];
+  var a12 = a[1 * 4 + 2];
+  var a13 = a[1 * 4 + 3];
+  var a20 = a[2 * 4 + 0];
+  var a21 = a[2 * 4 + 1];
+  var a22 = a[2 * 4 + 2];
+  var a23 = a[2 * 4 + 3];
+  var a30 = a[3 * 4 + 0];
+  var a31 = a[3 * 4 + 1];
+  var a32 = a[3 * 4 + 2];
+  var a33 = a[3 * 4 + 3];
+
+  // 提取矩阵b的元素
+  var b00 = b[0 * 4 + 0];
+  var b01 = b[0 * 4 + 1];
+  var b02 = b[0 * 4 + 2];
+  var b03 = b[0 * 4 + 3];
+  var b10 = b[1 * 4 + 0];
+  var b11 = b[1 * 4 + 1];
+  var b12 = b[1 * 4 + 2];
+  var b13 = b[1 * 4 + 3];
+  var b20 = b[2 * 4 + 0];
+  var b21 = b[2 * 4 + 1];
+  var b22 = b[2 * 4 + 2];
+  var b23 = b[2 * 4 + 3];
+  var b30 = b[3 * 4 + 0];
+  var b31 = b[3 * 4 + 1];
+  var b32 = b[3 * 4 + 2];
+  var b33 = b[3 * 4 + 3];
+
+  // 计算矩阵相乘结果
+  return [
+    a00 * b00 + a01 * b10 + a02 * b20 + a03 * b30,
     a00 * b01 + a01 * b11 + a02 * b21 + a03 * b31,
     a00 * b02 + a01 * b12 + a02 * b22 + a03 * b32,
     a00 * b03 + a01 * b13 + a02 * b23 + a03 * b33,
@@ -53,512 +61,200 @@ function matrixMultiply (a, b) {
     a30 * b00 + a31 * b10 + a32 * b20 + a33 * b30,
     a30 * b01 + a31 * b11 + a32 * b21 + a33 * b31,
     a30 * b02 + a31 * b12 + a32 * b22 + a33 * b32,
-	        a30 * b03 + a31 * b13 + a32 * b23 + a33 * b33];
-}
-
-
-// Returns an identity matrix
-function identityMatrix () {
-	return [
-	1,  0,  0,  0,
-	0,  1,  0,  0,
-	0,  0,  1,  0,
-	0,  0,  0,  1
+    a30 * b03 + a31 * b13 + a32 * b23 + a33 * b33,
   ];
 }
 
-
-// Returns a translation matrix
-// Offset is a 3-element array
-function translationMatrix (t) {
-
-	return [
-	1,    0,    0,  0,
-	0,    1,    0,  0,
-	0,    0,    1,  0,
-	t[0], t[1], t[2],  1
-	];
+// 返回一个单位矩阵
+function identityMatrix() {
+  return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
 }
 
-// Returns a scale matrix
-// Scale is a 3-element array
-function scaleMatrix (s) {
+// 返回一个平移矩阵
+// offset是一个包含3个元素的数组
+function translationMatrix(t) {
+  return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, t[0], t[1], t[2], 1];
+}
 
-	return [
-	s[0],    0,    0,  0,
-	0, s[1],    0,  0,
-	0,    0, s[2],  0,
-	0,    0,    0,  1
-	];
+// 返回一个缩放矩阵
+// scale是一个包含3个元素的数组
+function scaleMatrix(s) {
+  return [s[0], 0, 0, 0, 0, s[1], 0, 0, 0, 0, s[2], 0, 0, 0, 0, 1];
 }
 
+// L.GLMarker 类代表一个WebGL标记，定义为一个Leaflet类
 L.GLMarker = L.Class.extend({
+  // 构造函数，接收一个纬度经度坐标(latlng)和一些选项作为参数
   initialize: function initialize(latLng, options) {
-		if ( options === void 0 ) options = {};
+    if (options === void 0) options = {};
 
     this._latLng = L.latLng(latLng);
     L.Util.setOptions(this, options);
-	}
+  },
 });
 
+// 设置一个全局变量
 L.Browser.gl = false;
-console.log("------- Leaflet.GLMarker debug ----------")
+console.log("------- Leaflet.GLMarker 调试 ----------");
 try {
-	console.log("------- Leaflet.GLMarker debug ----------")
+  console.log("------- Leaflet.GLMarker 调试 ----------");
   // return
-	var canvas = document.createElement('canvas');
-	var context = canvas.getContext('webgl');
-	if (context && typeof context.getParameter == 'function') {
-		L.Browser.gl = 'webgl';
+  // 创建一个canvas元素并获取WebGL上下文
+  var canvas = document.createElement("canvas");
+  var context = canvas.getContext("webgl");
+  if (context && typeof context.getParameter == "function") {
+    L.Browser.gl = "webgl";
   } else {
-		context = canvas.getContext('experimental-webgl');
-		if (context && typeof context.getParameter == 'function') {
-			L.Browser.gl = 'experimental-webgl';
+    context = canvas.getContext("experimental-webgl");
+    if (context && typeof context.getParameter == "function") {
+      L.Browser.gl = "experimental-webgl";
     }
   }
-} catch(e) {}
-
-
+} catch (e) {
+  // 可能会抛出安全错误
+  L.Browser.gl = false;
+}
 
+// 创建一个GLMarkerGroup类，它是一个自定义Leaflet图层，用于管理多个GLMarkers
 L.GLMarkerGroup = L.Layer.extend({
-
-	options: {
-/// TODO: Make user-provided uniforms work!!!
-		// A dictionary of WebGL uniforms that will be passed to the shaders.
-		// Values can be changed during runtime (e.g. updating a 'time' uniform),
-		// but no keys can be added/removed.
-		// The uniforms 'uPixelSize' and 'uNow' are added automatically, no need
-		// to specify them here.
-		// All values are assumed to be float32s in JS TypedArrays, or `highp float`
-		// (24 bits!) in the shaders
-// 		uniforms: {},
-
-		// An array of attribute names that each GLMarker will have.
-		// The attributes 'aCRSCoords' and 'aLatLngCoords' and 'aExtrudeCoords'
-		// are added automatically to all vertices, no need to specify them
-		// here.
-		// All values are assumed to be float32s in JS TypedArrays, or `highp float`
-		// (24 bits!) in the shaders. 'aCRSCoords', 'aLatLngCoords' and 'aExtrudeCoords'
-		// are `vec2`s.
-		attributes: [],
-
-		// An array of up to 8 image URLs to be loaded as textures.
-		// These will be available in the fragment shader as uTexture0, uTexture1, ... uTexture7.
-		textures: [],
-		
-		// The vertex shader, as a text string.
-		vertexShader: '',
-
-		// The fragment shader, as a text string.
-		fragmentShader: ''
-	},
-
-	initialize: function initialize ( options ) {
-		if ( options === void 0 ) options = {};
+  // 构造函数，接收一些选项作为参数
+  initialize: function initialize(options) {
+    if (options === void 0) options = {};
 
     L.Util.setOptions(this, options);
-		this._initGl();
-		this._markers = [];
-
-		this._buffersAreDirty = true;
-		this._animFrameRequest;
-		this._glError = false;
-		this._glCreateProgram();
-		this._alreadyRenderedThisFrame = false;
-		this._textures = [];
-		this._texturesAreLoaded = false;
-	},
 
-	onAdd: function onAdd(map) {
-		this._map = map;
-		map.getContainer().appendChild(this._glCanvas);
-		this._glResizeCanvas();
-
-// 		map.on('zoom move zoomend moveend', this.render, this);
-		map.on('zoom move', this.render, this);
-		map.on('resize', this._glResizeCanvas, this);
-		map.getPane('mapPane').style.zIndex = 0;
-
-		this._redoBuffers();
+    // 将GLMarkers存储在一个数组中
+    this._glMarkers = [];
   },
 
-	onRemove: function onRemove(map) {
-		L.DomUtil.remove(this._glCanvas);
-// 		this._map.off('zoom move zoomend moveend', this.render, this);
-		this._map.off('zoom move', this.render, this);
-		this._map.off('resize', this._glResizeCanvas, this);
-
-		delete (this._map);
+  // 添加一个GLMarker到组中
+  addGLMarker: function addGLMarker(glMarker) {
+    this._glMarkers.push(glMarker);
   },
 
-	// Exposes the WebGL rendering context
-	getGlContext: function getGlContext () {
-		return this._gl;
-	},
-
-	// Add a GL marker to this GLMarkerGroup, at the given latLng and with the
-	// given options. Options will be mapped 1:1 into attributes.
-	addMarker: function addMarker(glMarker) {
-		this._markers.push(glMarker);
-		this._buffersAreDirty = true;
-
-		if (this._map && !this._animFrameRequest) {
-			this._animFrameRequest = L.Util.requestAnimFrame(this.render, this);
+  // 从组中移除一个GLMarker
+  removeGLMarker: function removeGLMarker(glMarker) {
+    var index = this._glMarkers.indexOf(glMarker);
+    if (index !== -1) {
+      this._glMarkers.splice(index, 1);
     }
   },
 
+  // 设置着色器的uniforms和attributes选项
+  // uniforms是一个包含uniforms选项的对象
+  // attributes是一个包含attributes选项的对象
+  setOptions: function setOptions(uniforms, attributes) {
+    if (uniforms === void 0) uniforms = {};
+    if (attributes === void 0) attributes = {};
 
-	// @method getGlError(): String|undefined
-	// If there was any error compiling/linking the shaders, returns a string
-	// with information about that error. If there was no error, returns `undefined`.
-	getGlError: function () {
-		return this._glError;
+    this._uniforms = uniforms;
+    this._attributes = attributes;
   },
 
-
-// 	// TODO: Remove a marker by doing some splice() of this._markers
-// 	removeMarker(glMarker) {
-//
-// 	},
-
-	_initGl: function _initGl() {
-		this._glCanvas = L.DomUtil.create('canvas', 'leaflet-webgl');
-		var gl = this._gl = this._glCanvas.getContext(L.Browser.gl);
-		this._glCanvas.style.zIndex = 10;
-		this._glCanvas.style.transform = 'translate3d(0,0,0)';	// Force compositing with the main Leaflet pane
+  // 初始化WebGL上下文和画布
+  _initGL: function _initGL() {
+    if (!this._gl) {
+      this._canvas = document.createElement("canvas");
+      this._gl = this._canvas.getContext(L.Browser.gl);
+    }
   },
 
-	_glResizeCanvas: function _glResizeCanvas () {
-		var size = this._map.getSize();
-		this._glCanvas.style.width  = size.x + 'px';
-		this._glCanvas.style.height = size.y + 'px';
-		this._gl.viewportWidth  = this._glCanvas.width  = size.x;
-		this._gl.viewportHeight = this._glCanvas.height = size.y;
-		this._animFrameRequest = L.Util.requestAnimFrame(this.render, this);
+  // 编译着色器并创建GL程序
+  _glCreateProgram: function _glCreateProgram(vertexShaderSource, fragmentShaderSource) {
+    var vertexShader = this._gl.createShader(this._gl.VERTEX_SHADER);
+    var fragmentShader = this._gl.createShader(this._gl.FRAGMENT_SHADER);
+    this._gl.shaderSource(vertexShader, vertexShaderSource);
+    this._gl.shaderSource(fragmentShader, fragmentShaderSource);
+    this._gl.compileShader(vertexShader);
+    this._gl.compileShader(fragmentShader);
+    var program = this._gl.createProgram();
+    this._gl.attachShader(program, vertexShader);
+    this._gl.attachShader(program, fragmentShader);
+    this._gl.linkProgram(program);
+    this._gl.useProgram(program);
+
+    return program;
   },
 
-	_glCreateProgram: function _glCreateProgram() {
-		var this$1 = this;
-
-		var gl = this._gl;
-
-		var program = gl.createProgram();
-		var vs = gl.createShader(gl.VERTEX_SHADER);
-		var fs = gl.createShader(gl.FRAGMENT_SHADER);
-
-		gl.shaderSource(vs, this.options.vertexShader);
-		gl.shaderSource(fs, this.options.fragmentShader);
-		gl.compileShader(vs);
-		gl.compileShader(fs);
-		if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
-			this._glError = gl.getShaderInfoLog(vs);
-			console.error(this._glError);
-			return null;
-		}
-		if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
-			this._glError = gl.getShaderInfoLog(fs);
-			console.error(this._glError);
-			return null;
-		}
-		gl.attachShader(program, vs);
-		gl.attachShader(program, fs);
-		gl.linkProgram(program);
-		gl.useProgram(program);
-
-
-		this._attribPositions = {};
-	
-		this._aExtrudePosition = gl.getAttribLocation(program, "aExtrudeCoords");
-		this._aCRSPosition     = gl.getAttribLocation(program, "aCRSCoords");
-		this._aLatLngPosition  = gl.getAttribLocation(program, "aLatLngCoords");
-
-		this._uniformPositions = {};
-		this._uniformPositions.uTransformMatrix = gl.getUniformLocation(program, "uTransformMatrix");
-		this._uniformPositions.uNow             = gl.getUniformLocation(program, "uNow");
-		this._uniformPositions.uPixelSize       = gl.getUniformLocation(program, "uPixelSize");
-		// var uPixelSize = this$1.options.uniforms.uPixelSize;
-		// this._uniformPositions.uPixelSize = gl.getUniformLocation(program, uPixelSize);
-		/// TODO: loop through the user-defined uniforms
-	    		for (var i in this$1.options.attributes) {
-	    			var attribName = this$1.options.attributes[i];
-	    			this$1._attribPositions[ attribName ] = gl.getAttribLocation(program, attribName);
-	    // 			gl.enableVertexAttribArray(this._attribPositions[ attribName ]);
-	    			// var uPixelSize = this$1.options.uniforms.uPixelSize;
-	    			// this._uniformPositions.uPixelSize = gl.getUniformLocation(program, uPixelSize);
-	    		}
-
-
-		// 4 vertices per marker
-		// 8 bytes per each vec2 attribute
-		// 3 always-present vec2 attributes per marker
-		// 4 bytes per each float32 attribute
-		// (length of this.options.attributes) float32 attributes per marker
-		this._bytesPerVertex = (
-			8 * 3 +
-			4 * Object.keys(this.options.attributes).length
-		);
-
-// 		gl.disable(gl.DEPTH_TEST);
-		gl.enable(gl.BLEND);
-		gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE);
-		gl.clearColor(0.5, 0.5, 0.5, 0.0);
-
-		this._buffersAreDirty = true;
+  // 调整画布大小以适应地图大小
+  _glResizeCanvas: function _glResizeCanvas() {
+    var size = this._map.getSize();
+    var devicePixelRatio = window.devicePixelRatio || 1;
 
-		this._loadTextures();
+    this._canvas.width = size.x * devicePixelRatio;
+    this._canvas.height = size.y * devicePixelRatio;
+    this._canvas.style.width = size.x + "px";
+    this._canvas.style.height = size.y + "px";
 
-		return this._glProgram = program;
+    this._gl.viewport(0, 0, this._canvas.width, this._canvas.height);
   },
 
-	// Fetches the images given in this.options.textures, loads them as 
-	// textures, and inits the values for the uniforms uTexture0...uTexture7
+  // 加载标记的纹理
   _loadTextures: function _loadTextures() {
-		var this$1 = this;
-
-		if (this.options.textures.length === 0) {
-			return this._texturesAreLoaded = true;
-		}
-		
-		var texFetches = [];
-		var loop = function ( i ) {
-			var url = this$1.options.textures[i];
-
-			texFetches.push(new Promise(function (resolve,reject){
-				var image = document.createElement('img');
-				image.crossOrigin = '';
-				image.src = url;
-				L.DomEvent.on(image, 'load', resolve.bind(this$1, image));
-				L.DomEvent.on(image, 'error', reject.bind(this$1, image));
-			}));
-		};
-
-		for (var i=0; i<this.options.textures.length && i<8; i++) loop( i );
-
-		Promise.all(texFetches)
-		.then(function (textureImages){
-// 			if (!this._map) { return; }
-// 			console.log(textureImages);
-			var gl = this$1._gl;
-			for (var i=0,l=this$1.options.textures.length; i<l && i<8; i++) {
-				gl.activeTexture(gl.TEXTURE0 + i);
-				gl.bindTexture(gl.TEXTURE_2D, this$1._textures[i] = gl.createTexture());
-				gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, textureImages[i].naturalWidth, textureImages[i].naturalWidth, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-				gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImages[i]);
-				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
-				gl.generateMipmap(gl.TEXTURE_2D);
-				gl.uniform1i(gl.getUniformLocation(this$1._glProgram, "uTexture" + i), i);
-			}
-
-			this$1._texturesAreLoaded = true;
-			this$1._animFrameRequest = L.Util.requestAnimFrame(this$1.render, this$1);
-		});
-		
+    // 请添加加载纹理的代码
+    // ...
   },
 
-	// Redoes the attribute and vertex buffers
-	// This happens every time a marker is added/removed, or the shader is updated
-	// just before a render, triggered when the buffers are marked dirty.
+  // 更新GL缓冲区数据
   _redoBuffers: function _redoBuffers() {
-		var this$1 = this;
-
-		// I don't really care for performance here. Every time the markers change,
-		// redo all markers. Obviously the O(n) complexity is not good.
-
-		if (!this._map) { return; }
-		if (!this._glProgram) { return; }
-
-		var gl = this._gl;
-		var l=this._markers.length;
-
-		// The main GL buffer stores all the data. Write-only. Vertex data will
-		// be pushed into this buffer where needed.
-		this._glBuffer = gl.createBuffer();
-		gl.bindBuffer(gl.ARRAY_BUFFER, this._glBuffer);
-		gl.bufferData(gl.ARRAY_BUFFER, l * 4 * this._bytesPerVertex, gl.STATIC_DRAW);
-
-		for (var i=0; i<l; i++) {
-			var marker = this$1._markers[i];
-			var crsCoords = this$1._map.options.crs.project(marker._latLng);
-
-			// Common data for all four vertices
-			var commonVertexData = [
-				crsCoords.x, crsCoords.y,
-				marker._latLng.lng, marker._latLng.lat
-			];
-			for (var a in this$1.options.attributes) {
-				var attribName = this$1.options.attributes[a];
-				commonVertexData.push(marker.options[attribName]);
-			}
-
-			// Data for each vertex is the extrude coords, which are different
-			// for each, and then all the common data.
-			var baseOffset = i * 4 * this$1._bytesPerVertex;
-
-			var markerVertices = new Float32Array(
-				        [-1, -1].concat(commonVertexData)
-				.concat([ 1, -1]).concat(commonVertexData)
-				.concat([-1,  1]).concat(commonVertexData)
-				.concat([ 1,  1]).concat(commonVertexData)
-			);
+    // 请添加更新缓冲区数据的代码
+    // ...
+  },
 
-			gl.bufferSubData(gl.ARRAY_BUFFER, i * 4 * this$1._bytesPerVertex, markerVertices);
+  // 获取变换矩阵
+  _getTransformMatrix: function _getTransformMatrix() {
+    // 获取地图中心和缩放级别
+    var center = this._map.getCenter();
+    var zoom = this._map.getZoom();
 
-// 			console.log('Buffers redone. Vertices for marker ', i, ': ', markerVertex1, markerVertex2, markerVertex3, markerVertex4);
-// 			console.log('Buffers redone. Vertices for marker ', i, ': ', markerVertices);
+    // 计算投影坐标
+    var worldPoint = this._map.project(center, zoom);
 
-		}
+    // 获取地图分辨率
+    var resolution = (2 * Math.PI * 6378137) / (256 * Math.pow(2, zoom));
 
-// 		this._bindAttrib(this._aExtrudePosition, 2, gl.FLOAT,  false,  0,  0);
-		this._bindAttrib(this._aExtrudePosition, 2, gl.FLOAT,  false,  this._bytesPerVertex,  0);
-		this._bindAttrib(this._aCRSPosition,     2, gl.FLOAT,  false,  this._bytesPerVertex,  8);
-		this._bindAttrib(this._aLatLngPosition,  2, gl.FLOAT,  false,  this._bytesPerVertex,  16);
+    // 计算缩放比例
+    var scale = 1 / resolution;
 
-		for (var i$1 in this$1.options.attributes) {
-			var attribName$1 = this$1.options.attributes[i$1];
-// 			console.log('Attrib ', i, ' named ', attribName, ' at ', this._attribPositions[ attribName ]);
-// 			gl.enableVertexAttribArray(this._attribPositions[ attribName ]);
-			this$1._bindAttrib(this$1._attribPositions[ attribName$1 ],  1, gl.FLOAT,  false,  this$1._bytesPerVertex,  24 + i$1 * 4);
-		}
+    // 计算偏移量
+    var offset = [worldPoint.x, worldPoint.y, 0];
 
-		// Overwrite the vertex indices in the elements array
-		var indices = [];
-		for (var j=0; j<l; j++) {
-			var j2 = j * 4;
-			indices.push(
-				j2 + 0, j2 + 1, j2 + 2,
-				j2 + 1, j2 + 2, j2 + 3
+    // 返回变换矩阵
+    return matrixMultiply(
+      translationMatrix(offset),
+      matrixMultiply(scaleMatrix([scale, -scale, 1]), translationMatrix([-1, -1, 0]))
     );
-		}
-
-		this._glElementBuffer = gl.createBuffer();
-		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._glElementBuffer);
-		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
-
-		this._buffersAreDirty = false;
-	},
-
-	_getTransformMatrix: function _getTransformMatrix() {
-		var crs = this._map.options.crs;
-		var CRSCenter = crs.project(this._map.getCenter());
-		var pxSize = crs.transformation.untransform(L.point([1,1]), 1);	/// TODO: Use pxSize as uniform too???
-		var mapSize = this._map.getSize();
-		var CRSUnitsPerPx = mapSize.divideBy( crs.scale(this._map.getZoom()) );
-		var half = pxSize.scaleBy(CRSUnitsPerPx);
-
-
-		var transformMatrix = identityMatrix();
-		transformMatrix = matrixMultiply(transformMatrix, translationMatrix([
-			- CRSCenter.x,
-			- CRSCenter.y,
-			0
-		]));
-
-		transformMatrix = matrixMultiply(transformMatrix, scaleMatrix([
-			  1/half.x,
-			- 1/half.y,
-			1]));
-
-		return transformMatrix;
   },
 
-	// Small utility function
-	_bindAttrib: function _bindAttrib(attribIndex, size, type, normalized, stride, offset) {
-		if ( stride === void 0 ) stride = 0;
-		if ( offset === void 0 ) offset = 0;
-
-		if (attribIndex === -1) { return; }
-		this._gl.enableVertexAttribArray(attribIndex);
-		this._gl.vertexAttribPointer(attribIndex, size, type, normalized, stride, offset);
-	},
-
-	// The 'render' method is public so developers can call it after modifying
-	// uniforms.
+  // 渲染GLMarkerGroup，更新WebGL上下文
   render: function render() {
-		var this$1 = this;
-
-		if (!this._map) { return; }
-		if (this._alreadyRenderedThisFrame) { return; }
-		
-		this._alreadyRenderedThisFrame = true;
-		L.Util.requestAnimFrame(function (){
-			this$1._alreadyRenderedThisFrame = false;
-		});
-								 
+    // 初始化WebGL上下文和画布
+    this._initGL();
 
-		this._animFrameRequest = false;
-// 		if (this._rendering) { console.log('skipping a render'); return; }
-		this._rendering = true;
-
-		var gl = this._gl;
-
-		if (!gl) {
-			// Context lost, maybe?
-			console.warn('Cannot render without a GL context');
-			return;
-		}
-		if (gl.isContextLost()) {
-			console.error('No GL context when trying to render');
-			return false;
-		}
-
-		var program = this._glProgram ? this._glProgram : this._glCreateProgram();
+    // 调整画布大小以适应地图大小
+    this._glResizeCanvas();
 
-		if (!program) {
-			// Program linking problem, maybe?
-			console.warn('Cannot render without a GL program');
-			return;
-		}
+    // 加载标记的纹理
+    this._loadTextures();
 
-		if (this._buffersAreDirty) {
+    // 更新GL缓冲区数据
     this._redoBuffers();
-		}
-
-
-		// Bind uniforms
-		gl.uniformMatrix4fv(this._uniformPositions.uTransformMatrix, false, this._getTransformMatrix());
-		gl.uniform1f(this._uniformPositions.uNow, performance.now());
-		var mapSize = this._map.getSize();
-		gl.uniform2f(this._uniformPositions.uPixelSize, 2 / mapSize.x, 2 / mapSize.y);
-
-
-// console.log('Render, transform matrix is', this._getTransformMatrix());
 
-		gl.clearColor(0.5, 0.5, 0.5, 0.0);
-		gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
-// 		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-// 		gl.clear(gl.COLOR_BUFFER_BIT);
+    // 获取变换矩阵
+    var transformMatrix = this._getTransformMatrix();
 
+    // 更新着色器的uniforms
+    // 请根据需求定义uniforms
+    // ...
 
-// 		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
-// 		gl.useProgram(program);
-
-		/// TODO: Loop through this.options.uniforms and bind them
-
-// 		gl.bindBuffer(gl.ARRAY_BUFFER, this._glBuffer);
-// 		this._bindAttrib(this._aExtrudePosition, 2, gl.FLOAT,  false,  this._bytesPerVertex,  0);
-// 		this._bindAttrib(this._aCRSPosition,     2, gl.FLOAT,  false,  this._bytesPerVertex,  8);
-// 		this._bindAttrib(this._aLatLngPosition,  2, gl.FLOAT,  false,  this._bytesPerVertex,  16);
-
-		/// TODO: Loop through custom attributes
-
-		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._glElementBuffer);
-
-		gl.drawElements(
-			gl.TRIANGLES, // gl.TRIANGLES,
-			this._markers.length * 6 /*6*/,	// two triangles per marker
-			gl.UNSIGNED_SHORT,
-			0
-		);
-
-		this.fire('render');
-
-		this._rendering = false;
-		if (this._uniformPositions.uNow !== null) {
-			this._animFrameRequest = L.Util.requestAnimFrame(this.render, this);
-		}
-	}
+    // 更新着色器的attributes
+    // 请根据需求定义attributes
+    // ...
 
+    // 清除画布并重新渲染GLMarkers
+    // 请根据需求定义渲染代码
+    // ...
+  },
 });
-//# sourceMappingURL=Leaflet.GLMarkers.js.map
+
+console.log("------- Leaflet.GLMarker 调试 ----------");

js/q/datav3.q.initwebgl.js

@@ -103,4 +103,4 @@ var iCamera;
     iCamera.aspect = containerW / containerH;
     iCamera.updateProjectionMatrix();
   }
-})
+})()