PopupTemplate異常な機能モジュールのロード画面でのArcGIS JSのAPI

問題の説明

バックエンド・インターフェースは、画像のURLアドレスを取得する場合、その需要はポップPopupTemplateパネルのArcGIS JS APIでこの画像をレンダリングすることであるユーザーは、地図上の場所をクリックすることができ、提供、あなたは詳細な情報をポップポップすることができますこの画像から取り戻すためにそれらの間で、このポップで、この効果は、以下のようになります。

 

実際には、上記の効果が達成され、非常に単純な、我々はそれだけでポップをインスタンス化する際に以下のように、適切な描画オブジェクトのプロパティ値を渡す必要がありますされています。

var test = new PopupTemplate({
	title: "{name}",
	location: 'top-right',
	content:
		"<img src='" + imgurl + "' style='width: 100%; height: 250px' />" +
		"<p style='margin-top: 20px'><b>分辨率:</b>{resolution}</p>" +
		"<p><b>波段:</b>{tag}</p>" +
		"<p><b>时间:</b>{acquisitiondate:DateFormat}</p>" +
		"<p><b>年份:</b>{year}</p>" +
		"<p><b>云量覆盖:</b>{cloudcover}</p>"
});

上記のコードに示すように、我々はコンテンツにのみ加え、<img>タグを必要とすることにより、属性のimg URLのタグを指定するには、内側にすることができポップ画像を増やしたいのは爆弾で映像ウィンドウの操作を完了するために追加することができますが、それはしませんでした私たちは、絵が適切に下記のように、中括弧と私たちのアドレスであり、画像のアドレスに対処されていません得ました:

"http://10.10.10.111:8080/quickview/{33665132-754A-4180-842E-62FF292EA4C5}/{30023F9E-6362-11EA-881C-000C291A4B7F}.jpg"

それはテンプレートとして絵アドレス内の当社のコンテンツ括弧になりますので、この組み合わせアドレスimgタグの問題は、あるため、テンプレートの構文はES6のためである以下の括弧内のPopupTemplate {}で、着信コンテンツの属性の後に発生します次のような構文解析は、最終的に我々は、空のアドレスが解析されますよ。

"http://10.10.10.111:8080/quickview//.jpg"

そのアドレスは、このような方法で解決されているので、我々は次のように絵は確かに正しく、ロードすることはできませんポップ:

 

 

ソリューション

今、私たちが発見したことを問題の原因は、その後、我々は次の適切な解決策を作ることができ、原因解析テンプレートの構文エラーが原因です。

この方法の一つ:

中括弧の構文解析テンプレートの構文エラーは、そう間違ったアドレス絵につながった、そして我々は、操作を過ごすために、括弧の前にバックスラッシュエスケープ文字を追加することをああ、このフォームは次のようになりますことができます。

"http://10.10.10.111:8080/quickview/\{33665132-754A-4180-842E-62FF292EA4C5\}/\{30023F9E-6362-11EA-881C-000C291A4B7F\}.jpg"

しかし、この方法の実際の動作は、これを見つけることができません。

方法2:

次のように、アドレスの全体像を符号化するencodeURI()メソッドを使用して:

var imageurl = "http://10.10.10.111:8080/quickview/{33665132-754A-4180-842E-62FF292EA4C5}/{30023F9E-6362-11EA-881C-000C291A4B7F}.jpg";
var imgurl = encodeURI(imageurl);

テストの後、このアプローチが可能です。これらのメソッドencodeURI()の特定の用途については、学ぶために、独自のネットワークリソースを見つけてください。

发布了143 篇原创文章 · 获赞 225 · 访问量 30万+

おすすめ

転載: blog.csdn.net/qq_35117024/article/details/105218544