3

私は先週、ユーザーが図形を描画し、ラベルを追加し、面積を計算できるようにするクライアント側の HTML ページの作成に費やしました。最終的に、システムは、この作品をワード文書に自動的に追加できるフラットな画像に変換できる必要があります。

これを行うためのさまざまなアプローチを調査しましたが、落とし穴にぶつかり続けています。1 つの方法は、サーバー側のページの html を送信し、Windows フォームの Browser オブジェクトを使用してレンダリングし、スクリーンショットを作成することでした。もう 1 つの方法 (まだ試していません) では、同様のことを行いますが、PhantomJS サーバー側を使用します。

ただし、ページから取得している HTML が期待どおりにレンダリングされないことに気付いたので、1 歩前進して 2 歩後退しました。

簡単なテストとして、ページの HTML をキャプチャするこのボタン クリック イベントをページに追加しました。

var html = document.documentElement.outerHTML;
var fso = new ActiveXObject("Scripting.FileSystemObject");
var s = fso.CreateTextFile("C:\\Test.html", true);
s.Write(html);
s.Close();

これは、ページに含まれる (スクリーンショットで必要な) コンテンツの種類の例です。

予想されるスクリーンショットの内容。

ただし、Internet Explorer で Test.html を表示すると、次のようになります。

IE での Google マップ HTML の例。

.. Chrome で開くと、次のようになります。

Chrome での Google マップ HTML の例。

これは、Googleマップがどのように機能するか（形状のレンダリングを支援するためにJavaScriptデータファイルを動的にロードおよび削除する場所）に関係していると思います。HTML を完全にキャプチャして動作させることができれば、サーバー側でスクリーンショットを撮ることができると期待していますが、望みはありません。

ページをフラットなイメージに確実に変換するためのアイデアはありますか?

PS Google の静的マップ API も調べていましたが、(私が知る限り) 円やカスタム オーバーレイなどはサポートされていません。

編集:形状が動的キャンバス オブジェクトに描画され、マップ全体にタイル表示され、これらのキャンバス要素がページ HTML を通過しないことに気付きました (たとえ通過したとしても、形状が含まれていないようです) DOM 内のデータ)。

4

1 に答える 1

3

私は過去に非常に似たようなことをしなければなりませんでした。

私がしたことは、さまざまな色でポリゴンを描画し、目印、形状などを追加してから、Json を使用してすべてを文字列に保存することでした。

javascript を使用して、次のようにすべてのデータを保存しました。

 var feature = MapToolbar.features[type+'Tab'][id];
 var vertices = MapToolbar.getLatLngVertices(feature.getPath());
 allData[id] = { color: feature.fillColor, data: vertices}; });
 var allDataJson = JSON.stringify(allData);
 var hfPolyPath = $("div.hiddenVars input").get(0);

getLatLngVertices:

  getLatLngVertices: function(path) {
     var pathArray = path.getArray();
     var vertices = [];
     for( var i = 0, n = pathArray.length;  i < n;  i++ ) {
        var latLng = pathArray[i];
        vertices.push({ lat: latLng.lat(), lng: latLng.lng() });
     }
     return vertices;
    },

コードを「SaveBounds()」という 1 つの関数にラップすると、Json 文字列が生成され、非表示フィールドに保存されます。

次に、Google API を使用して静止画像を生成しました。

これは、サーバー側で行うことも、jQuery を使用して行うこともできます。私の場合、画像をメールの添付ファイルとして送信する必要があるため、サーバー側で行う必要がありますが、jQuery を使用するとさらに簡単になるはずです。

あなたがする必要があるのは、 http://maps.googleapis.com/maps/api/staticmapを使用 することです。ダイナミック マップと同じように見える画像を生成するために、すべてのクエリ文字列パラメータをそれに追加できます。

私がC＃で持っているコードは次のとおりです。

            sb.Append("http://maps.googleapis.com/maps/api/staticmap?");
            sb.Append("center=" + centerMap.Value.Substring(1, centerMap.Value.Length - 1));
            sb.Append("&zoom" + zoom.Value);
            sb.Append("&size=450x450");
            sb.Append("&mapType=" + mapType.Value);

            var decodedMapData = Server.UrlDecode(polyPath.Value);

            var dataObject = JsonConvert.DeserializeObject<dynamic>(decodedMapData);

            string staticImgSrc = sb.ToString();

            foreach (var key in dataObject)
            {
                var color = key.Value["color"];
                var array = key.Value["data"];
                var fillcolor = "0x" + color.ToString().Substring(1) + "80";
                staticImgSrc += "&path=color:0x00000080|weight:2|fillcolor:" + fillcolor;
                var count = 0;
                var lat = string.Empty;
                var lng = string.Empty;
                foreach (var arrayItem in array)
                {
                    staticImgSrc += "|" + arrayItem.lat.ToString() + "," + arrayItem.lng.ToString();
                    if (count == 0)
                    {
                        lat = arrayItem.lat.ToString();
                        lng = arrayItem.lng.ToString();
                    }
                    count++;
                }
                staticImgSrc += "|" + lat + "," + lng;
            }

            staticImgSrc += "&sensor=false";

最終的な画像の URL を使用して、画像を保存したり、メールで送信したり、好きなように送信したりできます。図形や目印はいくつでも追加でき、好きな色で塗りつぶすことができます。マップの種類、配置、ズームなどを制御できるため、最終結果は元のダイナミック マップとまったく同じ画像になります。

于 2013-07-26T15:14:15.713 に答える