nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ArcGIS JavaScript を使い始める - カーソル位置を表示する

Egge-Jan_Pollé

<\/HEAD>

<\/A>pointer-move event<\/H2>
<\/P>
以前の演習<\/A>では、オランダのベースマップ<\/A>を使用したWebアプリケーションを作成しました。オランダの座標系であるRDシステムに投影されています。<\/P>
<\/P>
この演習の目的<\/strong>は、マウスの動きを追跡し、画面上のカーソル位置の座標を表示することです。<\/P><\/P>これは、
pointer-move event<\/A>ハンドラーを MapView<\/A>に設定し、取得したXおよびY座標を読み取ることで行います。<\/P>
<\/P>

dojo\/dom<\/H2><\/P>このアプリケーションでは、dojo/dom<\/A>モジュールを使用しています。これは Dojo Toolkit<\/A>から提供されており、裏側では ArcGIS API for JavaScript<\/A>によって使用されています。これにより、ID（「byId」）を使ってDOM要素にアクセスし、XおよびYの値を更新することが可能になります。<\\/P><\\/P>最初に、マウスの動きがまだ発生していないため、地図の中心（center）の値でXおよびY座標を埋めます。<\\/P><\\/P>以下にWebアプリケーションの完全なソースコードがあります。これをテキストエディタ（例：Notepad++<\\/A>）にコピーして、自分で試すことができます。<\\/SPAN> <\\/P>
<\\/P>
注意:<\\/strong><\\/P>オランダのRDシステムはオランダ領土内でのみ有効です。ただし、使用しているベースマップは周辺国の一部も表示します。<\\/P><\\/P>誤ったRD座標を表示しないように、Xが10〜290キロメートルの間かつYが300〜620キロメートルの間の場合のみXとYを読み取ります。そうでない場合は「該当なし」という値を表示します。<\\/P>

<\\/H2>ここをクリックしてアプリケーションの動作を見る。<\\/A><\\/P>

ソースコード<\\/H2><!DOCTYPE html><\\/SPAN>\n<<\\/SPAN>html<\\/SPAN>><\\/SPAN><\\/SPAN>\n<<\\/SPAN>head<\\/SPAN>><\\/SPAN><\\/SPAN>\n <<\\/SPAN>meta<\\/SPAN> charset<\\/SPAN>=<\\/SPAN>"<\\/SPAN>utf-8"<\\/SPAN><\\/SPAN>><\\/SPAN><\\/SPAN>\n <<\\/SPAN>meta<\\/SPAN> name<\\/SPAN>=<\\/SPAN>"viewport"<\\/span> content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS JavaScript 入門 - カーソル位置表示</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #coordinates { padding: 15px; background: white; color: black; border: black; font-family: sans-serif; font-size: 1.2em; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css"> <script src="https://js.arcgis.com/4.11/"></script> <script> require([ "esri/Map", "esri/geometry/Point", "esri/views/MapView", "dojo/dom", "dojo/domReady!" ] class="punctuation token">, function(Map, Point, MapView, dom) { var map = new Map({ basemap: { portalItem: { id: "7aea6fa913a94176a1074edb40690318" // Esri Nederlandのベースマップ: Topo RD } } }); var rdOrigin = new Point({ x: 155000, y: 463000, spatialReference: 28992 }); var view = new MapView({ spatialReference: 28992, container: "viewDiv", map: map, center: rdOrigin, zoom: 3 }); // 座標を表示するdivを地図画面に追加する view.ui.add("coordinates", "bottom-left"); // 最初に地図の中心座標をミリメートル単位で四捨五入し、少数点と千位区切り記号を付けて表示する。 dom.byId">("rdxcoord").innerHTML = "X = " + view.center.x.toLocaleString(undefined, {minimumFractionDigits: 3, maximumFractionDigits: 3}) + " m"; dom">("rdycoord").innerHTML = "Y = " + view.center.y.toLocaleString(undefined, {minimumFractionDigits: 3, maximumFractionDigits: 3}) + " m"; showCoordinates( evt ) { var point = view.toMap({x: evt.x, y: evt.y}); // 関連がある場合はRD座標を表示する // オランダのRD座標系はオランダ領土内のみ有効なので、カーソルがオランダ外に出すぎると // RD座標は「該当なし」となる。X座標とY座標の境界値は以下の通り。 if (point.x < 10000 || point.x > 290000 || point.y < 300000 || point.y > 620000) { dom.byId("rdxcoord").innerHTML = "X = 該当なし"; dom.byId("rdycoord").innerHTML = "Y = 該当なし"; } else { dom.byId("rdxcoord").innerHTML = "X = " + point.x.toLocaleString(undefined, {minimumFractionDigits: 3, maximumFractionDigits: 3}) + " m"; dom.byId("rdycoord").innerHTML = class="punctuation token">(<\/SPAN>"rdycoord"<\/SPAN>)<\/SPAN>.<\/SPAN>innerHTML =<\/SPAN> "Y = "<\/SPAN> +<\/SPAN> point.<\/SPAN>y.<\/SPAN>toLocaleString<\/SPAN>(<\/SPAN>undefined,<\/SPAN> {<\/SPAN>minimumFractionDigits:<\/SPAN> 3<\/SPAN>,<\/SPAN> maximumFractionDigits:<\/SPAN> 3<\/SPAN>}<\/SPAN>)<\/SPAN> +<\/SPAN> " m"<\/SPAN>;<\/SPAN> }<\/SPAN> }<\/SPAN> view.<\/SPAN>when<\/SPAN>(<\/SPAN>function<\/SPAN>(<\/SPAN>)<\/SPAN>{<\/SPAN> // マップが読み込まれた後に、座標を取得するためにマウスの動きを監視します<\/SPAN> view.<\/SPAN>on<\/SPAN>(<\/SPAN>"pointer-move"<\/SPAN>,<\/SPAN> showCoordinates)<\/SPAN>;<\/SPAN> }<\/SPAN>)<\/SPAN>;<\/SPA N> } <\ / SP AN > } <\ / SP AN > & lt ; \/ <\ / SP AN >script<\ / SP AN >& gt ; <\ / SP AN ><\ / SP AN > & lt ; \/ <\ / SP AN >head<\ / SP AN >& gt ; <\ / SP AN ><\ / SP AN > & lt ;body><\ / SP AN ><\ / SP AN > & lt ;div id= "viewDiv"><\ / SP AN ><\ / SP AN > & lt ;div id= "coordinates"><\ / SP AN > & lt ;span id= "coordtitle">カーソル位置 (RD座標):<\ / span> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > < sp an > <> </ sp an > <<<<<<<<<<<<}

タグ付けされた投稿をもっと見る

There are no comments yet

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.