7
GISCloudのようなレンダリングパフォーマンスでベクターポリゴンを作成しますか？
私は、ホバーイベントで各ポリゴンを異なる色で表示できるようにすることを目的に、そのようなデータを永遠にロードすることなく、Webマップを作成し、ベクトルポリゴンをオーバーレイできる堅牢なソリューションを探していました。 私の知る限り、キャンバス、SVG、Flashのいずれかでこれを達成するための3つの特定のオプションがあります。 Flashは、最速のレンダリングと最もクリーンな表示を提供するように思えるので、Apple iphone / ipadsで動作する場合、最良のソリューションになるようです。Canvasは2番目に最適な選択肢のように見えますが、マップ上に何百ものポリゴンが表示されている場合は非常に時間がかかりますが、SVGのレンダリングにはさらに時間がかかります。 私はほとんどこの問題の解決策を見つけることに希望を失ったが、今日、私はGISCloudという会社に出会いましたhttp://www.giscloud.com（現在は無料登録してベータ版）。 この会社は、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ピクセル座標に何らかの関係があると想定しているピクセル値を定義しますか？私は彼らが何らかの方法でズームレベルに応じて自動的に領域を単純化する方法を持っていると推測しています。私は、ピクセル座標を使用して、緯度/経度データと比較してロードする必要のあるデータのサイズを劇的に削減していると推測しています。 スタイル：ここでは、2つのRGB css値を定義します。「F」はポリゴンファイルの色を表し、「S」はポリゴンの境界線の色を表します。 geom：ここでは、マップコンテナウィンドウに基づいてデータが定義されている場所で、読み込まれているタイル内の各ポリゴンを明確に定義していると推測しています。また興味深いのは、各エントリがオプションの属性または機能リンク値として使用されると想定している「S」値を持ち、各エントリの最後に特定のベクトルごとのIDを定義するように見える領域があることです私が推測しているレイヤーIDは、呼び出されている各jsonタイルリクエストからのデータを何らかの形で結合するために利用されます。 また、要求されたタイルにロードする必要があるデータのサイズに応じて、各タイルにロードする必要があるデータを自動的に決定および分割する方法を何らかの方法で見つけたと想定しています。 以下は、これらのリクエストの内の1つを抽出した内訳です。 {"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"}, {...} ... ] …