Previous Page Next Page
オープンソースによる地図表示（Leaflet編）８／９
2019/4/26 by T. Fujita
５－５、インタラクティブな図形の表示
最後に任意の位置に直線や多角形・円を表示し、CSV形式でローカル・ファイルとして保存・読込む方法を記載します。
『Leaflet_Tutrial_404.html』に各種処理を追加する形で作成しました。 ここでもLeaflet内部処理系で経度が－３６０度から＋３６０度の範囲で表示させるようにしている他、
CSVファイル内に全角文字を使用する場合には、UTF8で保存する必要があります。
今回は、マーカー・直線・多角形・円の描画等はそれぞれ独立したサブルーチンにしており、追加した処理内容は次の通りです。
（１）画面上部にメニューを追加
『Leaflet_Tutrial_505.html』のソースファイルにおける赤字部分に「図形の設置」と「データの保存・読込」を追加しました。
ここでも追加したメニューの部分にマウスを合わせると下側にサブメニューが表示され、選択できるようになっています。
（２）線のスタイル設定
ソースファイルにおけるオレンジ色の部分と『Original_Style_505.css』、『Dialog_505.js』のオレンジ色の部分が
追加した箇所です。 ダイアログボックスを表示し線種の選択、太さや色の指定等が可能としています。
なお、表示する線のスタイル指定は、全ての直線・多角形・円に対して同一に設定されます。 また、ここで使用している
直線・破線のサンプルは、180×18ピクセルのPNG図形です。
（３）任意の位置に直線を描画
ソースファイルにおける紫色の部分であり、マウスで直線用マーカーを設置できる他設置したマーカーを移動させることにより直線の位置を変更できます。
また、直線用マーカーの表示・非表示が指定できます。 直線用マーカーの設置・移動・消去の処理内容は、『Leaflet_Tutrial_404.html』のマーカーでの処理とほぼ同一です。
（多角形のマーカーも同じです）
（４）任意の位置に多角形を描画
ソースファイルにおける緑色の部分が多角形の描画・消去等の処理箇所であり、「多角形の設置終了」を選択することで多角形が描画されます。
直線と同様にマウスで多角形用マーカーを移動させることで多角形の形状を変更できます。
（５）任意の位置に円を描画
ソースファイルにおける深紅の文字部分と『Dialog_505.js』の深紅の部分であり、ダイアログボックスが表示され円の中心の緯度・経度及び直径を入力することで円が描画されます。
円の場合には、円をクリックすることで表示される吹き出し内のボタンで個別に消去することもできます。
（６）CSV形式で保存と読込
ソースファイルにおける青字部分と『Dialog_505.js』の青字部分から構成されています。 保存は、マーカー・直線・多角形・円と別々ですが、
円以外はCSVファイル内容は同一で、円の場合には「直径」の項目が追加されています。 また、読込については共通にしており、
読込んだ後に処理を選択できるようにしています。 ここでも「Safari」は、CSV形式での保存・読込に対応出来ていません。
以下に インタラクティブな図形の表示例とそのソースファイルの内容を示します。 単独でを表示する場合は、
『
Leaflet_Tutrial_505.html 』をクリックして下さい。
但し、今回も緯度・経度とも”０度”の場合は対象外となります。
インタラクティブな線の表示例
『 Leaflet_Tutrial_505.html 』のソースファイル内容
0001 <!DOCTYPE html>
0002 <html>
0003 <head>
0004 <title> Leaflet_Tutrial_505.html 2019/4/26 by T. Fujita </title>
0005 <meta charset = "utf-8" />
0006 <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
0007 <link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
0008 <link rel = "stylesheet" href = "./Plugins/ms-Dropdown-master/css/msdropdown/dd.css" />
0009 <link rel = "stylesheet" href = "./CSS/scroll_menu.css" />
0010 <link rel = "stylesheet" href = "./CSS/Original_Style_505.css" />
0011
0012 <style>
0013 html, body {
0014 width: 99%;
0015 height: 98%;
0016 font-size: 14px;
0017 z-index: 0;
0018 }
0019 </style>
0020
0021 <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
0022 <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
0023 <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
0024 <script src = "./Plugins/ms-Dropdown-master/js/msdropdown/jquery.dd.js"></script>
0025 <script src = "./JS/Dialog_505.js" ></script>
0026 <script>
0027 var Marker_LAT = new Array();
0028 var Marker_LON = new Array();
0029 var Marker_NAM = new Array();
0030 var Marker_LNK = new Array();
0031 var Marker_ICN = new Array();
0032 var Marker_ID = new Array();
0033 var Marker_Drag_flag = new Array();
0034 var Marker_Drag_info = new Array();
0035 var ClickLat = null;
0036 var ClickLon = null;
0037 var Marker_count = 0;
0038 var Marker_ID_count = 0;
0039 var SelectedID;
0040 var Marker_flag = 0;
0041 var Temp_shape, Temp_shape_clone;
0042 var Temp, Temp_LAT, Temp_LON, Temp_NAM, Temp_LNK, Temp_ICN, Temp_ID;
0043 var Temp_Drag_flag, Temp_Drag_info;
0044 var Layer_404 = new Array();
0045 var Layer_404_clone = new Array();
0046
0047 var Lines_shape = new Array();
0048 var Lines_shape_clone_01 = new Array();
0049 var Lines_shape_clone_02 = new Array();
0050 var Lines_LAT = new Array();
0051 var Lines_LON = new Array();
0052 var Lines_NAM = new Array();
0053 var Lines_LNK = new Array();
0054 var Lines_ICN = new Array();
0055 var Lines_ID = new Array();
0056 var Lines_Marker_ID = new Array();
0057 var Lines_Drag_flag = new Array();
0058 var Lines_Drag_info = new Array();
0059 var Polygons_shape = new Array();
0060 var Polygons_shape_clone_01 = new Array();
0061 var Polygons_shape_clone_02 = new Array();
0062 var Polygons_pos = new Array();
0063 var Polygons_pos_clone_01 = new Array();
0064 var Polygons_pos_clone_02 = new Array();
0065 var Polygons_LAT = new Array();
0066 var Polygons_LON = new Array();
0067 var Polygons_NAM = new Array();
0068 var Polygons_LNK = new Array();
0069 var Polygons_ICN = new Array();
0070 var Polygons_ID = new Array();
0071 var Polygons_Marker_ID = new Array();
0072 var Polygons_Drag_flag = new Array();
0073 var Polygons_Drag_info = new Array();
0074 var Circles_shape = new Array();
0075 var Circles_shape_clone = new Array();
0076 var Circles_LAT = new Array();
0077 var Circles_LON = new Array();
0078 var Circles_RAD = new Array();
0079 var Circles_NAM = new Array();
0080 var Circles_LNK = new Array();
0081 var Circles_ID = new Array();
0082 var Circles_Drag_flag = new Array();
0083 var Circles_Drag_info = new Array();
0084 var Lines_Marker_count = 0;
0085 var Lines_Marker_ID_count = 0;
0086 var Lines_count = 0;
0087 var Lines_ID_count = 0;
0088 var Polygons_Marker_count = 0;
0089 var Polygons_Marker_ID_count = 0;
0090 var Polygons_count = 0;
0091 var Polygons_ID_count = 0;
0092 var Circles_count = 0;
0093 var Circles_ID_count = 0;
0094 var Layer_505_L = new Array();
0095 var Layer_505_L_clone_01 = new Array();
0096 var Layer_505_L_clone_02 = new Array();
0097 var Layer_505_LM = new Array();
0098 var Layer_505_LM_clone = new Array();
0099 var Layer_505_P = new Array();
0100 var Layer_505_P_clone_01 = new Array();
0101 var Layer_505_P_clone_02 = new Array();
0102 var Layer_505_PM = new Array();
0103 var Layer_505_PM_clone = new Array();
0104 var Layer_505_C = new Array();
0105 var Layer_505_C_clone = new Array();
0106 var Dialog_flag_001 = 0;
0107 var Lines_flag = 0;
0108 var Polygons_flag = 0;
0109 var map_505;
0110
0111 function init() {
0112 map_505 = L.map('map_505').setView([35.0, 137.0], 6);
0113 mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
0114 L.tileLayer(
0115 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
0116 attribution: 'Map data © ' + mapLink,
0117 maxZoom: 18,
0118 }).addTo(map_505);
0119 map_505.on('click', function(e) {
0120 ClickLat = e.latlng.lat;
0121 ClickLon = e.latlng.lng;
0122 while(ClickLon < -180) {
0123 ClickLon = ClickLon + 360;
0124 }
0125 while(ClickLon > 180) {
0126 ClickLon = ClickLon - 360;
0127 }
0128 if ( Marker_flag == 1 ) { Leaflet_Marker_401(); }
0129 if ( Marker_flag == 2 ) { Leaflet_Marker_403(); }
0130 if ( Lines_flag >= 1 ) { Leaflet_Lines_501(); };
0131 if ( Polygons_flag >= 1 ) { Leaflet_Polygons_501(); };
0132 });
0133 }
0134
0135 function Leaflet_Marker_400() { // 初期設定（マーカー単独設置）
0136 ClickLat = null;
0137 ClickLon = null;
0138 Marker_flag = 1;
0139 Lines_flag = 0;
0140 Polygons_flag = 0;
0141 }
0142
0143 function Leaflet_Marker_401() { // マーカー単独設置
0144 if(Marker_flag == 1) {
0145 Marker_LAT[ Marker_count ] = ClickLat;
0146 Marker_LON[ Marker_count ] = ClickLon;
0147 Marker_NAM[ Marker_count ] = Set_Text;
0148 Marker_LNK[ Marker_count ] = " ";
0149 Marker_ICN[ Marker_count ] = L.icon({
0150 iconUrl: Icon_Url,
0151 iconSize: [Icon_W, Icon_H],
0152 iconAnchor : [Icon_AW, Icon_AH],
0153 popupAnchor: [Icon_PW, Icon_PH]
0154 });
0155 Marker_ID[ Marker_count ] = "Marker" + Marker_ID_count;
0156 Marker_Drag_flag[ Marker_count ] = true;
0157 Marker_Drag_info[ Marker_count ] = "マウスで移動出来ます。";
0158 Temp = Marker_count;
0159 Marker_setting();
0160 Marker_set();
0161 Layer_404[ Temp ] = Temp_shape;
0162 Layer_404[ Temp ].addTo(map_505);
0163 Layer_404_clone[ Temp ] = Temp_shape_clone;
0164 Layer_404_clone[ Temp ].addTo(map_505);
0165 Marker_count = Marker_count + 1;
0166 Marker_ID_count = Marker_ID_count + 1;
0167 Marker_flag = 0;
0168 }
0169 }
0170
0171 function Leaflet_Marker_402() { // 初期設定（マーカー連続設置）
0172 ClickLat = null;
0173 ClickLon = null;
0174 Marker_flag = 2;
0175 Lines_flag = 0;
0176 Polygons_flag = 0;
0177 }
0178
0179 function Leaflet_Marker_403() { // マーカー連続設置
0180 if(Marker_flag == 2) {
0181 Marker_LAT[ Marker_count ] = ClickLat;
0182 Marker_LON[ Marker_count ] = ClickLon;
0183 Marker_NAM[ Marker_count ] = Set_Text;
0184 Marker_LNK[ Marker_count ] = Set_Link;
0185 Marker_ICN[ Marker_count ] = L.icon({
0186 iconUrl: Icon_Url,
0187 iconSize: [Icon_W, Icon_H],
0188 iconAnchor : [Icon_AW, Icon_AH],
0189 popupAnchor: [Icon_PW, Icon_PH]
0190 });
0191 Marker_ID[ Marker_count ] = "Marker" + Marker_ID_count;
0192 Marker_Drag_flag[ Marker_count ] = true;
0193 Marker_Drag_info[ Marker_count ] = "マウスで移動出来ます。";
0194 Temp = Marker_count;
0195 Marker_setting();
0196 Marker_set();
0197 Layer_404[ Temp ] = Temp_shape;
0198 Layer_404[ Temp ].addTo(map_505);
0199 Layer_404_clone[ Temp ] = Temp_shape_clone;
0200 Layer_404_clone[ Temp ].addTo(map_505);
0201 Marker_count = Marker_count + 1;
0202 Marker_ID_count = Marker_ID_count + 1;
0203 }
0204 }
0205
0206 function Leaflet_Marker_404() { // マーカー連続設置終了
0207 Marker_flag = 0;
0208 }
0209
0210 function Leaflet_Marker_405() { // マーカー全消去
0211 for(i = 0; i < Layer_404.length; i++) {
0212 if(Layer_404[i] != null) {
0213 map_505.removeLayer(Layer_404[i]);
0214 }
0215 }
0216 for(i = 0; i < Layer_404_clone.length; i++) {
0217 if(Layer_404[i] != null) {
0218 map_505.removeLayer(Layer_404_clone[ i ]);
0219 }
0220 }
0221 Marker_flag = 0;
0222 Marker_count = 0;
0223 Marker_LAT = new Array();
0224 Marker_LON = new Array();
0225 Marker_NAM = new Array();
0226 Marker_LNK = new Array();
0227 Marker_ICN = new Array();
0228 }
0229
0230 function Leaflet_Marker_406() { // マーカー保存（CSV形式）
0231 for (i = 0; i <= (Marker_LON.length - 1); i++) {
0232 if( !isNaN(Marker_LON[ i ]) ) {
0233 while( (Marker_LON[ i ] * 1.0) < -180) {
0234 Marker_LON[ i ] = (Marker_LON[ i ] * 1.0) + 360;
0235 }
0236 while( (Marker_LON[ i ] * 1.0) > 180) {
0237 Marker_LON[ i ] = (Marker_LON[ i ] * 1.0) - 360;
0238 }
0239 }
0240 }
0241 if(Marker_LAT[ 0 ] == "LAT(deg.)") {
0242 var CSV_content = [];
0243 } else {
0244 var CSV_content = "LAT(deg.),LONG(deg.),Name(by utf-8),Link,\r\n";
0245 }
0246 const aTag = document.createElement('a');
0247 aTag.download = "CSV_Data.csv";
0248 var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
0249 Temp = Marker_LAT.length;
0250 for ( i = 0; i < Temp; i++ ) {
0251 if( Marker_LAT[ i ] != "" && Marker_LON[ i ] != "" ) {
0252 CSV_content = CSV_content + Marker_LAT[ i ] + "," + Marker_LON[ i ] + "," + Marker_NAM[ i ] + "," + Marker_LNK[ i ] + ",\r\n";
0253 }
0254 }
0255 var blob = new Blob([ bom, CSV_content ], { "type": "text/csv"});
0256 if(window.navigator.msSaveBlob) {
0257 window.navigator.msSaveBlob(blob, aTag.download); // for IE
0258 } else if (window.URL && window.URL.createObjectURL) {
0259 aTag.href = window.URL.createObjectURL(blob); // for FireFox
0260 document.body.appendChild(aTag);
0261 aTag.click();
0262 document.body.removeChild(aTag);
0263 } else if (window.webkitURL && window.webkitURL.createObject) {
0264 aTag.href = (window.URL || window.webkitURL).createObjectURL(blob); // for Chrome
0265 aTag.click();
0266 } else {
0267 alert("保存に失敗しました！");
0268 }
0269 }
0270
0271 function Leaflet_Marker_407() { // マーカー読込（CSV形式）
0272 Dialog_002();
0273 }
0274
0275 function Marker_setting() { // マーカー設定
0276 Temp_LAT = Marker_LAT[ Temp ] * 1.0;
0277 Temp_LON = Marker_LON[ Temp ] * 1.0;
0278 Temp_NAM = Marker_NAM[ Temp ];
0279 Temp_LNK = Marker_LNK[ Temp ];
0280 Temp_ICN = Marker_ICN[ Temp ];
0281 Temp_ID = Marker_ID[ Temp ];
0282 Temp_Drag_flag = Marker_Drag_flag[ Temp ];
0283 Temp_Drag_info = Marker_Drag_info[ Temp ];
0284 Set_Link = " ";
0285 if(Temp_LNK != undefined ) {
0286 if( String( Temp_LNK ).length > 5 ) {
0287 Set_Link = "<a href= '" + Temp_LNK + "' target='_blank'> " + Temp_NAM + "情報にリンク</a>";
0288 }
0289 }
0290 }
0291
0292 function Lines_Marker_setting() { // 直線用マーカー設定
0293 Temp_LAT = Lines_LAT[ Temp ] * 1.0;
0294 Temp_LON = Lines_LON[ Temp ] * 1.0;
0295 Temp_NAM = Lines_NAM[ Temp ];
0296 Temp_LNK = Lines_LNK[ Temp ];
0297 Temp_ICN = Lines_ICN[ Temp ];
0298 Temp_ID = Lines_Marker_ID[ Temp ];
0299 Temp_Drag_flag = Lines_Drag_flag[ Temp ];
0300 Temp_Drag_info = Lines_Drag_info[ Temp ];
0301 Set_Link = " ";
0302 if(Temp_LNK != undefined ) {
0303 if( String( Temp_LNK ).length > 5 ) {
0304 Set_Link = "<a href= '" + Temp_LNK + "' target='_blank'> " + Temp_NAM + "情報にリンク</a>";
0305 }
0306 }
0307 }
0308
0309 function Polygons_Marker_setting() { // 多角形用マーカー設定
0310 Temp_LAT = Polygons_LAT[ Temp ] * 1.0;
0311 Temp_LON = Polygons_LON[ Temp ] * 1.0;
0312 Temp_NAM = Polygons_NAM[ Temp ];
0313 Temp_LNK = Polygons_LNK[ Temp ];
0314 Temp_ICN = Polygons_ICN[ Temp ];
0315 Temp_ID = Polygons_Marker_ID[ Temp ];
0316 Temp_Drag_flag = Polygons_Drag_flag[ Temp ];
0317 Temp_Drag_info = Polygons_Drag_info[ Temp ];
0318 Set_Link = " ";
0319 if(Temp_LNK != undefined ) {
0320 if( String( Temp_LNK ).length > 5 ) {
0321 Set_Link = "<a href= '" + Temp_LNK + "' target='_blank'> " + Temp_NAM + "情報にリンク</a>";
0322 }
0323 }
0324 }
0325
0326 function Marker_set() { // マーカー設置
0327 if( !isNaN( Temp_LAT ) && !isNaN( Temp_LON ) ) {
0328 if( (Temp_LAT !== undefined ) || (Temp_LAT != "") ) {
0329 if( ((Temp_LAT * 1.0) != 0) || ((Temp_LON * 1.0) != 0) ) {
0330 Temp_shape = L.marker([ Temp_LAT, Temp_LON ],
0331 {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
0332 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>" +
0333 Set_Link + "<p> <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
0334 Temp_shape.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
0335 if(Temp_LON >= 0) {
0336 Temp_shape_clone = L.marker([ Temp_LAT, (Temp_LON - 360) ],
0337 {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
0338 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>" +
0339 Set_Link + "<p> <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
0340 Temp_shape_clone.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
0341 } else {
0342 Temp_shape_clone = L.marker([ Temp_LAT, (Temp_LON + 360) ],
0343 {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
0344 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>" +
0345 Set_Link + "<p> <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
0346 Temp_shape_clone.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
0347 }
0348 }
0349 }
0350 }
0351 }
0352
0353 function onMarkerOpen() { // マーカーをクリックした時に表示する削除ボタンと変更ボタン
0354 var tempMarker = this;
0355 SelectedID = tempMarker.options.id;
0356 $(".marker-delete-button:visible").click(function () {
0357 if(SelectedID.slice(0,4) =="Line") {
0358 Lines_Marker_DEL(tempMarker);
0359 } else if(SelectedID.slice(0,7) =="Polygon") {
0360 Polygons_Marker_DEL(tempMarker);
0361 } else {
0362 Marker_DEL(tempMarker);
0363 }
0364 });
0365 $(".marker-change-button:visible").click(function () {
0366 Dialog_flag_001 = 1;
0367 Dialog_001();
0368 Dialog_flag_001 = 0;
0369 });
0370 }
0371
0372 function Change_Marker() { // マーカー変更ボタン押下時の処理
0373 for(i = 0; i <= Marker_count; i++) {
0374 if(SelectedID == Marker_ID[ i ] ) {
0375 Marker_NAM[ i ] = Set_Text;
0376 Marker_ICN[ i ] = L.icon({
0377 iconUrl: Icon_Url,
0378 iconSize: [Icon_W, Icon_H],
0379 iconAnchor : [Icon_AW, Icon_AH],
0380 popupAnchor: [Icon_PW, Icon_PH]
0381 });
0382 }
0383 }
0384 for(i = 0; i <= Lines_Marker_count; i++) {
0385 if(SelectedID == Lines_Marker_ID[ i ] ) {
0386 Lines_NAM[ i ] = Set_Text;
0387 Lines_ICN[ i ] = L.icon({
0388 iconUrl: Icon_Url,
0389 iconSize: [Icon_W, Icon_H],
0390 iconAnchor : [Icon_AW, Icon_AH],
0391 popupAnchor: [Icon_PW, Icon_PH]
0392 });
0393 }
0394 }
0395 for(i = 0; i <= Polygons_Marker_count; i++) {
0396 if(SelectedID == Polygons_Marker_ID[ i ] ) {
0397 Polygons_NAM[ i ] = Set_Text;
0398 Polygons_ICN[ i ] = L.icon({
0399 iconUrl: Icon_Url,
0400 iconSize: [Icon_W, Icon_H],
0401 iconAnchor : [Icon_AW, Icon_AH],
0402 popupAnchor: [Icon_PW, Icon_PH]
0403 });
0404 }
0405 }
0406 Marker_Refresh();
0407 Lines_Marker_Refresh();
0408 Polygons_Marker_Refresh();
0409 }
0410
0411 function Marker_DEL(tempMarker) { // マーカー削除ボタン押下時の処理
0412 var k = 0;
0413 Marker_flag = 0;
0414 Marker_LAT[ Marker_count ] = "";
0415 Marker_LON[ Marker_count ] = "";
0416 Marker_NAM[ Marker_count ] = "";
0417 Marker_LNK[ Marker_count ] = "";
0418 Marker_ICN[ Marker_count ] = "";
0419 Marker_ID[ Marker_count ] = "";
0420 Marker_LAT[ Marker_count + 1 ] = "";
0421 Marker_LON[ Marker_count + 1 ] = "";
0422 Marker_NAM[ Marker_count + 1 ] = "";
0423 Marker_LNK[ Marker_count + 1 ] = "";
0424 Marker_ICN[ Marker_count + 1 ] = "";
0425 Marker_ID[ Marker_count + 1 ] = "";
0426 SelectedID = tempMarker.options.id;
0427 for(i = 0; i <= Marker_count; i++) {
0428 if(SelectedID == Marker_ID[ i ] ) {
0429 for(k = i; k <= Marker_count; k++) {
0430 Marker_LAT[ k ] = Marker_LAT[ k + 1 ];
0431 Marker_LON[ k ] = Marker_LON[ k + 1 ];
0432 Marker_NAM[ k ] = Marker_NAM[ k + 1 ];
0433 Marker_LNK[ k ] = Marker_LNK[ k + 1 ];
0434 Marker_ICN[ k ] = Marker_ICN[ k + 1 ];
0435 Marker_ID[ k ] = Marker_ID[ k + 1 ];
0436 Marker_Drag_flag[ k ] = Marker_Drag_flag[ k + 1 ];
0437 Marker_Drag_info[ k ] = Marker_Drag_info[ k + 1 ];
0438 }
0439 }
0440 }
0441 SelectedID = null;
0442 Marker_Refresh();
0443 Marker_count = Marker_count - 1;
0444 Marker_Refresh();
0445 }
0446
0447 function Lines_Marker_DEL(tempMarker) { // 直線用マーカーの削除ボタン押下時の処理
0448 var k = 0;
0449 Lines_LAT[ Lines_Marker_count ] = "";
0450 Lines_LON[ Lines_Marker_count ] = "";
0451 Lines_NAM[ Lines_Marker_count ] = "";
0452 Lines_LNK[ Lines_Marker_count ] = "";
0453 Lines_ICN[ Lines_Marker_count ] = "";
0454 Lines_ID[ Lines_Marker_count ] = "";
0455 Lines_LAT[ Lines_Marker_count + 1 ] = "";
0456 Lines_LON[ Lines_Marker_count + 1 ] = "";
0457 Lines_NAM[ Lines_Marker_count + 1 ] = "";
0458 Lines_LNK[ Lines_Marker_count + 1 ] = "";
0459 Lines_ICN[ Lines_Marker_count + 1 ] = "";
0460 Lines_ID[ Lines_Marker_count + 1 ] = "";
0461 SelectedID = tempMarker.options.id;
0462 for(i = 0; i <= Lines_Marker_count; i++) {
0463 if(SelectedID == Lines_Marker_ID[ i ] ) {
0464 for(k = i; k <= Lines_Marker_count; k++) {
0465 Lines_LAT[ k ] = Lines_LAT[ k + 1 ];
0466 Lines_LON[ k ] = Lines_LON[ k + 1 ];
0467 Lines_NAM[ k ] = Lines_NAM[ k + 1 ];
0468 Lines_LNK[ k ] = Lines_LNK[ k + 1 ];
0469 Lines_ICN[ k ] = Lines_ICN[ k + 1 ];
0470 Lines_Marker_ID[ k ] = Lines_Marker_ID[ k + 1 ];
0471 Lines_Drag_flag[ k ] = Lines_Drag_flag[ k + 1 ];
0472 Lines_Drag_info[ k ] = Lines_Drag_info[ k + 1 ];
0473 }
0474 }
0475 }
0476 SelectedID = null;
0477 Lines_Marker_Refresh();
0478 Lines_Marker_count = Lines_Marker_count - 1;
0479 Lines_Marker_Refresh();
0480 Leaflet_Lines_Draw();
0481 }
0482
0483 function Polygons_Marker_DEL(tempMarker) { // 多角形用マーカーの削除ボタン押下時の処理
0484 var k = 0;
0485 Polygons_LAT[ Polygons_Marker_count ] = "";
0486 Polygons_LON[ Polygons_Marker_count ] = "";
0487 Polygons_NAM[ Polygons_Marker_count ] = "";
0488 Polygons_LNK[ Polygons_Marker_count ] = "";
0489 Polygons_ICN[ Polygons_Marker_count ] = "";
0490 Polygons_ID[ Polygons_Marker_count ] = "";
0491 Polygons_LAT[ Polygons_Marker_count + 1 ] = "";
0492 Polygons_LON[ Polygons_Marker_count + 1 ] = "";
0493 Polygons_NAM[ Polygons_Marker_count + 1 ] = "";
0494 Polygons_LNK[ Polygons_Marker_count + 1 ] = "";
0495 Polygons_ICN[ Polygons_Marker_count + 1 ] = "";
0496 Polygons_ID[ Polygons_Marker_count + 1 ] = "";
0497 SelectedID = tempMarker.options.id;
0498 for(i = 0; i <= Polygons_Marker_count; i++) {
0499 if(SelectedID == Polygons_Marker_ID[ i ] ) {
0500 for(k = i; k <= Polygons_Marker_count; k++) {
0501 Polygons_LAT[ k ] = Polygons_LAT[ k + 1 ];
0502 Polygons_LON[ k ] = Polygons_LON[ k + 1 ];
0503 Polygons_NAM[ k ] = Polygons_NAM[ k + 1 ];
0504 Polygons_LNK[ k ] = Polygons_LNK[ k + 1 ];
0505 Polygons_ICN[ k ] = Polygons_ICN[ k + 1 ];
0506 Polygons_Marker_ID[ k ] = Polygons_Marker_ID[ k + 1 ];
0507 Polygons_Drag_flag[ k ] = Polygons_Drag_flag[ k + 1 ];
0508 Polygons_Drag_info[ k ] = Polygons_Drag_info[ k + 1 ];
0509 }
0510 }
0511 }
0512 SelectedID = null;
0513 Polygons_Marker_Refresh();
0514 Polygons_Marker_count = Polygons_Marker_count - 1;
0515 Polygons_Marker_Refresh();
0516 Leaflet_Polygons_Draw();
0517 }
0518
0519 function Marker_Refresh() { // マーカー再表示
0520 for(i = 0; i < Layer_404.length; i++) {
0521 if(Layer_404[ i ] != null) {
0522 map_505.removeLayer(Layer_404[ i ]);
0523 }
0524 }
0525 for(i = 0; i < Layer_404_clone.length; i++) {
0526 if(Layer_404_clone[ i ] != null) {
0527 map_505.removeLayer(Layer_404_clone[ i ]);
0528 }
0529 }
0530 for (i = 0; i <= (Marker_count - 1); i++)
0531 {
0532 Temp = i;
0533 Marker_setting();
0534 Marker_set();
0535 Layer_404[ Temp ] = Temp_shape;
0536 Layer_404[ Temp ].addTo(map_505);
0537 Layer_404_clone[ Temp ] = Temp_shape_clone;
0538 Layer_404_clone[ Temp ].addTo(map_505);
0539 }
0540 }
0541
0542 function Lines_Marker_Refresh() { // 直線用マーカー再表示
0543 for(i = 0; i < Layer_505_LM.length; i++) {
0544 if(Layer_505_LM[ i ] != null) {
0545 map_505.removeLayer(Layer_505_LM[ i ]);
0546 }
0547 }
0548 for(i = 0; i < Layer_505_LM_clone.length; i++) {
0549 if(Layer_505_LM_clone[ i ] != null) {
0550 map_505.removeLayer(Layer_505_LM_clone[ i ]);
0551 }
0552 }
0553 for (i = 0; i <= (Lines_Marker_count - 1); i++)
0554 {
0555 Temp = i;
0556 Lines_Marker_setting();
0557 Marker_set();
0558 Layer_505_LM[ Temp ] = Temp_shape;
0559 Layer_505_LM[ Temp ].addTo(map_505);
0560 Layer_505_LM_clone[ Temp ] = Temp_shape_clone;
0561 Layer_505_LM_clone[ Temp ].addTo(map_505);
0562 }
0563 }
0564
0565 function Polygons_Marker_Refresh() { // 多角形用マーカー再表示
0566 for(i = 0; i < Layer_505_PM.length; i++) {
0567 if(Layer_505_PM[ i ] != null) {
0568 map_505.removeLayer(Layer_505_PM[ i ]);
0569 }
0570 }
0571 for(i = 0; i < Layer_505_PM_clone.length; i++) {
0572 if(Layer_505_PM_clone[ i ] != null) {
0573 map_505.removeLayer(Layer_505_PM_clone[ i ]);
0574 }
0575 }
0576 for (i = 0; i <= (Polygons_Marker_count - 1); i++)
0577 {
0578 Temp = i;
0579 Polygons_Marker_setting();
0580 Marker_set();
0581 Layer_505_PM[ Temp ] = Temp_shape;
0582 Layer_505_PM[ Temp ].addTo(map_505);
0583 Layer_505_PM_clone[ Temp ] = Temp_shape_clone;
0584 Layer_505_PM_clone[ Temp ].addTo(map_505);
0585 }
0586 }
0587
0588 function Dragging() { // マーカーをドラッグ時の位置取得
0589 ClickLat = this._latlng.lat;
0590 ClickLon = this._latlng.lng;
0591 SelectedID = this.options.id;
0592 if(SelectedID.slice(0,4) == "Line") {
0593 for(i = 0; i <= Lines_Marker_count; i++) {
0594 if(SelectedID == Lines_Marker_ID[ i ] ) {
0595 Lines_LAT[ i ] = ClickLat;
0596 Lines_LON[ i ] = ClickLon;
0597 }
0598 }
0599 Lines_Marker_Refresh();
0600 Leaflet_Lines_Draw();
0601 } else if(SelectedID.slice(0,7) == "Polygon") {
0602 for(i = 0; i <= Polygons_Marker_count; i++) {
0603 if(SelectedID == Polygons_Marker_ID[ i ] ) {
0604 Polygons_LAT[ i ] = ClickLat;
0605 Polygons_LON[ i ] = ClickLon;
0606 }
0607 }
0608 Polygons_Marker_Refresh();
0609 Leaflet_Polygons_Draw();
0610 } else {
0611 for(i = 0; i <= Marker_count; i++) {
0612 if(SelectedID == Marker_ID[ i ] ) {
0613 Marker_LAT[ i ] = ClickLat;
0614 Marker_LON[ i ] = ClickLon;
0615 }
0616 }
0617 Marker_Refresh();
0618 }
0619 SelectedID = null;
0620 }
0621
0622 function Leaflet_Lines_500() { // 初期設定（直線の設置）
0623 ClickLat = null;
0624 ClickLon = null;
0625 Marker_flag = 0;
0626 Lines_flag = 1;
0627 Polygons_flag = 0;
0628 }
0629
0630 function Leaflet_Lines_501() { // 直線用マーカーの設置
0631 Lines_LAT[ Lines_Marker_count ] = ClickLat;
0632 Lines_LON[ Lines_Marker_count ] = ClickLon;
0633 Lines_NAM[ Lines_Marker_count ] = Set_Text;
0634 Lines_LNK[ Lines_Marker_count ] = Set_Link;
0635 Lines_ICN[ Lines_Marker_count ] = L.icon({
0636 iconUrl: Icon_Url,
0637 iconSize: [Icon_W, Icon_H],
0638 iconAnchor : [Icon_AW, Icon_AH],
0639 popupAnchor: [Icon_PW, Icon_PH]
0640 });
0631 Lines_Marker_ID[ Lines_Marker_count ] = "Line" + Lines_Marker_ID_count;
0642 Lines_Drag_flag[ Lines_Marker_count ] = true;
0643 Lines_Drag_info[ Lines_Marker_count ] = "マウスで移動出来ます。";
0644 Temp = Lines_Marker_count;
0645 Lines_Marker_setting();
0646 Marker_set();
0647 Layer_505_LM[ Temp ] = Temp_shape;
0648 Layer_505_LM[ Temp ].addTo(map_505);
0649 Layer_505_LM_clone[ Temp ] = Temp_shape_clone;
0650 Layer_505_LM_clone[ Temp ].addTo(map_505);
0651 Lines_Marker_count = Lines_Marker_count + 1;
0652 Lines_Marker_ID_count = Lines_Marker_ID_count + 1;
0653 Leaflet_Lines_Draw();
0654 }
0655
0656 function Leaflet_Lines_502() { // 直線マーカーの設置終了
0657 Lines_flag = 0;
0658 Lines_LAT[ Lines_Marker_count ] = "";
0659 Lines_LON[ Lines_Marker_count ] = "";
0660 Lines_NAM[ Lines_Marker_count ] = "";
0661 Lines_LNK[ Lines_Marker_count ] = "";
0662 Lines_ICN[ Lines_Marker_count ] = "";
0663 Lines_ID[ Lines_Marker_count ] = "";
0664 Lines_Marker_count = Lines_Marker_count + 1;
0665 }
0666
0667 function Leaflet_Lines_503() { // 直線と直線用マーカーの全消去
0668 for(i = 0; i < Layer_505_LM.length; i++) {
0669 if(Layer_505_LM[i] != null) {
0670 map_505.removeLayer(Layer_505_LM[i]);
0671 }
0672 }
0673 for(i = 0; i < Layer_505_LM_clone.length; i++) {
0674 if(Layer_505_LM_clone[i] != null) {
0675 map_505.removeLayer(Layer_505_LM_clone[i]);
0676 }
0677 }
0678 for(i = 0; i < Layer_505_L.length; i++) {
0679 if(Layer_505_L[i] != null) {
0680 map_505.removeLayer(Layer_505_L[i]);
0681 }
0682 }
0683 for(i = 0; i < Layer_505_L_clone_01.length; i++) {
0684 if(Layer_505_L_clone_01[i] != null) {
0685 map_505.removeLayer(Layer_505_L_clone_01[i]);
0686 }
0687 }
0688 for(i = 0; i < Layer_505_L_clone_02.length; i++) {
0689 if(Layer_505_L_clone_02[i] != null) {
0690 map_505.removeLayer(Layer_505_L_clone_02[i]);
0691 }
0692 }
0693 Lines_flag = 0;
0694 Lines_count = 0;
0695 Lines_Marker_count = 0;
0696 Lines_shape = new Array();
0697 Lines_shape_clone_01 = new Array();
0698 Lines_shape_clone_02 = new Array();
0699 Lines_LAT = new Array();
0700 Lines_LON = new Array();
0701 Lines_NAM = new Array();
0702 Lines_LNK = new Array();
0703 Lines_ICN = new Array();
0704 }
0705
0706 function Leaflet_Lines_504() { // 直線用マーカーの非表示
0707 for(i = 0; i < Layer_505_LM.length; i++) {
0708 if(Layer_505_LM[i] != null) {
0709 map_505.removeLayer(Layer_505_LM[i]);
0710 }
0711 }
0712 for(i = 0; i < Layer_505_LM_clone.length; i++) {
0713 if(Layer_505_LM_clone[i] != null) {
0714 map_505.removeLayer(Layer_505_LM_clone[i]);
0715 }
0716 }
0717 }
0718
0719 function Leaflet_Lines_505() { // 直線用マーカーの再表示
0720 Lines_Marker_Refresh();
0721 }
0722
0723 function Leaflet_Lines_Draw() { // 直線の描画
0724 for (i = 0; i < Layer_505_L.length; i++) {
0725 if(Layer_505_L[i] != null) {
0726 map_505.removeLayer(Layer_505_L[i]);
0727 }
0728 }
0729 for (i = 0; i < Layer_505_L_clone_01.length; i++) {
0730 if(Layer_505_L_clone_01[i] != null) {
0731 map_505.removeLayer(Layer_505_L_clone_01[i]);
0732 }
0733 }
0734 for (i = 0; i < Layer_505_L_clone_02.length; i++) {
0735 if(Layer_505_L_clone_02[i] != null) {
0736 map_505.removeLayer(Layer_505_L_clone_02[i]);
0737 }
0738 }
0739 var Temp_LON_01 = new Array();
0740 var Temp_LON_02 = new Array();
0741 for(i = 0; i <= (Lines_Marker_count - 1); i++) {
0742 Temp_LON_01[ i ] = Lines_LON[ i ] * 1.0;
0743 Temp_LON_02[ i ] = Lines_LON[ i ] * 1.0;
0744 if(Lines_LON[ i ] * 1.0 <= 0) {
0745 Temp_LON_01[ i ] = Lines_LON[ i ] * 1.0 + 360;
0746 } else {
0747 Temp_LON_02[ i ] = Lines_LON[ i ] * 1.0 - 360;
0748 }
0749 }
0750 for(i = 0; i <= (Lines_Marker_count - 1); i++) {
0751 if( !isNaN( Lines_LAT[ i ] ) && !isNaN( Lines_LAT[ i + 1 ] ) ) {
0752 if( Math.abs(Lines_LON[ i ] - Lines_LON[ i + 1 ]) <= 180 ) {
0753 if( (Lines_LAT[ i ] != 0) || (Lines_LON[ i ] != 0) ) {
0754 if( (Lines_LAT[ i + 1 ] != 0) || (Lines_LON[ i + 1 ] != 0) ) {
0755 Lines_shape[ Lines_count ] = L.polyline([[ Lines_LAT[ i ], Lines_LON[ i ] ], [ Lines_LAT[ i + 1 ], Lines_LON[ i + 1 ] ]],
0756 { color: "#"+Selected_Color,
0757 weight: Line_W,
0758 opacity: Selected_Opacity,
0759 dashArray: Line_Type
0760 });
0761 Layer_505_L[ Lines_count ] = Lines_shape[ Lines_count ];
0762 Layer_505_L[ Lines_count ].addTo(map_505);
0763 }
0764 }
0765 }
0766 if( Math.abs(Temp_LON_01[ i ] - Temp_LON_01[ i + 1 ]) <= 180 ) {
0767 if( (Lines_LAT[ i ] != 0) || (Temp_LON_01[ i ] != 0) ) {
0768 if( (Lines_LAT[ i + 1 ] != 0) || (Temp_LON_01[ i + 1 ] != 0) ) {
0769 Lines_shape_clone_01[ Lines_count ] = L.polyline([[ Lines_LAT[ i ], Temp_LON_01[ i ] ], [ Lines_LAT[ i + 1 ], Temp_LON_01[ i + 1 ] ]],
0770 { color: "#"+Selected_Color,
0771 weight: Line_W,
0772 opacity: Selected_Opacity,
0773 dashArray: Line_Type
0774 });
0775 Layer_505_L_clone_01[ Lines_count ] = Lines_shape_clone_01[ Lines_count ];
0776 Layer_505_L_clone_01[ Lines_count ].addTo(map_505);
0777 }
0778 }
0779 }
0780 if( Math.abs(Temp_LON_02[ i ] - Temp_LON_02[ i + 1 ]) <= 180 ) {
0781 if( (Lines_LAT[ i ] != 0) || (Temp_LON_02[ i ] != 0) ) {
0782 if( (Lines_LAT[ i + 1 ] != 0) || (Temp_LON_02[ i + 1 ] != 0) ) {
0783 Lines_shape_clone_02[ Lines_count ] = L.polyline([[ Lines_LAT[ i ], Temp_LON_02[ i ] ], [ Lines_LAT[ i + 1 ], Temp_LON_02[ i + 1 ] ]],
0784 { color: "#"+Selected_Color,
0785 weight: Line_W,
0786 opacity: Selected_Opacity,
0787 dashArray: Line_Type
0788 });
0789 Layer_505_L_clone_02[ Lines_count ] = Lines_shape_clone_02[ Lines_count ];
0790 Layer_505_L_clone_02[ Lines_count ].addTo(map_505);
0791 }
0792 }
0793 }
0794 Lines_count = Lines_count + 1;
0795 }
0796 }
0797 }
0798
0799 function Leaflet_Polygons_500() { // 初期設定（多角形の設置）
0800 ClickLat = null;
0801 ClickLon = null;
0802 Marker_flag = 0;
0803 Lines_flag = 0;
0804 Polygons_flag = 1;
0805 }
0806
0807 function Leaflet_Polygons_501() { // 多角形マーカーの設置
0808 Polygons_LAT[ Polygons_Marker_count ] = ClickLat;
0809 Polygons_LON[ Polygons_Marker_count ] = ClickLon;
0810 Polygons_NAM[ Polygons_Marker_count ] = Set_Text;
0811 Polygons_LNK[ Polygons_Marker_count ] = Set_Link;
0812 Polygons_ICN[ Polygons_Marker_count ] = L.icon({
0813 iconUrl: Icon_Url,
0814 iconSize: [Icon_W, Icon_H],
0815 iconAnchor : [Icon_AW, Icon_AH],
0816 popupAnchor: [Icon_PW, Icon_PH]
0817 });
0818 Polygons_Marker_ID[ Polygons_Marker_count ] = "Polygon" + Polygons_Marker_ID_count;
0819 Polygons_Drag_flag[ Polygons_Marker_count ] = true;
0820 Polygons_Drag_info[ Polygons_Marker_count ] = "マウスで移動出来ます。";
0821 Temp = Polygons_Marker_count;
0822 Polygons_Marker_setting();
0823 Marker_set();
0824 Layer_505_PM[ Temp ] = Temp_shape;
0825 Layer_505_PM[ Temp ].addTo(map_505);
0826 Layer_505_PM_clone[ Temp ] = Temp_shape_clone;
0827 Layer_505_PM_clone[ Temp ].addTo(map_505);
0828 Polygons_Marker_count = Polygons_Marker_count + 1;
0829 Polygons_Marker_ID_count = Polygons_Marker_ID_count + 1;
0830 }
0831
0832 function Leaflet_Polygons_502() { // 多角形マーカーの設置終了
0833 Polygons_flag = 0;
0834 Polygons_LAT[ Polygons_Marker_count ] = "";
0835 Polygons_LON[ Polygons_Marker_count ] = "";
0836 Polygons_NAM[ Polygons_Marker_count ] = "";
0837 Polygons_LNK[ Polygons_Marker_count ] = "";
0838 Polygons_ICN[ Polygons_Marker_count ] = "";
0839 Polygons_ID[ Polygons_Marker_count ] = "";
0840 Polygons_Marker_count = Polygons_Marker_count + 1;
0841 Leaflet_Polygons_Draw();
0842 }
0843
0844 function Leaflet_Polygons_503() { // 多角形と多角形用マーカーの全消去
0845 for(i = 0; i < Layer_505_PM.length; i++) {
0846 if(Layer_505_PM[i] != null) {
0847 map_505.removeLayer(Layer_505_PM[i]);
0848 }
0849 }
0850 for(i = 0; i < Layer_505_PM_clone.length; i++) {
0851 if(Layer_505_PM_clone[i] != null) {
0852 map_505.removeLayer(Layer_505_PM_clone[i]);
0853 }
0854 }
0855 for(i = 0; i < Layer_505_P.length; i++) {
0856 if(Layer_505_P[i] != null) {
0857 map_505.removeLayer(Layer_505_P[i]);
0858 }
0859 }
0860 for(i = 0; i < Layer_505_P_clone_01.length; i++) {
0861 if(Layer_505_P_clone_01[i] != null) {
0862 map_505.removeLayer(Layer_505_P_clone_01[i]);
0863 }
0864 }
0865 for(i = 0; i < Layer_505_P_clone_02.length; i++) {
0866 if(Layer_505_P_clone_02[i] != null) {
0867 map_505.removeLayer(Layer_505_P_clone_02[i]);
0868 }
0869 }
0870 Polygons_flag = 0;
0871 Polygons_count = 0;
0872 Polygons_Marker_count = 0;
0873 Polygons_shape = new Array();
0874 Polygons_LAT = new Array();
0875 Polygons_LON = new Array();
0876 Polygons_NAM = new Array();
0877 Polygons_LNK = new Array();
0878 Polygons_ICN = new Array();
0879 }
0880
0881 function Leaflet_Polygons_504() { // 多角形用マーカーの非表示
0882 for(i = 0; i < Layer_505_PM.length; i++) {
0883 if(Layer_505_PM[i] != null) {
0884 map_505.removeLayer(Layer_505_PM[i]);
0885 }
0886 }
0887 for(i = 0; i < Layer_505_PM_clone.length; i++) {
0888 if(Layer_505_PM_clone[i] != null) {
0889 map_505.removeLayer(Layer_505_PM_clone[i]);
0890 }
0891 }
0892 }
0893
0894 function Leaflet_Polygons_505() { // 多角形用マーカーの再表示
0895 Polygons_Marker_Refresh();
0896 }
0897
0898 function Leaflet_Polygons_Draw() { // 多角形の描画
0889 if(Polygons_count != 0) {
0900 for (i = 0; i < Layer_505_P.length; i++) {
0901 if(Layer_505_P[i] != null) {
0902 map_505.removeLayer(Layer_505_P[i]);
0903 }
0904 }
0905 for (i = 0; i < Layer_505_P_clone_01.length; i++) {
0906 if(Layer_505_P_clone_01[i] != null) {
0907 map_505.removeLayer(Layer_505_P_clone_01[i]);
0908 }
0909 }
0910 for (i = 0; i < Layer_505_P_clone_02.length; i++) {
0911 if(Layer_505_P_clone_02[i] != null) {
0912 map_505.removeLayer(Layer_505_P_clone_02[i]);
0913 }
0914 }
0915 }
0916 var Temp_LAT = new Array();
0917 var Temp_LON = new Array();
0918 var Temp_LON_clone_01 = new Array();
0919 var Temp_LON_clone_02 = new Array();
0920 var Temp_flag = new Array();
0921 var j = 0;
0922 Polygons_shape = new Array();
0923 Polygons_shape_clone_01 = new Array();
0924 Polygons_shape_clone_02 = new Array();
0925 Polygons_pos = new Array();
0926 Polygons_pos_clone_01 = new Array();
0927 Polygons_pos_clone_02 = new Array();
0928 Temp_flag[ 0 ] = 0;
0929 for(i = 0; i <= (Polygons_LAT.length - 1); i++) {
0930 if( isNaN( Polygons_LAT[ i ]) || isNaN( Polygons_LON[ i ] ) || ( (Polygons_LAT[ i ] * 1.0 == 0) && (Polygons_LON[ i ] * 1.0 == 0) ) ) {
0931 j = j + 1;
0932 Temp_flag[ j ] = 0;
0933 } else {
0934 if( Math.abs(Polygons_LON[ i ] * 1.0 - Polygons_LON[ i + 1 ] * 1.0 ) > 180) {
0935 Temp_flag[ j ] = Temp_flag[ j ] + 1;
0936 }
0937 }
0938 }
0939 j = 0;
0940 for(i = 0; i <= (Polygons_LAT.length - 1); i++) {
0941 Temp_LAT[ i ] = Polygons_LAT[ i ];
0942 Temp_LON[ i ] = Polygons_LON[ i ];
0943 Temp_LON_clone_01[ i ] = Polygons_LON[ i ];
0944 Temp_LON_clone_02[ i ] = Polygons_LON[ i ];
0945 if( isNaN( Polygons_LAT[ i ]) || isNaN( Polygons_LON[ i ] ) || ( (Polygons_LAT[ i ] * 1.0 == 0) && (Polygons_LON[ i ] * 1.0 == 0) ) ) {
0946 j = j + 1;
0947 } else {
0948 if(Temp_flag[ j ] != 0) {
0949 if(Polygons_LON[ i ] * 1.0 < 0) {
0950 Temp_LON[ i ] = Polygons_LON[ i ] * 1.0 + 360;
0951 }
0952 }
0953 }
0954 Temp_LON_clone_01[ i ] = Temp_LON[ i ] * 1.0 + 360;
0955 Temp_LON_clone_02[ i ] = Temp_LON[ i ] * 1.0 - 360;
0956 }
0957 Polygons_pos[ 0 ] = [];
0958 Polygons_pos_clone_01[ 0 ] = [];
0949 Polygons_pos_clone_02[ 0 ] = [];
0960 j = 0;
0961 for(i = 0; i <= (Temp_LAT.length - 1); i++) {
0962 if( isNaN( Polygons_LAT[ i ]) || isNaN( Polygons_LON[ i ] ) || ( (Polygons_LAT[ i ] * 1.0 == 0) && (Polygons_LON[ i ] * 1.0 == 0) ) ) {
0963 j = j + 1;
0964 Polygons_pos[ j ] = [];
0965 Polygons_pos_clone_01[ j ] = [];
0966 Polygons_pos_clone_02[ j ] = [];
0967 } else {
0968 Temp = Polygons_pos[ j ].push([ Temp_LAT[ i ], Temp_LON[ i ] ]);
0969 Temp = Polygons_pos_clone_01[ j ].push([ Temp_LAT[ i ], (Temp_LON_clone_01[ i ]) ]);
0970 Temp = Polygons_pos_clone_02[ j ].push([ Temp_LAT[ i ], (Temp_LON_clone_02[ i ]) ]);
0971 }
0972 }
0973 j = 0;
0974 for(i = 0; i <= (Polygons_pos.length - 1); i++) {
0975 if(Polygons_pos[ i ].length >= 3) {
0976 Polygons_shape[ j ] = L.polygon([ Polygons_pos[ i ] ],
0977 { color: "#"+Selected_Color,
0978 weight: Line_W,
0979 opacity: Selected_Opacity,
0980 dashArray: Line_Type,
0981 fillColor: "#" + Selected_Fill_Color,
0982 fillopacity: Selected_Fill_Opacity
0983 });
0984 j = j + 1;
0985 }
0986 }
0987 for(i = 0; i <= (Polygons_pos_clone_01.length - 1); i++) {
0988 if(Polygons_pos_clone_01[ i ].length >= 3) {
0989 Polygons_shape_clone_01[ i ] = L.polygon([ Polygons_pos_clone_01[ i ] ],
0990 { color: "#"+Selected_Color,
0991 weight: Line_W,
0992 opacity: Selected_Opacity,
0993 dashArray: Line_Type,
0994 fillColor: "#" + Selected_Fill_Color,
0995 fillopacity: Selected_Fill_Opacity
0996 });
0997 }
0998 }
0999 for(i = 0; i <= (Polygons_pos_clone_02.length - 1); i++) {
1000 if(Polygons_pos_clone_02[ i ].length >= 3) {
1001 Polygons_shape_clone_02[ i ] = L.polygon([ Polygons_pos_clone_02[ i ] ],
1002 { color: "#"+Selected_Color,
1003 weight: Line_W,
1004 opacity: Selected_Opacity,
1005 dashArray: Line_Type,
1006 fillColor: "#" + Selected_Fill_Color,
1007 fillopacity: Selected_Fill_Opacity
1008 });
1009 }
1010 }
1011 for(i = 0; i <= (Polygons_shape.length - 1); i++) {
1012 if(Polygons_shape[ i ] != null) {
1013 Layer_505_P[ i ] = Polygons_shape[ i ];
1014 Layer_505_P[ i ].addTo(map_505);
1015 }
1016 }
1017 for(i = 0; i <= (Polygons_shape_clone_01.length - 1); i++) {
1018 if(Polygons_shape_clone_01[ i ] != null) {
1019 Layer_505_P_clone_01[ i ] = Polygons_shape_clone_01[ i ];
1020 Layer_505_P_clone_01[ i ].addTo(map_505);
1021 }
1022 }
1023 for(i = 0; i <= (Polygons_shape_clone_02.length - 1); i++) {
1024 if(Polygons_shape_clone_02[ i ] != null) {
1025 Layer_505_P_clone_02[ i ] = Polygons_shape_clone_02[ i ];
1026 Layer_505_P_clone_02[ i ].addTo(map_505);
1027 }
1028 }
1029 Polygons_count = Polygons_count + 1;
1030 }
1031
1032 function Leaflet_Circles_500() { // 円の設置
1033 Dialog_004();
1034 }
1035
1036 function Leaflet_Circles_501() { // 円の全消去
1037 for(i = 0; i < Layer_505_C.length; i++) {
1038 if(Layer_505_C[i] != null) {
1039 map_505.removeLayer(Layer_505_C[i]);
1040 }
1041 }
1042 for(i = 0; i < Layer_505_C_clone.length; i++) {
1043 if(Layer_505_C_clone[i] != null) {
1044 map_505.removeLayer(Layer_505_C_clone[i]);
1045 }
1046 }
1047 Circles_count = 0;
1048 Circles_shape = new Array();
1049 Circles_shape_clone = new Array();
1050 Circles_LAT = new Array();
1051 Circles_LON = new Array();
1052 Circles_RAD = new Array();
1053 Circles_NAM = new Array();
1054 Circles_LNK = new Array();
1055 }
1056
1057 function Circles_Set(Temp) { // 円の表示
1058 if(( Circles_RAD[ Temp ] * 1.0 == 0) || isNaN(Circles_RAD[ Temp ]) ) {
1059 alert("データ名： " + Circles_NAM[ Temp ] + "\n" + "円の直径が指定されていません！");
1060 return;
1061 }
1062 Circles_shape[ Temp ] = L.circle([ Circles_LAT[ Temp ], Circles_LON[ Temp ] ], Circles_RAD[ Temp ],
1063 { color: "#" + Selected_Color,
1064 fillColor: "#" + Selected_Fill_Color,
1065 opacity: Selected_Opacity,
1066 weight: Line_W,
1067 fillopacity: Selected_Fill_Opacity,
1068 dashArray: Line_Type,
1069 id: Circles_ID[ Temp ]
1070 }).bindPopup(Circles_NAM[ Temp ] + "<BR> <input type='button' value='Delete this circle' class='circle-delete-button'/>");
1071 if(Circles_LON[ Temp ] < 0) {
1072 Circles_shape_clone[ Temp ] = L.circle([ Circles_LAT[ Temp ], (Circles_LON[ Temp ] + 360) ], Circles_RAD[ Temp ],
1073 { color: "#" + Selected_Color,
1074 fillColor: "#" + Selected_Fill_Color,
1075 opacity: Selected_Opacity,
1076 weight: Line_W,
1077 fillopacity: Selected_Fill_Opacity,
1078 dashArray: Line_Type,
1079 id: Circles_ID[ Temp ]
1080 }).bindPopup(Circles_NAM[ Temp ] + "<BR> <input type='button' value='Delete this circle' class='circle-delete-button'/>");
1081 } else {
1082 Circles_shape_clone[ Temp ] = L.circle([ Circles_LAT[ Temp ], (Circles_LON[ Temp ] - 360) ], Circles_RAD[ Temp ],
1083 { color: "#" + Selected_Color,
1084 fillColor: "#" + Selected_Fill_Color,
1085 opacity: Selected_Opacity,
1086 weight: Line_W,
1087 fillopacity: Selected_Fill_Opacity,
1088 dashArray: Line_Type,
1089 id: Circles_ID[ Temp ]
1090 }).bindPopup(Circles_NAM[ Temp ] + "<BR> <input type='button' value='Delete this circle' class='circle-delete-button'/>");
1091 }
1092 Layer_505_C[ Temp ] = Circles_shape[ Temp ].on('popupopen', onPopupCircle );
1093 Layer_505_C[ Temp ].addTo(map_505);
1094 Layer_505_C_clone[ Temp ] = Circles_shape_clone[ Temp ].on('popupopen', onPopupCircle );
1095 Layer_505_C_clone[ Temp ].addTo(map_505);
1096 }
1097
1098 function onPopupCircle() { // 円の選択削除
1099 var tempFigure = this;
1100 var k = 0;
1101 Circles_LAT[ Circles_count ] = "";
1102 Circles_LON[ Circles_count ] = "";
1103 Circles_RAD[ Circles_count ] = "";
1104 Circles_NAM[ Circles_count ] = "";
1105 Circles_LNK[ Circles_count ] = "";
1106 Circles_ID[ Circles_count ] = "";
1107 Circles_LAT[ Circles_count + 1 ] = "";
1108 Circles_LON[ Circles_count + 1 ] = "";
1109 Circles_RAD[ Circles_count + 1 ] = "";
1110 Circles_NAM[ Circles_count + 1 ] = "";
1111 Circles_LNK[ Circles_count + 1 ] = "";
1112 Circles_ID[ Circles_count + 1 ] = "";
1113 SelectedID = tempFigure.options.id;
1114 $(".circle-delete-button:visible").click(function () {
1115 for(i = 0; i <= Circles_count; i++) {
1116 if(SelectedID == Circles_ID[ i ] ) {
1117 for(k = i; k <= Circles_count; k++) {
1118 Circles_LAT[ k ] = Circles_LAT[ k + 1 ];
1119 Circles_LON[ k ] = Circles_LON[ k + 1 ];
1120 Circles_RAD[ k ] = Circles_RAD[ k + 1 ];
1121 Circles_NAM[ k ] = Circles_NAM[ k + 1 ];
1122 Circles_LNK[ k ] = Circles_LNK[ k + 1 ];
1123 Circles_ID[ k ] = Circles_ID[ k + 1 ];
1124 Circles_Drag_flag[ k ] = Circles_Drag_flag[ k + 1 ];
1125 Circles_Drag_info[ k ] = Circles_Drag_info[ k + 1 ];
1126 }
1127 }
1128 }
1129 SelectedID = null;
1130 Circles_count = Circles_count - 1;
1131 Circles_Refresh();
1132 });
1133 }
1134
1135 function Circles_Refresh() { // 円の再描画
1136 for(i = 0; i < Layer_505_C.length; i++) {
1137 if(Layer_505_C[ i ] != null) {
1138 map_505.removeLayer(Layer_505_C[ i ]);
1139 }
1140 }
1141 for(i = 0; i < Layer_505_C_clone.length; i++) {
1142 if(Layer_505_C_clone[ i ] != null) {
1143 map_505.removeLayer(Layer_505_C_clone[ i ]);
1144 }
1145 }
1146 for (i = 0; i <= (Circles_count - 1); i++)
1147 {
1148 Temp = i;
1149 Circles_Set(Temp);
1150 }
1151 }
1152
1153 function Leaflet_CSV_510() { // 直線データの保存（CSV形式）
1154 for (i = 0; i <= (Lines_LON.length - 1); i++) {
1155 if( !isNaN(Lines_LON[ i ]) ) {
1156 while( (Lines_LON[ i ] * 1.0) < -180) {
1157 Lines_LON[ i ] = (Lines_LON[ i ] * 1.0) + 360;
1158 }
1159 while( (Lines_LON[ i ] * 1.0) > 180) {
1160 Lines_LON[ i ] = (Lines_LON[ i ] * 1.0) - 360;
1161 }
1162 }
1163 }
1164 if(Lines_LAT[ 0 ] == "LAT(deg.)") {
1165 var CSV_content = [];
1166 } else {
1167 var CSV_content = "LAT(deg.),LONG(deg.),Name(by utf-8),Link,\r\n";
1168 }
1169 const aTag = document.createElement('a');
1170 aTag.download = "CSV_Line_Data.csv";
1171 var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
1172 Temp = Lines_LAT.length - 1;
1173 for ( i = 0; i < Temp; i++ ) {
1174 CSV_content = CSV_content + Lines_LAT[ i ] + "," + Lines_LON[ i ] + "," + Lines_NAM[ i ] + "," + Lines_LNK[ i ] + ",\r\n";
1175 }
1176 var blob = new Blob([ bom, CSV_content ], { "type": "text/csv"});
1177 if(window.navigator.msSaveBlob) {
1178 window.navigator.msSaveBlob(blob, aTag.download); // for IE
1179 } else if (window.URL && window.URL.createObjectURL) {
1180 aTag.href = window.URL.createObjectURL(blob); // for FireFox
1181 document.body.appendChild(aTag);
1182 aTag.click();
1183 document.body.removeChild(aTag);
1184 } else if (window.webkitURL && window.webkitURL.createObject) {
1185 aTag.href = (window.URL || window.webkitURL).createObjectURL(blob); // for Chrome
1186 aTag.click();
1187 } else {
1188 alert("保存に失敗しました！");
1189 }
1190 }
1191
1192 function Leaflet_CSV_511() { // 多角形データの保存（CSV形式）
1193 for (i = 0; i <= (Polygons_LON.length - 1); i++) {
1194 if( !isNaN(Polygons_LON[ i ]) ) {
1195 while( (Polygons_LON[ i ] * 1.0) < -180) {
1196 Polygons_LON[ i ] = (Polygons_LON[ i ] * 1.0) + 360;
1197 }
1198 while( (Polygons_LON[ i ] * 1.0) > 180) {
1199 Polygons_LON[ i ] = (Polygons_LON[ i ] * 1.0) - 360;
1200 }
1201 }
1202 }
1203 if(Polygons_LAT[ 0 ] == "LAT(deg.)") {
1204 var CSV_content = [];
1205 } else {
1206 var CSV_content = "LAT(deg.),LONG(deg.),Name(by utf-8),Link,\r\n";
1207 }
1208 const aTag = document.createElement('a');
1209 aTag.download = "CSV_Polygon_Data.csv";
1210 var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
1211 Temp = Polygons_LAT.length - 1;
1212 for ( i = 0; i < Temp; i++ ) {
1213 CSV_content = CSV_content + Polygons_LAT[ i ] + "," + Polygons_LON[ i ] + "," + Polygons_NAM[ i ] + "," + Polygons_LNK[ i ] + ",\r\n";
1214 }
1215 var blob = new Blob([ bom, CSV_content ], { "type": "text/csv"});
1216 if(window.navigator.msSaveBlob) {
1217 window.navigator.msSaveBlob(blob, aTag.download); // for IE
1218 } else if (window.URL && window.URL.createObjectURL) {
1219 aTag.href = window.URL.createObjectURL(blob); // for FireFox
1220 document.body.appendChild(aTag);
1221 aTag.click();
1222 document.body.removeChild(aTag);
1223 } else if (window.webkitURL && window.webkitURL.createObject) {
1224 aTag.href = (window.URL || window.webkitURL).createObjectURL(blob); // for Chrome
1225 aTag.click();
1226 } else {
1227 alert("保存に失敗しました！");
1228 }
1229 }
1230
1231 function Leaflet_CSV_512() { // 円データの保存（CSV形式）
1232 for (i = 0; i <= (Circles_LON.length -1); i++) {
1233 if( !isNaN(Circles_LON[ i ]) ) {
1234 while( (Circles_LON[ i ] * 1.0) < -180) {
1235 Circles_LON[ i ] = (Circles_LON[ i ] * 1.0) + 360;
1236 }
1237 while( (Circles_LON[ i ] * 1.0) > 180) {
1238 Circles_LON[ i ] = (Circles_LON[ i ] * 1.0) - 360;
1239 }
1240 }
1241 }
1242 if(Circles_LAT[ 0 ] == "LAT(deg.)") {
1243 var CSV_content = [];
1244 } else {
1245 var CSV_content = "LAT(deg.),LONG(deg.),Name(by utf-8),Link,Radius,\r\n";
1246 }
1247 const aTag = document.createElement('a');
1248 aTag.download = "CSV_Circle_Data.csv";
1249 var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
1250 Temp = Circles_LAT.length - 1;
1251 for ( i = 0; i <= Temp; i++ ) {
1252 CSV_content = CSV_content + Circles_LAT[ i ] + "," + Circles_LON[ i ] + "," + Circles_NAM[ i ] + "," + Circles_LNK[ i ] + "," + Circles_RAD[ i ] + ",\r\n";
1253 }
1254 var blob = new Blob([ bom, CSV_content ], { "type": "text/csv"});
1255 if(window.navigator.msSaveBlob) {
1256 window.navigator.msSaveBlob(blob, aTag.download); // for IE
1257 } else if (window.URL && window.URL.createObjectURL) {
1258 aTag.href = window.URL.createObjectURL(blob); // for FireFox
1259 document.body.appendChild(aTag);
1260 aTag.click();
1261 document.body.removeChild(aTag);
1262 } else if (window.webkitURL && window.webkitURL.createObject) {
1263 aTag.href = (window.URL || window.webkitURL).createObjectURL(blob); // for Chrome
1264 aTag.click();
1265 } else {
1266 alert("保存に失敗しました！");
1267 }
1268 }
1269
1270 function CSV_Markers() { // CSVデータのマーカー表示
1271 CSV_Check();
1272 for (i = 0; i <= (Data_CSV.length - 1); i++) {
1273 Marker_LAT[ Marker_count ] = Data_CSV[i][0];
1274 Marker_LON[ Marker_count ] = Data_CSV[i][1];
1275 Marker_NAM[ Marker_count ] = Data_CSV[i][2];
1276 Marker_LNK[ Marker_count ] = Data_CSV[i][3];
1277 Marker_ICN[ Marker_count ] = L.icon({
1278 iconUrl: Icon_Url,
1279 iconSize: [Icon_W, Icon_H],
1280 iconAnchor : [Icon_AW, Icon_AH],
1281 popupAnchor: [Icon_PW, Icon_PH]
1282 });
1283 Marker_ID[ Marker_count ] = "Marker" + Marker_ID_count;
1284 Marker_Drag_flag[ Marker_count ] = false;
1285 Marker_Drag_info[ Marker_count ] = "移動出来ません。";
1286 if( Data_CSV[i][0] != "" ) {
1287 if( !isNaN( Data_CSV[i][0] ) ) {
1288 Temp = Marker_count;
1289 Marker_setting();
1290 Marker_set();
1291 Layer_404[ Temp ] = Temp_shape;
1292 Layer_404[ Temp ].addTo(map_505);
1293 Layer_404_clone[ Temp ] = Temp_shape_clone;
1294 Layer_404_clone[ Temp ].addTo(map_505);
1295 }
1296 }
1297 Marker_count = Marker_count + 1;
1298 Marker_ID_count = Marker_ID_count + 1;
1299 }
1300 Marker_count = Marker_count - 1;
1301 }
1302
1303 function CSV_Lines() { // CSVデータの直線表示
1304 CSV_Check();
1305 for (i = 0; i <= (Data_CSV.length - 1); i++) {
1306 Lines_LAT[ Lines_Marker_count ] = Data_CSV[i][0];
1307 Lines_LON[ Lines_Marker_count ] = Data_CSV[i][1];
1308 Lines_NAM[ Lines_Marker_count ] = Data_CSV[i][2];
1309 Lines_LNK[ Lines_Marker_count ] = Data_CSV[i][3];
1310 Lines_ICN[ Lines_Marker_count ] = L.icon({
1311 iconUrl: Icon_Url,
1312 iconSize: [Icon_W, Icon_H],
1313 iconAnchor : [Icon_AW, Icon_AH],
1314 popupAnchor: [Icon_PW, Icon_PH]
1315 });
1316 Lines_Marker_ID[ Lines_Marker_count ] = "Lines" + Lines_Marker_ID_count;
1317 Lines_Drag_flag[ Lines_Marker_count ] = false;
1318 Lines_Drag_info[ Lines_Marker_count ] = "移動出来ません。";
1319 if( !isNaN( Lines_LAT[ Lines_Marker_count ] ) ) {
1320 Temp = Lines_Marker_count;
1321 Lines_Marker_setting();
1322 Marker_set();
1323 Layer_505_LM[ Temp ] = Temp_shape;
1324 Layer_505_LM[ Temp ].addTo(map_505);
1325 Layer_505_LM_clone[ Temp ] = Temp_shape_clone;
1326 Layer_505_LM_clone[ Temp ].addTo(map_505);
1327 Lines_Marker_count = Lines_Marker_count + 1;
1328 Lines_Marker_ID_count = Lines_Marker_ID_count + 1;
1329 } else {
1330 Lines_Marker_count = Lines_Marker_count + 1;
1331 Lines_Marker_ID_count = Lines_Marker_ID_count + 1;
1332 }
1333 }
1334 Leaflet_Lines_Draw();
1335 }
1336
1337 function CSV_Polygons() { // CSVデータの多角形表示
1338 CSV_Check();
1339 for (i = 0; i <= (Data_CSV.length - 1); i++) {
1340 Polygons_LAT[ Polygons_Marker_count ] = Data_CSV[i][0];
1341 Polygons_LON[ Polygons_Marker_count ] = Data_CSV[i][1];
1342 Polygons_NAM[ Polygons_Marker_count ] = Data_CSV[i][2];
1343 Polygons_LNK[ Polygons_Marker_count ] = Data_CSV[i][3];
1344 Polygons_ICN[ Polygons_Marker_count ] = L.icon({
1345 iconUrl: Icon_Url,
1346 iconSize: [Icon_W, Icon_H],
1347 iconAnchor : [Icon_AW, Icon_AH],
1348 popupAnchor: [Icon_PW, Icon_PH]
1349 });
1350 Polygons_Marker_ID[ Polygons_Marker_count ] = "Polygon" + Polygons_Marker_ID_count;
1351 Polygons_Drag_flag[ Polygons_Marker_count ] = false;
1352 Polygons_Drag_info[ Polygons_Marker_count ] = "移動出来ません。";
1353 if( !isNaN( Polygons_LAT[ Polygons_Marker_count ] ) ) {
1354 Temp = Polygons_Marker_count;
1355 Polygons_Marker_setting();
1356 Marker_set();
1357 Layer_505_PM[ Temp ] = Temp_shape;
1358 Layer_505_PM[ Temp ].addTo(map_505);
1359 Layer_505_PM_clone[ Temp ] = Temp_shape_clone;
1360 Layer_505_PM_clone[ Temp ].addTo(map_505);
1361 Polygons_Marker_count = Polygons_Marker_count + 1;
1362 Polygons_Marker_ID_count = Polygons_Marker_ID_count + 1;
1363 } else {
1364 Polygons_Marker_count = Polygons_Marker_count + 1;
1365 Polygons_Marker_ID_count = Polygons_Marker_ID_count + 1;
1366 }
1367 }
1368 Leaflet_Polygons_Draw();
1369 }
1370
1371 function CSV_Circles() { // CSVデータの円表示
1372 CSV_Check();
1373 for (i = 0; i <= (Data_CSV.length - 1); i++) {
1374 Circles_LAT[ Circles_count ] = Data_CSV[i][0] * 1.0;
1375 Circles_LON[ Circles_count ] = Data_CSV[i][1] * 1.0;
1376 Circles_NAM[ Circles_count ] = Data_CSV[i][2];
1377 Circles_LNK[ Circles_count ] = Data_CSV[i][3];
1378 Circles_RAD[ Circles_count ] = Data_CSV[i][4] * 1.0;
1379 Circles_ID[ Circles_count ] = "Circle" + Circles_ID_count;
1380 Circles_Drag_flag[ Circles_count ] = false;
1381 Circles_Drag_info[ Circles_count ] = "移動出来ません。";
1382 if ( !isNaN( Circles_LAT[ Circles_count ] ) ) {
1383 if ( (Circles_LAT[ Circles_count ] != 0) && (Circles_LON[ Circles_count ] != 0)) {
1384 Circles_Set( Circles_count );
1385 Circles_count = Circles_count + 1;
1386 Circles_ID_count = Circles_ID_count + 1;
1387 }
1388 }
1389 }
1390 }
1391
1392 function CSV_Check() { // CSVデータの範囲制限
1393 for (i = 0; i <= (Data_CSV.length - 1); i++) {
1394 if((Data_CSV[i][0] * 1.0) > 90) {
1395 Data_CSV[i][0] = 90;
1396 }
1397 if((Data_CSV[i][0] * 1.0) < -90) {
1398 Data_CSV[i][0] = -90;
1399 }
1400 while( (Data_CSV[i][1] * 1.0) < -180) {
1401 Data_CSV[i][1] = Data_CSV[i][1] * 1.0 + 360;
1402 }
1403 while( (Data_CSV[i][1] * 1.0) > 180) {
1404 Data_CSV[i][1] = Data_CSV[i][1] * 1.0 - 360;
1405 }
1406 }
1407 }
1408
1409 </script>
1410 </head>
1411 <body onload="init()">
1412 <nav id="menu-wrap" style=" z-index: 1000;">
1413 <ul id="menu" style="width: 98%;">
1414 <li><a href="#">マーカー設置</a>
1415 <ul>
1416 <li><a href="#" onclick = "Dialog_001()">マーカーのスタイル設定</a></li>
1417 <li><a href="#" onclick = "Leaflet_Marker_400()">マーカー単独設置 </a></li>
1418 <li><a href="#" onclick = "Leaflet_Marker_402()">マーカー連続設置 </a></li>
1419 <li><a href="#" onclick = "Leaflet_Marker_404()">マーカー連続設置終了 </a></li>
1420 <li><a href="#" onclick = "Leaflet_Marker_405()">マーカー全消去 </a></li>
1421 <li><a href="#" onclick = "Leaflet_Marker_406()">マーカー保存（CSV形式） </a></li>
1422 <li><a href="#" onclick = "Leaflet_Marker_407()">マーカー読込（CSV形式） </a></li>
1423 </ul>
1424 </li>
1425 <li><a href="#">図形の設置</a>
1426 <ul>
1427 <li><a href="#" onclick = "Dialog_001()">マーカーのスタイル設定</a></li>
1428 <li><a href="#" onclick = "Dialog_003()">線のスタイル設定</a></li>
1429 <li><a href="#">---------------------------------------------</a></li>
1430 <li><a href="#" onclick = "Leaflet_Lines_500()">直線の設置 </a></li>
1431 <li><a href="#" onclick = "Leaflet_Lines_502()">直線の設置終了 </a></li>
1432 <li><a href="#" onclick = "Leaflet_Lines_503()">直線の全消去 </a></li>
1433 <li><a href="#" onclick = "Leaflet_Lines_504()">直線用マーカー非表示 </a></li>
1434 <li><a href="#" onclick = "Leaflet_Lines_505()">直線用マーカー再表示 </a></li>
1435 <li><a href="#">---------------------------------------------</a></li>
1436 <li><a href="#" onclick = "Leaflet_Polygons_500()">多角形の設置 </a></li>
1437 <li><a href="#" onclick = "Leaflet_Polygons_502()">多角形の設置終了 </a></li>
1438 <li><a href="#" onclick = "Leaflet_Polygons_503()">多角形の全消去 </a></li>
1439 <li><a href="#" onclick = "Leaflet_Polygons_504()">多角形用マーカー非表示 </a></li>
1440 <li><a href="#" onclick = "Leaflet_Polygons_505()">多角形用マーカー再表示 </a></li>
1441 <li><a href="#">---------------------------------------------</a></li>
1442 <li><a href="#" onclick = "Leaflet_Circles_500()">円の設置 </a></li>
1443 <li><a href="#" onclick = "Leaflet_Circles_501()">円の全消去 </a></li>
1444 </ul>
1445 </li>
1446 <li><a href="#">データの保存・読込</a>
1447 <ul>
1448 <li><a href="#" onclick = "Leaflet_Marker_406()">マーカー保存（CSV形式） </a></li>
1449 <li><a href="#" onclick = "Leaflet_CSV_510()">直線データの保存（CSV形式） </a></li>
1450 <li><a href="#" onclick = "Leaflet_CSV_511()">多角形データの保存（CSV形式） </a></li>
1451 <li><a href="#" onclick = "Leaflet_CSV_512()">円データの保存（CSV形式） </a></li>
1452 <li><a href="#">---------------------------------------------</a></li>
1453 <li><a href="#" onclick = "Leaflet_Marker_407()">データの読込（CSV形式） </a></li>
1454 </ul>
1455 </li>
1456 </ul>
1457 </nav>
1458
1459 <div id="map_Layer">
1460 <div id="map_505" style="width: 100%; height: 400px; border: solid 1px"></div>
1461 ここで使用しているアイコン素材は、<A HREF = "http://flat-icon-design.com/" target="_blank"> FLAT ICON DESIGN </A>および
1462 <A HREF = "http://icooon-mono.com/" target="_blank"> ICOON MONO </A>から取得しており、<BR>
1463 これらアイコン素材データの著作権は TopeconHeroes が保持しています。
1464 </div>
1465 </body>
1466 </html>
『 Original_Style_505.css 』は、主にダイアログ・ボックス内の表示スタイルを設定するものです。
『 Original_Style_505.css 』のソースファイル内容
001 .leaflet-container {
002 background: #fff;
003 outline: 0;
004 }
005 .ui-widget {
006 font-family: Arial,Verdana,sans-serif;
007 font-size: 0.8em;
008 }
009 .ui-slider-range {
010 background: #808080;
011 }
012 #colorpicker-red_01, #colorpicker-green_01, #colorpicker-blue_01, #colorpicker-red_02, #colorpicker-green_02, #colorpicker-blue_02, #slider_001, #slider_301, #slider_302, #slider_303 {
013 float: left;
014 clear: left;
015 width: 255px;
016 margin: 2px 5px;
017 }
018 #colorpicker-swatch_01 {
019 width: 60px;
020 height: 30px;
021 margin-top: 5px;
022 margin-left: 10px;
023 background-image: none;
024 }
025 #colorpicker-swatch_02 {
026 width: 60px;
027 height: 30px;
028 margin-top: 5px;
029 margin-left: 10px;
030 background-image: none;
031 }
032 #colorpicker-red_01 .ui-slider-range {
033 background: #ef2929;
034 }
035 #colorpicker-red_01 .ui-slider-handle {
036 border-color: #ef2929;
037 }
038 #colorpicker-green_01 .ui-slider-range {
039 background: #8ae234;
040 }
041 #colorpicker-green_01 .ui-slider-handle {
042 border-color: #8ae234;
043 }
044 #colorpicker-blue_01 .ui-slider-range {
045 background: #729fcf;
046 }
047 #colorpicker-blue_01 .ui-slider-handle {
048 border-color: #729fcf;
049 }
050 #colorpicker-hex_01, #colorpicker-rgb_01 {
051 margin: 3px;
052 }
053 #colorpicker-red_02 .ui-slider-range {
054 background: #ef2929;
055 }
056 #colorpicker-red_02 .ui-slider-handle {
057 border-color: #ef2929;
058 }
059 #colorpicker-green_02 .ui-slider-range {
060 background: #8ae234;
061 }
062 #colorpicker-green_02 .ui-slider-handle {
063 border-color: #8ae234;
064 }
065 #colorpicker-blue_02 .ui-slider-range {
066 background: #729fcf;
067 }
068 #colorpicker-blue_02 .ui-slider-handle {
069 border-color: #729fcf;
070 }
071 #colorpicker-hex_02, #colorpicker-rgb_02 {
072 margin: 3px;
073 }
074 #console {
075 height: 136px;
076 overflow-y: scroll;
077 color: white;
078 background-color: black;
079 }
『 Dialog_505.js 』は、次のダイアログ・ボックスを表示させるためのJavaScriptファイルです。
Dialog_001： マーカーの選択・スタイル設定
Dialog_002： CSVファイルの選択・読込
Dialog_003： 線のスタイル設定
Dialog_004： 円の中心の緯度・経度、半径の入力
『 Dialog_505.js 』のソースファイル内容
001 var Set_Text = "";
002 var Set_Link = " ";
003 var Icon_Url = "../ICONS/BW_Icon/BW_Icons_64/icon_000200_64.png";
004 var Icon_W = 24;
005 var Icon_H = 24;
006 var Icon_AW = Math.round(Icon_W / 2);
007 var Icon_AH = Math.round(Icon_H / 2);
008 var Icon_PW = 0;
009 var Icon_PH = Math.round(Icon_H / 2) * -1;
010 var Max_M_Size = 64;
011 var Min_M_Size = 8;
012 var Data_CSV = new Array();
013
014 var Line_W = 1;
015 var Selected_Color = 'ff0000';
016 var Selected_Fill_Color = 'ffff00';
017 var Selected_Opacity = 1;
018 var Selected_Fill_Opacity = 0.3;
019 var Line_Type = "10,0";
020 var Temp_LAT = 0.0;
021 var Temp_LON = 0.0;
022 var Temp_RAD = 0.0;
023
024 $(document).ready( function() {
025 $("body").append('<div id="dialog_001" style="z-index: 2000;"><p><form name="Form_001"> Title: '+
026 '<input type="text" style="width: 230px;" name="txt_mk" value=""></form><BR>'+
027 '<div>Marker Select:<BR>'+
028 '<select id="Marker_Samples" name="Marker_Samples" style="width:150px;">'+
029 '<option value="1" title="../ICONS/BW_Icon/BW_Icons_64/icon_000200_64.png">001</option>'+
030 '<option value="2" title="../ICONS/BW_Icon/BW_Icons_64/icon_127890_64.png">002</option>'+
031 '<option value="3" title="../ICONS/BW_Icon/BW_Icons_64/icon_114880_64.png">003</option>'+
032 '<option value="4" title="../ICONS/BW_Icon/BW_Icons_64/icon_109890_64.png">004</option>'+
033 '<option value="5" title="../ICONS/BW_Icon/BW_Icons_64/icon_001050_64.png">005</option>'+
034 '<option value="6" title="../ICONS/BW_Icon/BW_Icons_64/icon_119170_64.png">006</option>'+
035 '<option value="7" title="../ICONS/BW_Icon/BW_Icons_64/icon_122590_64.png">007</option>'+
036 '<option value="8" title="../ICONS/BW_Icon/BW_Icons_64/icon_000220_64.png">008</option>'+
037 '<option value="9" title="../ICONS/BW_Icon/BW_Icons_64/icon_133000_64.png">009</option>'+
038 '<option value="10" title="../ICONS/BW_Icon/BW_Icons_64/icon_115740_64.png">010</option>'+
039 '<option value="11" title="../ICONS/BW_Icon/BW_Icons_64/icon_115710_64.png">011</option>'+
040 '<option value="12" title="../ICONS/BW_Icon/BW_Icons_64/icon_115750_64.png">012</option>'+
041 '<option value="13" title="../ICONS/BW_Icon/BW_Icons_64/icon_115720_64.png">013</option>'+
042 '<option value="14" title="../ICONS/BW_Icon/BW_Icons_64/icon_147060_64.png">014</option>'+
043 '<option value="15" title="../ICONS/BW_Icon/BW_Icons_64/icon_127900_64.png">015</option>'+
044 '<option value="16" title="../ICONS/BW_Icon/BW_Icons_64/icon_109850_64.png">016</option>'+
045 '<option value="17" title="../ICONS/BW_Icon/BW_Icons_64/icon_111050_64.png">017</option>'+
046 '<option value="18" title="../ICONS/BW_Icon/BW_Icons_64/icon_111060_64.png">018</option>'+
047 '<option value="19" title="../ICONS/BW_Icon/BW_Icons_64/icon_111520_64.png">019</option>'+
048 '<option value="20" title="../ICONS/BW_Icon/BW_Icons_64/icon_127100_64.png">020</option>'+
049 '<option value="21" title="../ICONS/BW_Icon/BW_Icons_64/icon_127110_64.png">021</option>'+
050 '<option value="22" title="../ICONS/BW_Icon/BW_Icons_64/icon_127120_64.png">022</option>'+
051 '<option value="23" title="../ICONS/BW_Icon/BW_Icons_64/icon_127130_64.png">023</option>'+
052 '<option value="24" title="../ICONS/BW_Icon/BW_Icons_64/icon_127140_64.png">024</option>'+
053 '<option value="25" title="../ICONS/BW_Icon/BW_Icons_64/icon_127150_64.png">025</option>'+
054 '<option value="26" title="../ICONS/BW_Icon/BW_Icons_64/icon_127160_64.png">026</option>'+
055 '<option value="27" title="../ICONS/BW_Icon/BW_Icons_64/icon_001720_64.png">027</option>'+
056 '<option value="28" title="../ICONS/BW_Icon/BW_Icons_64/icon_100590_64.png">028</option>'+
057 '<option value="29" title="../ICONS/BW_Icon/BW_Icons_64/icon_100600_64.png">029</option>'+
058 '<option value="30" title="../ICONS/BW_Icon/BW_Icons_64/icon_102040_64.png">030</option>'+
059 '<option value="31" title="../ICONS/BW_Icon/BW_Icons_64/icon_104940_64.png">031</option>'+
060 '<option value="32" title="../ICONS/BW_Icon/BW_Icons_64/icon_107470_64.png">032</option>'+
061 '<option value="33" title="../ICONS/BW_Icon/BW_Icons_64/icon_108510_64.png">033</option>'+
062 '<option value="34" title="../ICONS/BW_Icon/BW_Icons_64/icon_108730_64.png">034</option>'+
063 '<option value="35" title="../ICONS/BW_Icon/BW_Icons_64/icon_111960_64.png">035</option>'+
064 '<option value="36" title="../ICONS/BW_Icon/BW_Icons_64/icon_111970_64.png">036</option>'+
065 '<option value="37" title="../ICONS/BW_Icon/BW_Icons_64/icon_112440_64.png">037</option>'+
066 '<option value="38" title="../ICONS/BW_Icon/BW_Icons_64/icon_112450_64.png">038</option>'+
067 '<option value="39" title="../ICONS/BW_Icon/BW_Icons_64/icon_113000_64.png">039</option>'+
068 '<option value="40" title="../ICONS/BW_Icon/BW_Icons_64/icon_113010_64.png">040</option>'+
069 '<option value="41" title="../ICONS/BW_Icon/BW_Icons_64/icon_114520_64.png">041</option>'+
070 '<option value="42" title="../ICONS/BW_Icon/BW_Icons_64/icon_114530_64.png">042</option>'+
071 '<option value="43" title="../ICONS/BW_Icon/BW_Icons_64/icon_114770_64.png">043</option>'+
072 '<option value="44" title="../ICONS/BW_Icon/BW_Icons_64/icon_114780_64.png">044</option>'+
073 '<option value="45" title="../ICONS/BW_Icon/BW_Icons_64/icon_128020_64.png">045</option>'+
074 '<option value="46" title="../ICONS/BW_Icon/BW_Icons_64/icon_124660_64.png">046</option>'+
075 '<option value="47" title="../ICONS/BW_Icon/BW_Icons_64/icon_127930_64.png">047</option>'+
076 '<option value="48" title="../ICONS/Flat_Icons/s64_f_business_72_0nbg.png">048</option>'+
077 '<option value="49" title="../ICONS/Flat_Icons/s64_f_business_76_0nbg.png">049</option>'+
078 '<option value="50" title="../ICONS/Flat_Icons/s64_f_object_6_2nbg.png">050</option>'+
079 '<option value="51" title="../ICONS/Flat_Icons/s64_f_object_7_2nbg.png">051</option>'+
080 '<option value="52" title="../ICONS/Flat_Icons/s64_f_object_24_1nbg.png">052</option>'+
081 '<option value="53" title="../ICONS/Flat_Icons/s64_f_object_25_0nbg.png">053</option>'+
082 '<option value="54" title="../ICONS/Flat_Icons/s64_f_object_27_2nbg.png">054</option>'+
083 '<option value="55" title="../ICONS/Flat_Icons/s64_f_object_155_1nbg.png">055</option>'+
084 '<option value="56" title="../ICONS/Flat_Icons/s64_f_object_164_2nbg.png">056</option>'+
085 '<option value="57" title="../ICONS/Flat_Icons/s64_f_object_167_0nbg.png">057</option>'+
086 '<option value="58" title="../ICONS/Flat_Icons/s64_f_object_173_0nbg.png">058</option>'+
087 '<option value="59" title="../ICONS/Flat_Icons/s64_f_object_115_0nbg.png">059</option>'+
088 '<option value="60" title="../ICONS/Flat_Icons/s64_f_object_116_1nbg.png">060</option>'+
089 '</select></div><BR>'+
090 '<div><tr><td><BR><div id="num_001"></div><div id="slider_001"></div>'+
091 '<BR><BR><div id="Selected_Icon">Selected Icon: <img src=""></div>'+
092 '</td></tr></div><BR>(注) ここで使用しているアイコン素材は、<A HREF = "http://flat-icon-design.com/" target="_blank"> FLAT ICON DESIGN </A>および' +
093 '<A HREF = "http://icooon-mono.com/" target="_blank"> ICOON MONO </A>から取得しており、<BR>' +
094 'これらアイコン素材データの著作権は TopeconHeroes が保持しています。</p><div>');
095
096 $('#Selected_Icon img').attr('src', Icon_Url);
097
098 $('#dialog_001').dialog({
099 autoOpen: false,
100 title: 'Please Set the Icon Style.',
101 height: 450,
102 width: 300,
103 closeOnEscape: true,
104 modal: true,
105 buttons: {
106 "設定": function(){
107 Set_Text = document.Form_001.txt_mk.value;
108 var Temp = Marker_Samples.options[Marker_Samples.selectedIndex].title;
109 Icon_Url = Temp;
110 Icon_AW = Math.round(Icon_W / 2);
111 Icon_AH = Math.round(Icon_H / 2);
112 Icon_PW = 0;
113 Icon_PH = Math.round(Icon_H / 2) * -1;
114 Change_Marker();
115 $(this).dialog('close');
116 }
117 }
118 });
119
120 $("body").append('<div id="dialog_002" style="z-index: 2000;"><p><form name="Form_002">'+
121 'Title: <input type="text" style="width: 230px;" name="txt_dat" value=""></form></p><HR>'+
122 '<p> File Select:'+
123 '<form name="subinput">'+
124 '<center>CSVファイルを指定してください。<BR><BR>'+
125 ' <TD><input type="file" name="select" id="select_002" value=""></TD>'+
126 ' <BR><BR>'+
127 '</center></p></div>');
128
129 $('#dialog_002').dialog({
130 autoOpen: false,
131 title: 'CSVファイル選択',
132 height: 400,
133 width: 300,
134 closeOnEscape: true,
135 modal: true,
136 show: "fade",
137 hide: "fade",
138 buttons: {
139 "Select the Marker": function(){
140 Dialog_001();
141 },
142 "Select the Line Style": function(){
143 Dialog_003();
144 },
145 " Set Markers ": function(){
146 CSV_Data();
147 CSV_Markers();
148 },
149 " Draw Lines ": function(){
150 CSV_Data();
151 CSV_Lines();
152 },
153 " Draw Polygons ": function(){
154 CSV_Data();
155 CSV_Polygons();
156 },
157 " Draw Circles ": function(){
158 CSV_Data();
159 CSV_Circles();
160 },
161 " Close ": function(){
162 $(this).dialog('close');
163 }
164 }
165 });
166
167 $("body").append('<div id="dialog_003" style="z-index: 2000;"><form name="Form_003">'+
168 'Title: <input type="text" style="width: 230px;" name="txt_line" value=""></form>'+
169 '<p><HR><div style="clear: both;"></div><div>Line Type:'+
170 '<select id="Line_Samples" name="Line_Samples" style="width:270px;">'+
171 '<option value="1" title="../ICONS/Lines/Line_Sample-001(10).png">001</option>'+
172 '<option value="2" title="../ICONS/Lines/Line_Sample-002(5,5).png">002</option>'+
173 '<option value="3" title="../ICONS/Lines/Line_Sample-003(5,10).png">003</option>'+
174 '<option value="4" title="../ICONS/Lines/Line_Sample-004(10,5).png">004</option>'+
175 '<option value="5" title="../ICONS/Lines/Line_Sample-005(5,1).png">005</option>'+
176 '<option value="6" title="../ICONS/Lines/Line_Sample-006(1,5).png">006</option>'+
177 '<option value="7" title="../ICONS/Lines/Line_Sample-007(15,10,5,10).png">007</option>'+
178 '<option value="8" title="../ICONS/Lines/Line_Sample-008(5,5,1,5).png">008</option>'+
179 '</select></div>'+
180 '<div id="num_301"></div><div id="slider_301"></div><BR>'+
181 '<div style="float: left;">Select Line Color: <BR>'+
182 '<div id="colorpicker-red_01"></div><div id="colorpicker-green_01"></div><div id="colorpicker-blue_01"></div>'+
183 '<div id="num_302"></div><div id="slider_302"></div>'+
184 '</div><div style="float: left;"><div id="colorpicker-swatch_01" class="ui-widget-content ui-corner-all"></div>'+
185 '</div><div style="float: left;"><div id="colorpicker-hex_01"></div><div id="colorpicker-rgb_01"></div></div>'+
186 '</p><p><div style="float: left;"><HR>Select Fill Color: <BR>'+
187 '<div id="colorpicker-red_02"></div><div id="colorpicker-green_02"></div><div id="colorpicker-blue_02"></div>'+
188 '<div id="num_303"></div><div id="slider_303"></div>'+
189 '</div><div style="float: left;">'+
190 '<div id="colorpicker-swatch_02" class="ui-widget-content ui-corner-all"></div></div>'+
191 '<div style="float: left;"><div id="colorpicker-hex_02"></div><div id="colorpicker-rgb_02"></div></div>'+
192 '<div style="clear: both;"></div></p></div>');
193
194 $('#dialog_003').dialog({
195 autoOpen: false,
196 title: 'Select Line Style',
197 height: 500,
198 width: 320,
199 closeOnEscape: true,
200 modal: true,
201 show: "fade",
202 hide: "fade",
203 buttons: {
204 "設定": function(){
205 Set_Text = document.Form_003.txt_line.value;
206 var Temp = Line_Samples.options[Line_Samples.selectedIndex].value;
207 if( Temp == 2 ) {
208 Line_Type = 5 * Line_W + "," + 5 * Line_W;
209 } else if( Temp == 3 ) {
210 Line_Type = 5 * Line_W + "," + 10 * Line_W;
211 } else if( Temp == 4 ) {
212 Line_Type = 10 * Line_W + "," + 5 * Line_W;
213 } else if( Temp == 5 ) {
214 Line_Type = 5 * Line_W + "," + 2 * Line_W;
215 } else if( Temp == 6 ) {
216 Line_Type = 1 * Line_W + "," + 5 * Line_W;
217 } else if( Temp == 7 ) {
218 Line_Type = 15 * Line_W + "," + 10 * Line_W + "," + 5 * Line_W + "," + 10 * Line_W;
219 } else if( Temp == 8 ) {
220 Line_Type = 5 * Line_W + "," + 5 * Line_W + "," + 1 * Line_W + "," + 5 * Line_W;
221 } else {
222 Line_Type = 10 * Line_W + "," + 0;
223 }
224 $(this).dialog('close');
225 }
226 }
227 });
228
229 $("body").append('<div id="dialog_004" style="z-index: 2000"><form name="Form_004">'+
230 'Title: <input type="text" style="width: 230px;" name="txt_circle" value="">'+
231 '<p><HR><div style="clear: both;"></div>'+
232 ' 円の中心位置及び半径を入力してください。<BR><BR>'+
233 '<TR>'+
234 '<TD>Latitude (Deg.) : <input type="text" name="circle_lat" value=""></TD>'+
235 '<BR><BR>'+
236 '<TD>Longitude (Deg.) : <input type="text" name="circle_lon" value=""></TD>'+
237 '<BR><BR>'+
238 '</TR><TR>'+
239 '<TD>円の半径 (km)： <input type="text" name="radius" value=""></TD>'+
240 '<BR><BR></TR></p></form></div>');
241
242 $('#dialog_004').dialog({
243 autoOpen: false,
244 title: 'Set the Circle Style',
245 height: 300,
246 width: 320,
247 closeOnEscape: true,
248 modal: true,
249 show: "fade",
250 hide: "fade",
251 buttons: {
252 "設定": function(){
253 Circles_LAT[ Circles_count ] = document.Form_004.circle_lat.value * 1.0;
254 Circles_LON[ Circles_count ] = document.Form_004.circle_lon.value * 1.0;
255 Circles_RAD[ Circles_count ] = document.Form_004.radius.value * 1000;
256 Circles_NAM[ Circles_count ] = document.Form_004.txt_circle.value;
257 Circles_LNK[ Circles_count ] = " ";
258 Circles_ID[ Circles_count ] = "Circle" + Circles_ID_count;
259 if ((Circles_LAT[ Circles_count ] != 0) || (Circles_LON[ Circles_count ] != 0)) {
260 Circles_Set( Circles_count );
261 Circles_count = Circles_count + 1;
262 Circles_ID_count = Circles_ID_count + 1;
263 }
264 $(this).dialog('close');
265 }
266 }
267 });
268
269
270 $('#slider_001, #slider_301, #colorpicker-red_01, #colorpicker-green_01, #colorpicker-blue_01, #slider_302, #colorpicker-red_02, #colorpicker-green_02, #colorpicker-blue_02, #slider_303').slider( {
271 orientation: 'horizontal',
272 range: 'min',
273 max: 255,
274 value: 127,
275 slide: refreshSwatch,
276 change: refreshSwatch
277 } );
278 $( '#slider_001' ).slider( 'value', 96 );
279 $( '#colorpicker-red_01' ) . slider( 'value', 255 );
280 $( '#colorpicker-green_01' ) . slider( 'value', 0 );
281 $( '#colorpicker-blue_01' ) . slider( 'value', 0 );
282 $( '#slider_301' ).slider( 'value', 25 );
283 $( '#slider_302' ).slider( 'value', 204 );
284 $( '#colorpicker-red_02' ) . slider( 'value', 255 );
285 $( '#colorpicker-green_02' ) . slider( 'value', 255 );
286 $( '#colorpicker-blue_02' ) . slider( 'value', 0 );
287 $( '#slider_303' ).slider( 'value', 76 );
288 $( '#Line_Samples' ).msDropDown();
289 $( '#Marker_Samples' ).msDropDown({
290 visibleRows:4,
291 on:{change:function(data, ui) {
292 Icon_Url = Marker_Samples.options[Marker_Samples.selectedIndex].title;
293 $('#Selected_Icon img').attr('src', Icon_Url);
294 }}
295 });
296 });
297
298
299 function Dialog_001() {
300 document.Form_001.txt_mk.value = "";
301 $('#dialog_001').dialog('open');
302 }
303
304 function Dialog_002() {
305 CSV_Data();
306 document.Form_002.txt_dat.value = "";
307 $('#dialog_002').dialog('open');
308 }
309
310 function Dialog_003() {
311 document.Form_003.txt_line.value = "";
312 $('#dialog_003').dialog('open');
313 }
314
315 function Dialog_004() {
316 document.Form_004.circle_lat.value = "";
317 document.Form_004.circle_lon.value = "";
318 document.Form_004.radius.value = "";
319 document.Form_004.txt_circle.value = "";
320 $('#dialog_004').dialog('open');
321 }
322
323
324 function refreshSwatch() {
325 Icon_W = Math.round($('#slider_001').slider('value') / 255 * Max_M_Size);
326 if (Icon_W <= Min_M_Size) { Icon_W = Min_M_Size; }
327 Icon_H = Icon_W;
328 $( '#num_001' ).html( 'Marker Size： ' + Icon_W );
329 $( '#Selected_Icon img' ).css( { width: Icon_W, height: Icon_H } );
330
331 var red_01 = $( '#colorpicker-red_01' ) . slider( 'value' );
332 var green_01 = $( '#colorpicker-green_01' ) . slider( 'value' );
333 var blue_01 = $( '#colorpicker-blue_01' ) . slider( 'value' );
334 Line_W = Math.ceil($('#slider_301').slider('value') / 255 * 10);
335 Selected_Opacity = Math.round($('#slider_302').slider('value') / 255 * 100) / 100;
336 Selected_Color = hexFromRGB( red_01, green_01, blue_01 );
337 var red_02 = $( '#colorpicker-red_02' ) . slider( 'value' );
338 var green_02 = $( '#colorpicker-green_02' ) . slider( 'value' );
339 var blue_02 = $( '#colorpicker-blue_02' ) . slider( 'value' );
340 Selected_Fill_Opacity = Math.round($('#slider_303').slider('value') / 255 * 100) / 100;
341 Selected_Fill_Color = hexFromRGB( red_02, green_02, blue_02 );
342 $( '#colorpicker-swatch_01' ) . css( 'background-color', '#' + Selected_Color );
343 $( '#colorpicker-swatch_01' ) . css( 'opacity', Selected_Opacity );
344 $( '#colorpicker-hex_01' ) . html( 'HEX： #' + Selected_Color );
345 $( '#colorpicker-rgb_01' ) . html( 'RGB： (' + red_01 + ',' + green_01 + ',' +blue_01 + ')' );
346 $( '#num_301' ).html( 'Line Width： ' + Line_W );
347 $( '#num_302' ).html( 'Line Opacity： ' + Selected_Opacity );
348 $( '#colorpicker-swatch_02' ) . css( 'background-color', '#' + Selected_Fill_Color );
349 $( '#colorpicker-swatch_02' ) . css( 'opacity', Selected_Fill_Opacity );
350 $( '#colorpicker-hex_02' ) . html( 'HEX： #' + Selected_Fill_Color );
351 $( '#colorpicker-rgb_02' ) . html( 'RGB： (' + red_02 + ',' + green_02 + ',' +blue_02 + ')' );
352 $( '#num_303' ).html( 'Fill Opacity： ' + Selected_Fill_Opacity );
353 }
354
355 function CSV_Data() {
356 if(window.File) {
357 var select = document.getElementById('select_002');
358 select.addEventListener('change', function(e) {
359 var fileData = e.target.files[0];
360 Data_CSV = [];
361 var reader = new FileReader();
362 reader.onerror = function() {
363 alert('ファイル読み込みに失敗しました。');
364 }
365 reader.onload = function() {
366 var lineArr = reader.result.split("\r\n");
367 for (var i = 0; i < lineArr.length; i++) {
368 Data_CSV[i] = lineArr[i].split(",");
369 }
370 }
371 reader.readAsText(fileData);
372 }, false);
373 }
374 }
375
376 function hexFromRGB( r, g, b ) {
377 var hex = [
378 r . toString( 16 ),
379 g . toString( 16 ),
380 b . toString( 16 )
381 ];
382 jQuery.each( hex, function( nr, val ) {
383 if ( val . length === 1 ) {
384 hex[ nr ] = "0" + val;
385 }
386 } );
387 return hex . join( '' ) . toUpperCase();
388 }
Previous Page Next Page