matlab怎么栅格化地图,用栅格化的思维进行地图散点数据绘制
原理上，这个课题利用point做粒子效果就可以解决，本不需要通过shader去处理。不过作为用gl的思维进行地图栅格数据绘制课题的后续，还是提出以下。本方案的核心思路还是数据栅格化，降纬处理数据减少碰撞测试次数提升性能。
Demo：http://lrdcq.com/test/mapwebgltiles/scatter/
思路
对于地图上的散点数据，我们还是将他们落到格子里：
1. 将地图区域划为MxN个格子，每个格子里会有0-x个点的经纬度数据，如果划分得相对合理，我们的x将极小(demo里总数据量约7w+，x为6)。
2. 假设我的栅格的大小为(x,y)，如果我的每个点的绘制区域的大小也正好是(m,n)=(x,y)，如下图
那我每一个栅格里点的绘制区域都有可能覆盖到3x3共计9个栅格的像素。同理，对于任意(m,n)的绘制区域，我们需要检查(ceil(m/x) * 2 + 1, ceil(n/y) * 2 + 1)的区域的像素。那对应的，对于我们的shader处理每一个像素时，我们需要检测周围这么大的区域的栅格里是否有数据。
3. 对每个像素处理，对拿到的可能覆盖范围内的所有数据点做矩形(即绘制区域)碰撞测试，如果到当前像素在某个数据点的绘制范围内，则取对应图片进行绘制。
相对于纯栅格绘制，这个散点的栅格绘制方案的成本包括多检索(ceil(m/x) * 2 + 1, ceil(n/y) * 2 + 1)的区域，并且每个区域需要做做多0-x次碰撞测试。以demo的数据来说，性能消耗最多是3x3x6攻击54倍——当然对于shader来说，这个也不算什么的样子。
Code
这里有一个思路转换。原本方案的数据图像(即一个像素表示一个栅格的图片)，每个像素里根本没存储啥东西，所以像素数据非常无所谓。但是现在这个方案，我们需要在数据图像中储存这个像素，就是这个栅格里包含了多少个点，还有每一个点的经纬度。
1. 储存经纬度，一个像素0xFFFFFFFF储存经纬度可以储存到小数点后7位了。而如果用rgb，不用a的六位0xFFFFFF来储存经纬度，可以储存到小数点后5位。5位的进度已经是米级的了，所以五位就够了。所以我们可以用两个像素0xAABBCCFF,0xAABBCCFF来足够准确的表述以个数据点的经纬度还可以储存256*256的其他信息。完全够了。
2. 因为我们的数据图像的像素要表示栅格，因此我们开了第二个图片，数据图像2，来储存所有的经纬度点数据。只需要两个两个一组把所有数据按即有顺序罗列在图片里面就行了。
生成数据图像2的数据写入片段是：
var writeToInfo = function(zx, zy, imageData, point,count) {
var offset = 512 * zy + zx * 2;
let x = Math.floor(point.x * 100000);
let y = Math.floor(point.y * 100000);
imageData.data[4 * offset] = Math.floor(x / (256 * 256)) % 256;
imageData.data[4 * offset + 1] = Math.floor(x / (256)) % 256;
imageData.data[4 * offset + 2] = Math.floor(x) % 256;
imageData.data[4 * offset + 3] = 255;
imageData.data[4 * offset + 4] = Math.floor(y / (256 * 256)) % 256;
imageData.data[4 * offset + 5] = Math.floor(y / (256)) % 256;
imageData.data[4 * offset + 6] = Math.floor(y) % 256;
imageData.data[4 * offset + 7] = 255;
}
3. 那我们原本的数据图像储存什么呢。就用来储存像素的数量，可以具体的数据在数据图像2的offset好了，我们用0xFFFFFF的rgb来储存offset，这可是16777216的数据量，就是说原理上能指向共计1677w以上数量的点，肯定够用的。a的0xFF来储存这个格子的数据数量，也就是说最多可以储存256个数据。
生产数据图像的写入片段：
var writeToData = function(answer, imageData, zx, zy, num) {
answer.y = 1200 - answer.y;
var offset = answer.x + answer.y * 800;
imageData.data[4 * offset] = zx;
imageData.data[4 * offset + 1] = Math.floor(zy / 256) % 256;
imageData.data[4 * offset + 2] = zy % 256;
imageData.data[4 * offset + 3] = num ? 255 - num : 0;
}
那么，我们在shader里按照之前的流程，先解析出当前的经纬度，和当前在哪个栅格中，这里，我们需要解析3x3共计9个栅格了。
同时，对每个栅格的所有数据进行for循环处理：
//读取数据图像
vec4 data[9];
vec2 uv = vec2(answer.x / L_mapWidth, 1.0 - answer.y / L_mapHeight);
vec2 px = vec2(1.0, 1.0) / vec2(L_mapWidth, L_mapHeight);
//3x3的数据范围
data[0] = texture2D(dataImage, uv + vec2(-px.x, px.y));
data[1] = texture2D(dataImage, uv + vec2(0.0, px.y));
data[2] = texture2D(dataImage, uv + vec2(px.x, px.y));
data[3] = texture2D(dataImage, uv + vec2(-px.x, 0.0));
data[4] = texture2D(dataImage, uv);
data[5] = texture2D(dataImage, uv + vec2(px.x, 0.0));
data[6] = texture2D(dataImage, uv + vec2(-px.x, -px.y));
data[7] = texture2D(dataImage, uv + vec2(0.0, -px.y));
data[8] = texture2D(dataImage, uv + vec2(px.x, -px.y));
for (int i = 0 ; i < 9 ; i++) {
vec4 d = data[i];
//count从a中读取
float count = d.a > 0.0 ? floor(256.0 - floor(d.a * 256.0)) : 0.0;
//数据图像2offset从rgb中读取
vec2 pixel = vec2(floor(d.r * 256.0), floor(d.g * 256.0 * 256.0 + d.b * 256.0));
//如果存在数据
if (count > 0.0) {
//按count循环处理
//由于glsl语言循环不能有动态变量因此这里的写法直接将循环展开，并且预设最多count为8个
if (count <= 1.0) {
renderPos(pixel, now);
} else if (count <= 2.0) {
renderPos(pixel, now);
renderPos(pixel + vec2(1.0, 0.0), now);
} else if (count <= 3.0) {
renderPos(pixel, now);
renderPos(pixel + vec2(1.0, 0.0), now);
renderPos(pixel + vec2(2.0, 0.0), now);
} else if (count <= 4.0) {
renderPos(pixel, now);
renderPos(pixel + vec2(1.0, 0.0), now);
renderPos(pixel + vec2(2.0, 0.0), now);
renderPos(pixel + vec2(3.0, 0.0), now);
} else if (count <= 5.0) {
renderPos(pixel, now);
renderPos(pixel + vec2(1.0, 0.0), now);
renderPos(pixel + vec2(2.0, 0.0), now);
renderPos(pixel + vec2(3.0, 0.0), now);
renderPos(pixel + vec2(4.0, 0.0), now);
} else if (count <= 6.0) {
renderPos(pixel, now);
renderPos(pixel + vec2(1.0, 0.0), now);
renderPos(pixel + vec2(2.0, 0.0), now);
renderPos(pixel + vec2(3.0, 0.0), now);
renderPos(pixel + vec2(4.0, 0.0), now);
renderPos(pixel + vec2(5.0, 0.0), now);
} else if (count <= 7.0) {
renderPos(pixel, now);
renderPos(pixel + vec2(1.0, 0.0), now);
renderPos(pixel + vec2(2.0, 0.0), now);
renderPos(pixel + vec2(3.0, 0.0), now);
renderPos(pixel + vec2(4.0, 0.0), now);
renderPos(pixel + vec2(5.0, 0.0), now);
renderPos(pixel + vec2(6.0, 0.0), now);
} else {
renderPos(pixel, now);
renderPos(pixel + vec2(1.0, 0.0), now);
renderPos(pixel + vec2(2.0, 0.0), now);
renderPos(pixel + vec2(3.0, 0.0), now);
renderPos(pixel + vec2(4.0, 0.0), now);
renderPos(pixel + vec2(5.0, 0.0), now);
renderPos(pixel + vec2(6.0, 0.0), now);
renderPos(pixel + vec2(7.0, 0.0), now);
}
}
}
对于每个数据点，和当前渲染像素的对比，由于是矩形格子，直接解析数据并且比较就可以了：
//判断一个点的数据是否在mark经纬度上并且执行渲染
void renderPos(vec2 pixel, vec2 now) {
//xy连续两个数据像素
vec4 data_x = texture2D(data2Image, vec2((pixel.x * 2.0) / L_dataSize, pixel.y / L_dataSize));
vec4 data_y = texture2D(data2Image, vec2((pixel.x * 2.0 + 1.0) / L_dataSize, pixel.y / L_dataSize));
//像素转换为经纬度
vec2 data = vec2(256.0 * 256.0 * floor(256.0 * data_x.r) + 256.0 * floor(256.0 * data_x.g) + floor(data_x.b * 256.0), 256.0 * 256.0 * floor(256.0 * data_y.r) + 256.0 * floor(256.0 * data_y.g) + floor(data_y.b * 256.0));
vec2 d = vec2(data.x / 100000.0, data.y / 100000.0);
//当前像素是否在贴近的数据像素范围内
vec2 dis = now - d;
if (abs(dis.x) < L_tileWidth / 2.0 && abs(dis.y) < L_tileHeigth / 2.0) {
//如果在的话，转换数据icon的uv并且渲染icon
vec2 uv = vec2((dis.x + L_tileWidth / 2.0) / (L_tileWidth / 1.0), 1.0 - (dis.y + L_tileHeigth / 2.0) / (L_tileHeigth / 1.0));
gl_FragColor = texture2D(iconImage, uv);
}
}
以上两段shader，基本上就是数据图像生成的js的逆向逻辑。不过glsl的语法和数据类型很奇怪，需要处理和兼容的边界情况相当多，当前这个demo也没有完全处理。
其他
这个方案虽然是走通了，不过这也只是也行的方案的一种。除了经常说的粒子场的形式处理，可能的方案和优化还包括：
1. 数据图像2其实没必要通过图片传进去，可能通过长数据分段传进去更科学，只是如果是js写的话，二进制数据拆包为js的number再传进gl，会有无所谓的性能消耗。如果上webassembly的话，说不定就好很多了。
2. 虽然shader里没有并行buffer，但是如果能把数据图像1的处理结果作为中间数据buffer起来，那么整体可以在保证基本并行的情况下，少计算很大一层，只是多一次离屏渲染而已。
3. 如果从任意数据中划分出均匀合理的栅格，这个看起来大有学问。如果这个做不到的话，这个方案就没有意义，并且说不定还有多余的性能损耗。