7
创建具有GISCloud等渲染性能的矢量多边形？
我一直在寻找一种可靠的解决方案，该解决方案使我可以创建网络地图并覆盖矢量多边形，而无需花费太多时间来加载此类数据，目的是使我能够使每个多边形在悬停事件上显示不同的颜色。 据我所知，可以通过3种画布，SVG，Flash来实现这一目标。 如果Flash能在苹果iPhone / iPad上运行，它似乎是最好的解决方案，因为它似乎提供了最快的渲染速度和最干净的显示效果。画布似乎是第二好的选择，但是如果您要在地图上显示数百个多边形，则花费非常长的时间，而SVG需要花费更长的时间来渲染。 我几乎找不到希望解决该问题的解决方案的希望，但今天我遇到了一家名为GISCloud http://www.giscloud.com的公司（当前处于Beta版，具有免费注册）。 这家公司使SOMEHOW设法找到了一种惊人的方式来近乎实时地在地图上渲染数百个矢量。我对他们的方法感到惊讶，我向社区提出的问题与我们如何复制他们的方法以与现有技术一起使用，如传单，开放层，蜡... 通过查看此惊人的演示来自己看看：http : //www.giscloud.com/map/284/africa 确保将鼠标悬停在页面上的所有多边形上，并测试缩放控件，以确保这些多边形确实是矢量。 通过查看带有Firebug的请求，我已经注意到，该地图正在请求特定的json文件。似乎根据缩放级别/区域，有多个json文件被请求。 我还要在这里提到，一旦giscloud将数据加载到页面上，将鼠标悬停在矢量上就可以立即更改颜色，而无需创建新请求。 例子： http://cft1.giscloud.com/t/1316509973/map284/layer1156/3/3/3.json http://cft1.giscloud.com/t/1316509973/map284/layer1156/3/5/3.json http://cft1.giscloud.com/t/1316509973/map284/layer1156/3/4/4.json http://cft1.giscloud.com/t/1316509973/map284/layer1156/3/3/4.json http://cft1.giscloud.com/t/1316509973/map284/layer1156/3/5/4.json 我假设url结构遵循标准的切片服务逻辑（例如，第3到最后一个文件夹是缩放级别...）。 无论如何，我已经分析了这些json文件的实际数据，并且看来他们使用的逻辑遵循某种逻辑，即它们仅基于这些数据值来创建矢量： 宽度/高度：它们定义每个json请求中提供的数据的宽度和高度 像素：在这里它们定义了像素值，我假设它们与某种广义点级别的一些一般x / y像素坐标有关？我猜他们会以某种方式根据缩放级别自动简化区域。我假设它们使用像素坐标，我猜想它们与经/纬度数据相比正在极大地减少需要加载的数据的大小。 样式：此处定义了两个RGB css值。“ F”代表多边形文件颜色，“ S”代表多边形边界颜色。 geom：这是我猜测它们在某种程度上定义的地方，具体定义正在加载的图块中的每个多边形，其中基于地图容器窗口定义此类数据。有趣的是，每个条目都有一个“ S”值，我假设该值用作可选属性或特征链接值，并且在每个条目的末尾都有一个区域，似乎在定义每个矢量ID的同时我猜测的层ID被用来以某种方式加入来自每个被调用的json磁贴请求的数据。 我还假设他们以某种方式找到了一种方法，可以根据需要为请求的图块加载的数据大小，自动确定并拆分每个图块需要加载的数据。 以下是这些请求之一的摘要： {"width":256,"height":256,"tile": {"pixels": [0,6461,-1,0,5,148,0,509,-1,10715,-1,1,-1,251,-1,1,-1,1,-1,251,-2,3,-1,255,-1,249,-2,5,-2,247,-1,509,-3,251,-1,2,-2,253,-2,252,-2,254,-1,255,-1,254,-1,255,-1,1276,-2,13,-1,233,-1,2,-1,253,-1,1,-1,255,-1,247,-1,1306,-1,1533,-1,1269,-1,1276,-1,2303,-1]}, "styles": [{"f":"rgb(99,230,101)","s":"rgb(5,148,0)","lw":"0"}], "geom": [ {"s":0,"p":[4,143,5,144,3,146,1,146,2,143,4,143],"c":"layer1156_5098"}, {"s":0,"p":[-2,143,0,140,2,141,2,144,1,146,-2,144,-2,143],"c":"layer1156_5067"}, {"s":0,"p":[7,143,5,144,4,143,2,143,2,141,5,138,6,139,5,141,7,143],"c":"layer1156_5051"}, {"s":0,"p":[10,141,11,137,12,137,14,137,12,142,9,143,9,142,10,141],"c":"layer1156_5041"}, {"s":0,"p":[1,136,0,140,-2,143,-2,136,1,136],"c":"layer1156_5038"}, {"s":0,"p":[8,143,5,141,5,137,8,136,10,137,10,141,8,143],"c":"layer1156_5033"}, {"s":0,"p":[5,137,2,141,0,140,1,136,1,136,2,135,3,136,5,137],"c":"layer1156_5028"}, {"s":0,"p":[10,134,12,136,11,138,8,135,10,134],"c":"layer1156_5020"}, {"s":0,"p":[-2,133,0,136,-2,136,-2,133],"c":"layer1156_5005"}, …