From 69315577f8f9fcad2d14601e73fcccedb9fe35e8 Mon Sep 17 00:00:00 2001 From: YK Date: Sat, 25 Feb 2023 11:43:25 +0900 Subject: [PATCH] update change message --- GetFeaturesGeoJSON.gs | 4 +- index.html | 284 ++++++++++++++++++++++-------------------- webmap.gs | 33 +++-- 3 files changed, 177 insertions(+), 144 deletions(-) diff --git a/GetFeaturesGeoJSON.gs b/GetFeaturesGeoJSON.gs index 41e0b81..e0fabbc 100644 --- a/GetFeaturesGeoJSON.gs +++ b/GetFeaturesGeoJSON.gs @@ -3,6 +3,8 @@ function testGetGJSON(){ var tg = GetFeaturesGeoJSON("シート1"); + console.log( tg ); + let js = JSON.stringify( tg ); console.log( js ); @@ -35,7 +37,7 @@ function GetFeaturesGeoJSON( sheetname ){ if ( rows > 1){ - for ( let ir = 1 ; ir < rows; ++ir ){ + for ( let ir = 2 ; ir <= rows; ++ir ){ let tgr = tgSheet.getRange(ir,1 ,1,8).getValues(); //console.log( tgr ); diff --git a/index.html b/index.html index 20325a7..d235a62 100644 --- a/index.html +++ b/index.html @@ -655,51 +655,51 @@ 'Content-Type': 'application/x-www-form-urlencoded', }} -const loadSymbols = ( url ) => { - return new Promise((resolv,reject ) => { - - // SpreadSheetに定義したシンボルリストを設定する - - const data = { - - }; - - fetch(url, { - method: "GET", - headers: { - "Accept": 'application/json', - "Content-Type": 'application/x-www-form-urlencoded' - }, - mode: "cors" - }) - .then(response => { - if (response.ok) { - return response.json(); - } - // 404 や 500 ステータスならここに到達する - throw new Error('Network response was not ok.'); - }) - .then(retJson => { +function GetSymbolsF( url ){ - return retJson - }) + //console.log(JSON.stringify(RasterLayers)); + var request = new XMLHttpRequest(); + request.open("GET", url, false); + try { + request.send(); + if (request.status != 200) { + alert(`Error ${request.status}: ${request.statusText}`); + } else { + var gj = request.response; + + gsym = JSON.parse(gj); + + return gsym; + } + + + + } + catch( err ){ + alert("request failed"); + } + + + + + + +} - }); -}; //map.on('load', function () { var dpurl; if ( GasMode == 1 ){ - // dpurl = ; + dpurl = ; } else { - dpurl = "";"" + dpurl = ""; } var GetFURL = dpurl + "?cmd=GETFEATURS"; @@ -708,36 +708,28 @@ var GetSymbols = dpurl + "?cmd=SYMBOLS"; +SymbolList = []; +var idTrans = {}; +var gfeature ; + map.once('load', async () => { - // const symboljson = await Promise.all ([ - // loadSymbols(GetSymbols ) -//] -//); + // シンボルの定義をSpread Sheetから読み込んで配列に格納する -// Icons by https://icons8.com/ -const images = await Promise.all([ - loadImageAsPromise(map, 'https://raw.githubusercontent.com/yoichigmf/lhazardmap/develop/icon/AED.png'), - loadImageAsPromise(map, 'https://raw.githubusercontent.com/yoichigmf/lhazardmap/develop/icon/conveni.png'), - loadImageAsPromise(map, 'https://raw.githubusercontent.com/yoichigmf/lhazardmap/develop/icon/fire_extinguisher.png'), - loadImageAsPromise(map, 'https://raw.githubusercontent.com/yoichigmf/lhazardmap/develop/icon/public_phone.png'), - loadImageAsPromise(map, 'https://raw.githubusercontent.com/yoichigmf/lhazardmap/develop/icon/pump.png'), - loadImageAsPromise(map, 'https://raw.githubusercontent.com/yoichigmf/lhazardmap/develop/icon/warehouse.png'), - loadImageAsPromise(map, 'https://raw.githubusercontent.com/yoichigmf/lhazardmap/develop/icon/water_tunk.png') - ]); - -map.addImage('AED', images[0]); -map.addImage('conveni', images[1]); -map.addImage('fire_extinguisher', images[2]); -map.addImage('public_phone', images[3]); -map.addImage('pump', images[4]); -map.addImage('warehouse', images[5]); -map.addImage('water_tunk', images[6 -]); +SymbolList = await GetSymbolsF( GetSymbols ); + + +for ( const sym of SymbolList ){ + img = await loadImageAsPromise(map, sym['icon']); + + map.addImage(sym['id'], img ) + + idTrans[sym['name']] = sym['id']; +} @@ -768,7 +760,7 @@ bottom_layer_id = 'gsi_photo'; - + RasterLayers = []; @@ -888,7 +880,7 @@ SetDragScript(); // 動的に作成した要素に対するイベントは作成後に追加　　ドラッグイベントを追加 - var gfeature ; + //console.log(JSON.stringify(RasterLayers)); var request = new XMLHttpRequest(); @@ -927,44 +919,12 @@ // Spread Sheet中の調査ポイントを追加 - gfeature.features.forEach(function (feature) { + gfeature["features"].forEach(function (feature) { fkind = feature.properties['kind']; - ad = "AED"; - - if ( fkind == "AED" ) { - ad = "AED"; - } - - if ( fkind == "コンビニ" ) { - ad = "conveni"; - } - - if ( fkind == "消火器" ) { - ad = "fire_extinguisher"; - } - - if ( fkind == "公衆電話" ) { - ad = "public_phone"; - } - - - - if ( fkind == "可搬ポンプ" ) { - ad = "pump"; - } - - if ( fkind == "防災倉庫・備蓄倉庫" ) { - ad = "warehouse"; - } - - if ( fkind == "応急給水タンク" ) { - ad = "water_tunk"; - } - - - + ad = idTrans[fkind]; + @@ -980,19 +940,6 @@ } ); -//https://github.com/yoichigmf/lhazardmap/blob/develop/icon/AED.png?raw=true - -//https://raw.githubusercontent.com/yoichigmf/lhazardmap/develop/icon/AED.png - -//'https://raw.githubusercontent.com/yoichigmf/lbmap/511c8c3b03f785025f33c3e77ca313e72c1e737e/sprite/marker.png', -// 調査ポイントのアイコン -//map.loadImage( - // 'https://raw.githubusercontent.com/yoichigmf/lhazardmap/develop/icon/AED.png', - // function (error, image) { - // if (error) throw error; - // map.addImage('aed', image); - - @@ -1010,9 +957,6 @@ - // } -//); - @@ -1022,20 +966,10 @@ } -// Spread Sheet中の調査ポイントを追加 -/* -map.addSource( - 'rpoints', { - 'type': 'geojson', - 'data':GetFURL - } - -); -*/ - + }) @@ -1221,22 +1155,24 @@ function CreatePropertyHTML( prp ){ - var rhtml = ""; - - + // var rhtml = "
項目値
"; + var rhtml = "
項目値
"; - rhtml = rhtml + ""; +*/ -rhtml = rhtml + ""; - -rhtml = rhtml + ""; @@ -1318,13 +1254,28 @@ var coordinates = event.lngLat; console.log('Lng:', coordinates.lng, 'Lat:', coordinates.lat); - formhtml = "危険情報登録
"; + formhtml = "情報登録
"; + + formhtml = formhtml + ""; + + + formhtml = formhtml + ""; - formhtml = formhtml + "
"; + //formhtml = formhtml + "
"; - formhtml = formhtml + "" + formhtml = formhtml + "" formhtml = formhtml + ""; popupv = new maplibregl.Popup({ @@ -1339,16 +1290,63 @@ // nmarker.setLngLat(coordinates).addTo(map); } -function commit(form){ +function docommit(form){ popupv.remove(); console.log("commit"); console.log( form.stext.value ); console.log(form.lat.value ); + console.log(form.kind.value ); var cd = {"lng":form.lng.value, "lat":form.lat.value}; + // marker の選択 // レイヤにポイント追加するように改造必要 20221227 - nmarker.setLngLat(cd).addTo(map); + + + let NewItem = {}; + + Object.assign(NewItem, gfeature["features"][0] ); + + let prop = NewItem.properties; + + let geom = NewItem.geometry; + + + geom["Type"] = "Point"; + geom["coordinates"] = []; + + geom["coordinates"].push(parseFloat(form.lng.value)); + geom["coordinates"].push(parseFloat(form.lat.value)); + + prop["text"] = form.stext.value; + prop["kind"] = form.kind.value; + + prop["user"] =""; + //prop["date"] = ""; + //prop["proplist"] = []; + prop["url"] = ""; + + + ad = idTrans[form.kind.value]; + + prop['icon'] = ad; + + NewItem["id"] = "_" + String(gfeature["features"].length + 2); + + NewItem["type"] = "Feature"; + NewItem["properties"] = prop; + NewItem["geometry"] = geom; + + + gfeature["features"].push(NewItem); + + + + map.getSource('rpoints').setData(gfeature); + + //gfeature["features"][0]["geometry"]["coordinates"]; + + //nmarker.setLngLat(cd).addTo(map); //google.script.run.withSuccessHandler(sample).AccountCheck(); @@ -1362,11 +1360,15 @@ // GASの場合　GASで定義した addMessage という関数を実行している if ( GasMode == 1){ + let tgSheet = "シート1"; google.script.run .withSuccessHandler( successf ) .withFailureHandler( failf ) - .addMessage(form.stext.value, form.lat.value, form.lng.value); - //function addMessage( text, lat, lon ){ + .addMessage( tgSheet, parseFloat(form.lat.value), parseFloat(form.lng.value), form.kind.value, form.stext.value ); + + + } + else { } // GASでない場合は　Postで登録できるようにしておく @@ -1375,7 +1377,15 @@ return true; } -function successf(){ +// GAS　登録成功 +function successf( tgSheet ){ + +　 google.script.run + .withSuccessHandler( successGeoJSON ) + .withFailureHandler( failf ) + .GetFeaturesGeoJSON( tgSheet ); + +　　 console.log("success"); } @@ -1384,6 +1394,14 @@ } +function successGeoJSON( tGeoJson ){ + + //alert( tGeoJson ); + + console.log( tGeoJson ); + + console.log("geoJson success"); +} // レイヤ表示のチェック変更 function changeCheck( check ){ diff --git a/webmap.gs b/webmap.gs index eca78e0..ec710fa 100644 --- a/webmap.gs +++ b/webmap.gs @@ -841,7 +841,7 @@ function doGet(e) { let tgText = e.parameter['stext']; - 　let tgsheet = e.parameter['sheet'] ? e.parameter['sheet']:false; + let tgsheet = e.parameter['sheet'] ? e.parameter['sheet']:false; if ( tgsheet === false ){ // シートの指定が無い場合 　　　　　　tgsheet = "シート1"; @@ -851,7 +851,10 @@ function doGet(e) { let lat = e.parameter['lat']; let lon = e.parameter['lon']; + let kindTest = e.parameter['kind']; + // 指定シートにメッセージを追加する + addMessage( tgsheet, lat, lon, kind, kindText, tgText ); // deploy?cmd=PUTTEXT&lat={}&lon={}&stext={} @@ -1013,13 +1016,25 @@ function GetNow(){ } -function addMessage( text, lat, lon ){ +function testAddmessage() +{ + tgSheet = "シート1"; + lat = 34.76129266; + lon = 134.0230465; + kind = "公衆電話"; + text = "sample test"; + addMessage( tgSheet, lat, lon, kind, text ); + Logger.log("test"); + +} + +function addMessage( tgsheet, lat, lon, kind, text ){ //　　書き込み対象シートを読み込み、最終行を取得 - const mySheet = getTargetSheet(); - const lastRow = mySheet.getLastRow(); + const mySheet = getTargetSheet( tgsheet ); + const lastRow = mySheet.getLastRow() ; // テキスト書き込み 　//mySheet.getRange(1 + lastRow, 1).setValue(Utilities.formatDate(new Date(timestamp), 'JST', 'yyyy-MM-dd HH:mm:ss')); @@ -1027,15 +1042,13 @@ function addMessage( text, lat, lon ){ mySheet.getRange(1 + lastRow, 1).setValue( now ); // mySheet.getRange(1 + lastRow, 2).setValue(userId); - mySheet.getRange(1 + lastRow, 3).setValue("location"); - //mySheet.getRange(1 + lastRow, 3).setValue(id); + mySheet.getRange(1 + lastRow, 3).setValue( kind ); + mySheet.getRange(1 + lastRow, 5).setValue(text); - mySheet.getRange(1 + lastRow, 6).setValue(lat); + mySheet.getRange(1 + lastRow, 6).setValue(lat); mySheet.getRange(1 + lastRow, 7).setValue(lon); - mySheet.getRange(1 + lastRow, 8).setValue('line'); - - //mySheet.getRange(1 + lastRow, 8).setValue('LINE'); + return 0;
登録情報
登録日時"; +/* +rhtml = rhtml + "
登録日時"; rhtml = rhtml + prp["date"]; rhtml = rhtml + "
種別"; +rhtml = rhtml + "
"; +//rhtml = rhtml + "
種別"; rhtml = rhtml + prp["kind"]; rhtml = rhtml + "
テキスト"; +// rhtml = rhtml + "
テキスト"; +rhtml = rhtml + "
"; rhtml = rhtml + prp["text"]; rhtml = rhtml + "