ArcGIS JavaScript を始めましょう - XY に移動

Egge-Jan_Pollé

<\/HEAD>

<\/A>https:\/\/community.esri.com\/people\/EPolle_TensingInternational\/blog\/2019\/06\/02\/aan-de-slag-met-arcgis-javascript-inleiding<\/A> <\/P>

RD-co6rdinatenでXYに移動する<\/H2><\/P>今日の演習では、ユーザーがX座標とY座標を入力して、その位置にズームインできるダイアログウィンドウ（<form><\/SPAN>）を作成します。<\/P><\/P>これを実現するために書かれた関数（goToRDXY<\/SPAN> - 下記のコード参照）は、ユーザーの入力をキャッチします。入力が正しければ、ポイントオブジェクトが作成されます。このポイントオブジェクトは地図上に配置され、その場所にズームインします。以下は、アプリケーションのテスト用にいくつかのランダムな場所の座標です。<\/P><\/P>場所<\/TD>X<\/TD>Y<\/TD><\/TR>Vrijthof, Maastricht<\/TD>176220<\/TD>317750<\/TD><\/TR>Strandpaviljoen de Piraat, Cadzand<\/TD>15940<\/TD>378700<\/TD><\/TR>Rode Vuurtoren, Schiermonnikoog<\/TD>205405<\/TD>611450<\/TD><\/TR><\/TBODY><\/TABLE>そして面白いことに、このフォームはすべてのエラーハンドリングを処理します。<\/P>RD-cof6rdinatenは特定の範囲内でなければなりません（詳細はhttps:\/\/community.esri.com\/people\/EPolle_TensingInternational\/blog\/2019\/05\/11\/aan-de-slag-met-arcgis-javascript-nederlandse-basiskaart<\/>\u00a0をご覧ください）。<\/>\nしかし、ユーザーがまだ正しい値を入力していない場合、ボタン「Ga naar locatie」は機能しません。エラーハンドリングはブラウザによって異なりますが、チェックマークが二つ付いて初めてユーザーは先に進むことができます。<\/>\nコードの上部には、ダイアログウィンドウとフォームの見た目と操作感を調整するための追加CSSが含まれています。<\/>\n結果を見るにはここをクリックしてください:<\/>\nAan de slag met ArcGIS JavaScript - Ga naar XY (RD-cof6rdinaten)<\/>\u00a0\n\n<&exclDOCTYPE html>
&lthtml>
&lthead>
&ltmeta charset=\"utf-8\">
&ltmeta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no\">
&lttitle&gtAan de slag met ArcGIS JavaScript - Ga naar XY (RD-cof6rdinaten)&lt/title>
&ltstyle&gt
html, body, #viewDiv {
padding :   0;
margin :   0;
height :   100%;
width :   100%;
font-family : sans-serif;
}
.dialogDiv {
background-color : white;
}
.dialogHeader {
color : white;
font-weight : bolder;
width : auto;
background-color : #3c84a7;
padding :   5px;
token">} <\/SPAN>\n .coordinatesDiv<\/SPAN> {<\/SPAN>\n background-color<\/SPAN>:<\/SPAN> white;<\/SPAN>\n padding<\/SPAN>:<\/SPAN> 10px;<\/SPAN>\n }<\/SPAN>\n fieldset<\/SPAN> {<\/SPAN>\n border<\/SPAN>:<\/SPAN> 1px solid grey;<\/SPAN>\n margin<\/SPAN>:<\/SPAN> 10px;<\/SPAN>\n }<\/SPAN>\n legend<\/SPAN> {<\/SPAN>\n padding<\/SPAN>:<\/SPAN> 1em 0.5em;<\/SPAN>\n font-size<\/SPAN>:<\/SPAN>90%;<\/SPAN>\n }<\/SPAN>\n input:invalid+span:after<\/SPAN> {<\/SPAN>\n content<\/SPAN>:<\/SPAN> '✖'<\/SPAN>;<\/SPAN>\n padding-left<\/SPAN>:<\/SPAN> 5px;<\/SPAN>\n }<\/SPAN>\n input:valid+span:after<\/SPAN> {<\/SPAN>\n content<\/Span>:<\/span> '✓'<\/span>;<\/span>\n padding-left<\/span>:<\/span> 5px;<\/span>\n }<\/span>\n <\/<\/span>style><\/span><\/span><\/span>\n <\/<\/span>link




require([
"esri/Map",
"esri/geometry/Point",
"esri/views/MapView",
"esri/Graphic"
], function(Map, Point, MapView, Graphic) {

var map = new Map({
basemap: {
portalItem: {
id: "7aea6fa913a94176a1074edb40690318" // Topo RD
}
}
});

var view = new MapView({
spatialReference: 28992,
container: "viewDiv",
map: map,
center: new Point({x: 155000, y: 463000, spatialReference: 28992}),
zoom: 3
});

view.ui.add("rdCoordinatesDiv", "bottom-left");

var simpleMarkerSymbol = {
type: "simple-marker",
style: "triangle",
angle: 180,
size: 16,
yoffset: 8, // 三角形の下の頂点が指定された座標の位置を指します
color: [255, 0, 0],
outline: {
color: [255, 255, 255],
width: 2
}
};

// ジオメトリなしでGraphicを作成 - 後で追加されます
var xyMarkerOnTheMap = new Graphic({
symbol: simpleMarkerSymbol
});

// ビューに「見えない」グラフィックを追加する<\/SPAN>
view.<\/SPAN>graphics.<\/SPAN>add<\/SPAN>(<\/SPAN>xyMarkerOnTheMap)<\/SPAN>;<\/SPAN>

\/\/ イベントリスナー<\/SPAN>
document.<\/SPAN>getElementById<\/SPAN>(<\/SPAN>"rdCoordinatesForm"<\/SPAN>)<\/SPAN>.<\/SPAN>addEventListener<\/SPAN>(<\/SPAN>"submit"<\/SPAN>,<\/SPAN> goToRDXY)<\/SPAN>;<\/SPAN>

\/\/ 関数<\/SPAN>
function<\/SPAN> goToRDXY (<\/SPAN>event)<\/SPAN> {<\/SPAN>
event.<\/span>preventDefault<\/span>(<\/span>)<\/span> // preventDefault() メソッドはここでフォームの送信を防ぐために使用されています。入力はこの関数内でローカルに処理されます。<\/span>
xyMarkerOnTheMap.<\/span>geometry =<\/span> null<\/span>;<\/span>
let<\/span> rdX =<\/span> document.getElementById(\"rdXCoordinate\").value;
let<\/span> rdY =<\/span> document.getElementById(\"rdYCoordinate\").value;
let<\/span> target =<\/span> new<\/span> Point<\/span>({x: parseFloat(rdX), y: parseFloat(rdY), spatialReference:28992});
xyMarkerOnTheMap.geometry = target;
console.log(target);
view.goTo({target: target, zoom: 13});
}
});





XYへ移動



RD座標 (EPSG: 28992)

X座標:

=<\/SPAN>"<\/SPAN>validity"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN><\/<\/SPAN>span<\/SPAN>><\/SPAN><\/SPAN>
<\/<\/SPAN>div<\/SPAN>><\/SPAN><\/SPAN>
<<\/SPAN>div<\/SPAN> class<\/SPAN>=<\/SPAN>"<\/SPAN>coordinatesDiv"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN>
<<\/SPAN>label<\/SPAN> for<\/SPAN>=<\/SPAN>"<\/Span>rdYCoordinate"<\/Span><\/Span>><\/Span><\/Span>Y-座標:<\/<\/Span>label<\/Span>><\/Span><\/Span>
<<\/Span>input<\/Span> id<\/Span>=<\/Span>"<\/Span>rdYCoordinate"<\/Span><\/Span> type<\/Span>=<\/Span>"<\/Span>number"<\/Span><\/Span> name<\/Span>=<\/Span>"<\/Span>rdYCoordinate"<\/Span><\/Span> step<\/Span>=<\/span>\"0.001\" min=\"300000\" max=\"620000\" required>
<\\/span>
<\\/div>
<\\/fieldset>
<<\\/</span>div class </ span >< spanclass = \ " attr - value  token ">< spanclass = \ " punctuation  token "> = </ span > " coordinatesDiv " </ span >< spanclass = \ " punctuation  token "> & gt ; </ span > </ span >
< spanclass = \ "token  tag ">< spanclass = \ "token  tag ">< spanclass = \ " punctuation  token "> & lt ; </ span > input </ span > < spanclass = \ " attr - name  token "> type </ span > < spanclass = \ " attr - value  token ">< spanclass = \ " punctuation  token "> = </ span > " submit " </ span > < spanclass = \ " attr - name  token "> value </ span > < spanclass = \ " attr - value  token ">< spanclass = \ " punctuation  token "> = </ span > " Ga naar locatie " </ span > < spanclass = \ " punctuation  token "> & gt ; </ span > </ span >
< spanclass = \ "token  tag ">< spanclass = \ "token  tag ">< spanclass = \ " punctuation  token "> & lt ; / </ span > div </ span >< spanclass = \ " punctuation  token "> & gt ; </ span > </ span >
< spanclass = \ "token  tag ">< spanclass = \ "token  tag ">< spanclass = \ " punctuation  token "> & lt ; / </ span > form </ span >< spanclass = \ " punctuation  token "> & gt ; </ span > </ span >
< Spanclass = \ "Token Tag ">< Spanclass = \ "Token Tag ">< Spanclass = \ "Punctuation Token ">& Lt ; / </ Span > Div </ Span >< Spanclass = \ "Punctuation Token ">& Gt ; </ Span > </ Span >
< Span Class = \ "Token Tag ">< Span Class = \ "Punctuation Token ">& Lt ; / </ Span > Body </ Span >< Span Class = \ "Punctuation Token ">& Gt ; </ Span ></ Span >
< Span Class = \ "Token Tag ">< Span Class = \ "Punctuation Token ">& Lt ; / </ Span > Html </ Span >< Span Class = \ "Punctuation Token ">& Gt ; </ Span ></ Span >‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<‍