Skip to content

Commit

Permalink
Add vector and raster GIS layers. And improve performance of GIS func…
Browse files Browse the repository at this point in the history 
…tions.
  • Loading branch information
@satakagi
satakagi committed Dec 27, 2019
1 parent aceffa6 commit eb51207
Show file tree
Hide file tree
Showing 7 changed files with 1,411 additions and 33 deletions.
26 changes: 21 additions & 5 deletions SVGMapLv0.1_Authoring_r7.js
View file
Expand Up @@ -34,6 +34,7 @@
// 2018/03/05 polylineを編集できる機能をおおよそ実装
// 2019/03/12 POIのアイコン定義が1個しかない場合はアイコン選択UI省略
// 2019/03/12 タイリングされたレイヤーに対して処理可能にする(制約としては、タイルにあるオブジェクトを編集したものは保持されない。新規のオブジェクトはレイヤルートに設置。メタデータスキーマ・アイコン定義は、共通のものをレイヤールートにも設置必要)
// 2019/12/27 refreshScreen後コールバック処理の精密化
//
// ToDo,ISSUES:
// POI以外の描画オブジェクトを選択したときに出るイベントbase fwに欲しい
Expand Down Expand Up @@ -443,7 +444,8 @@ function editConfPhase2( targetDoc, toolsCbFunc, toolsCbFuncParam, confStat ){
svgMap.refreshScreen();
// console.log("editConfPhase2: toolsCbFunc?:",toolsCbFunc);
if ( toolsCbFunc ){
toolsCbFunc(confStat, toolsCbFuncParam);
callAfterRefreshed(toolsCbFunc,confStat,toolsCbFuncParam);
// toolsCbFunc(confStat, toolsCbFuncParam);
}
}

Expand Down Expand Up @@ -698,10 +700,11 @@ function setPoiRegPosition(e,targetTxtBoxId, directPutPoiParams){ // setPoiPosit
uiMapping.editingLayerId,
directPutPoiParams.id
);
svgMap.refreshScreen();
svgMap.refreshScreen();
if ( toolsCbFunc ){
toolsCbFunc(true, toolsCbFuncParam);
}
callAfterRefreshed(toolsCbFunc,true,toolsCbFuncParam);
// toolsCbFunc(true, toolsCbFuncParam); // refreshが完了してから呼ばないと行儀が悪く、問題が出るようになった(2019/12/27)
}
}

// メタデータで緯度経度重複のあるdisabled formに値をコピー
Expand All @@ -721,6 +724,18 @@ function setPoiRegPosition(e,targetTxtBoxId, directPutPoiParams){ // setPoiPosit
}
}

function callAfterRefreshed(cbf,cbfParam0,cbfParam1){ // refreshが完了してから呼ぶための関数(2019/12/27)
window.addEventListener('screenRefreshed', (function(cbf,cbfParam0,cbfParam1) {
return function f() {
// console.log("catch screenRefreshed call:",cbf," param:",cbfParam0,cbfParam1)
window.removeEventListener('screenRefreshed', f, false);
cbf(cbfParam0,cbfParam1);
}
})(cbf,cbfParam0,cbfParam1), false);
}



function setPoiRegUiEvents( targetDiv ){ // setPoiUiEventsはこれで置き換えの方向
targetDiv.addEventListener("click",function(e){
console.log("get PoiRegUiEvents: targetId:",e.target.id);
Expand Down Expand Up @@ -761,7 +776,8 @@ function setPoiRegUiEvents( targetDiv ){ // setPoiUiEventsはこれで置き換
);
svgMap.refreshScreen();
if ( toolsCbFunc ){
toolsCbFunc(true, toolsCbFuncParam);
callAfterRefreshed(toolsCbFunc,true,toolsCbFuncParam);
// toolsCbFunc(true, toolsCbFuncParam);
}
}
},false);
Expand Down
70 changes: 48 additions & 22 deletions SVGMapLv0.1_GIS_r2.js
View file
Expand Up @@ -30,14 +30,17 @@
// 2018/08/01 Add pointOnly option / get(Included/Excluded)Points
// 2018.12.26 KMLを直接レンダリングする機能を実装
// 2019/05/17 getInRangePoints(): Coverageがtransform付きのものをサポート
// 2019/12/26 効率向上のためのオプション追加(getIncludedPointsのpreCapturedGeometry)
//
//
// ACTIONS:
// ・ポリゴン包含、ポリラインクロス等の基本関数(jtsのような)
// ・ポイント（マウスポインタ―）と、ポイント、ポリライン、ポリゴンヒットテスト（既存のクリッカブルオブジェクト同等動作）：　ただし、ポイント、ポリラインはバッファが必要なので後回しか？
// ・ラインと、ライン、ポリゴンのヒットテスト
// ・ポリゴンと、ポイント、ライン、ポリゴンのヒットテスト
// ・カラーピッカーになりえるもの
// ・ポリゴン包含、ポリラインクロス等の基本関数(jtsのような) done
// ・ポイント（マウスポインタ―）と、ポイント、ポリライン、ポリゴンヒットテスト（既存のクリッカブルオブジェクト同等動作）：　ただし、ポイント、ポリラインはバッファが必要なので後回しか？ done
// ・ラインと、ライン、ポリゴンのヒットテスト done
// ・ポリゴンと、ポイント、ライン、ポリゴンのヒットテスト done
// ・カラーピッカーになりえるもの done
// ・ベクタプロパティの利用 done
// ・オートパイロット機能のフレームワーク化(vectorGisLayer/rasterGisLayerの実装の改善と取り込み)
//
// ・入力：
// 　・マウスポインタ―ベースの対話的に生成されたオブジェクトと指定したレイヤー
Expand Down Expand Up @@ -150,23 +153,30 @@ var svgMapGIStool = ( function(){
// https://github.com/morganherlocker/weiler-atherton



// poiID（およびその子供の文書）が、
function getIncludedPoints(poiID, polyID, cbFunc, param , progrssCallback , inverse , pointOnly ){
// 画面中の、指定したレイヤのポリゴンに包含されている指定したレイヤのPOIを検索する
// poiID : POIのレイヤID（その子供の文書も対象）、polyID: ポリゴンのレイヤID
function getIncludedPoints(poiID, polyID, cbFunc, param , progrssCallback , inverse , pointOnly ,getIncludedPolygonAttr , preCapturedGeometry){
// 2019.12.26 : preCapturedGeometry あらかじめ別に取得済みのgeom.を流用したいときに指定 : 今後同様オプションをcaptureGISgeometries実行しているロジックに入れていくだろう
var superParam = {
pointsDocTreeID: poiID,
polygonsDocTreeID: polyID,
cbFunc: cbFunc,
param: param,
progrssCallback: progrssCallback,
inverse: inverse,
pointOnly : pointOnly
pointOnly : pointOnly,
getIncludedPolygonAttr : getIncludedPolygonAttr
}
var pointsDocTreeID = poiID;
var polygonsDocTreeID = polyID;
console.log( "called getIncludedPoints:", pointsDocTreeID, polygonsDocTreeID);
// svgMap.captureGISgeometries(getIncludedPointsS2 , superParam );
svgMap.captureGISgeometries(getIncludedPointsS2a , superParam );
if ( ! preCapturedGeometry ){
svgMap.captureGISgeometries(getIncludedPointsS2a , superParam ); // まずはGIS Geomを取得し、それから包含判定を行う(非同期)
} else {
console.log("getIncludedPoints: USE preCapturedGeometry");
getIncludedPointsS2a(preCapturedGeometry,superParam); // あらかじめキャプチャしてあるgeometryがある場合は飛ばす
}
}

function getExcludedPoints(poiID, polyID, cbFunc, param , progrssCallback , pointOnly ){
Expand Down Expand Up @@ -276,6 +286,7 @@ var svgMapGIStool = ( function(){
cbFunc(ansPois , totalPoiCount , param ); // 検索したPOIを全部Arrayとして返す。一個パラメータを渡せる
}

// 非同期での包含判定のための前処理　包含判定に必要な全組み合わせを構築する (指定したレイヤのPOI全部 × 指定したレイヤのポリゴン全部 の組み合わせをArrayに投入)
// 重くなることがあるので、非同期処理版を作る・・・
function getIncludedPointsS2a( geom , superParam ){
console.log("getIncludedPointsS2a called : ",geom);
Expand Down Expand Up @@ -307,10 +318,12 @@ var svgMapGIStool = ( function(){
}
superParam.totalPoiCount = totalPoiCount;

console.log("call getIncludedPointsS3 :" , compArray);
getIncludedPointsS3( geom, superParam , compArray);
// console.log("call getIncludedPointsS3 :" , compArray);
getIncludedPointsS3( geom, superParam , compArray); // 組み合わせが構築出来たら実際の包含判定に進む(非同期)
}

// 非同期処理での包含判定演算の実体
// すべての組み合わせに対して実施
function getIncludedPointsS3( geom , superParam , compArray , counter , startTime , ansPois ){


Expand Down Expand Up @@ -364,9 +377,13 @@ var svgMapGIStool = ( function(){
polygon = polDoc[plc].coordinates;
if ( !superParam.inverse ){ // 内包判定
if ( insidePolygon( point , polygon ) ){
// 一個でも内包してたらそれで内包判断完了
// 一個でも内包してたらそれで内包判断完了 ⇒こうするかどうかは今後選択にすべき(複数のポリゴンに内包されてて、そのポリゴンはどんな属性なのかを知りたいケースがある)2019/12/19
if ( superParam.getIncludedPolygonAttr ){ // 2019/12/19
// console.log("polygon:",polDoc[plc]," point:",poiDoc[pic]);
poiDoc[pic].includedPolygonAttr = polDoc[plc].src.getAttribute("content");
}
ansPois.push(poiDoc[pic]);
console.log("PUSH");
// console.log("PUSH");
counter = skipPOIcounter(compArray, counter);
}
} else { // 非内包判定
Expand All @@ -384,13 +401,13 @@ var svgMapGIStool = ( function(){

var currentTime = new Date().getTime();
++ counter;
if ( currentTime - startTime > 500 ){ // 0.3秒以上たったらちょっと(30ms)休憩
if ( currentTime - startTime > 500 ){ // 0.5秒以上たったらちょっと(20ms)休憩
console.log( "call laze compu",counter, compArray.length , Math.ceil(counter / compArray.length));
if ( superParam.progrssCallback ){
superParam.progrssCallback( Math.ceil(1000 * counter / compArray.length) / 10 );
}
startTime = new Date().getTime();
setTimeout(getIncludedPointsS3, 30 , geom, superParam, compArray , counter , startTime , ansPois);
setTimeout(getIncludedPointsS3, 20 , geom, superParam, compArray , counter , startTime , ansPois);
break;
}
}
Expand All @@ -410,15 +427,18 @@ var svgMapGIStool = ( function(){
function skipPOIcounter(compArray, counter){
// console.log("called:skipPOIcounter:",counter);
var ansCounter = counter;
var currentPoiC = compArray[counter][1];
var currentPoiC = compArray[counter][1]; // [1]がPOIの値？じゃないよ・・・
var currentPoiDC = compArray[counter][0]; // [0]でPOIのドキュメントの値も評価しないとダメ DEBUG 2019/12/20
var poiC = currentPoiC;
while ( poiC == currentPoiC ){
var poiDC = currentPoiDC;
while ( (poiC == currentPoiC && poiDC == currentPoiDC ) ){
++ansCounter;
if ( ansCounter == compArray.length ){
console.log("BREAK.....");
// console.log("BREAK.....");
break;
}
poiC = compArray[ansCounter][1];
poiDC = compArray[ansCounter][0];
}
return ( ansCounter -1);
}
Expand Down Expand Up @@ -670,7 +690,7 @@ var svgMapGIStool = ( function(){
// 2018/6/8 S.Takagi
// range: [hueRangemin,hueRangemax] or [[hueRange1min,hueRange1max],[...]] or {hue:[[range1min,range1max],[...]],satulation:[[range1min,range1max],[...]],value:[[range1min,range1max],[...]],alpha:[[range1min,range1max],[...]]}
// poiID_or_pointsには、POINTジオメトリが入ってるレイヤIDもしくは、直接POINTジオメトリの配列を入れる
function getInRangePoints(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback ){
function getInRangePoints(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry ){
halt = false;
var superParam = {
coverageDocTreeID: coverID,
Expand All @@ -685,9 +705,15 @@ var svgMapGIStool = ( function(){
superParam.pointsDocTreeID= poiID_or_points;
}
console.log( "called getInRangePoints: poi,cover:", poiID_or_points, coverID," range:", superParam.range);

svgMap.captureGISgeometriesOption(true); // カバレッジが必要
// captureGISgeometriesはviewportにあるオブジェクトのみ取ってくる仕様
svgMap.captureGISgeometries(getInRangePointsS2 , superParam );
if ( ! preCapturedGeometry ){
// captureGISgeometriesはviewportにあるオブジェクトのみ取ってくる仕様
svgMap.captureGISgeometries(getInRangePointsS2 , superParam );
} else {
console.log("getInRangePoints: USE preCapturedGeometry");
getInRangePointsS2(preCapturedGeometry, superParam);
}
}

function getRangeParam(rangeData){
Expand Down
44 changes: 38 additions & 6 deletions SVGMapLv0.1_r15.js
View file
Expand Up @@ -161,6 +161,7 @@
// 2019/11/14 : refreshScreen()の排他制御導入
// 2019/11/14 : ビットイメージにもキャッシュ不使用オプション有効化
// 2019/11/14 : editableレイヤーでも、レイヤ非表示にしたら、DOMを消去することに仕様変更
// 2019/12/26 : refreshScreen()の効率化 主にcaptureGisGeometries()->vectorGISの高性能化を図るため
//
//
// Issues:
Expand Down Expand Up @@ -190,6 +191,7 @@
// レイヤーごとのUI, レイヤーごとの凡例等
// IE < 11実装の除去
// POIや2Dベクタをクリックしたとき、レイヤ文書に対して、イベントを飛ばしてあげると良いと思う
// refreshScreen()でgeoGeomを取得するというパターンはあるが、zoom/pan時にもそれができるともう一段効率化するかも？(ただかなりいろいろ非同期処理が絡むので・・・2019/12
//
// devNote:
// http://svg2.mbsrv.net/devinfo/devkddi/lvl0.1/airPort_r4.html#svgView(viewBox(global,135,35,1,1))
Expand Down Expand Up @@ -1128,7 +1130,7 @@ function dynamicLoad( docId , parentElem ){ // アップデートループのル
}
// console.log("checkDeletedNodes", existNodes);
checkDeletedNodes( mapCanvas );
if ( ticker && !pathHitTest.enable ){ // スマホなどでクリックしやすくするためのティッカー ただし単なるpathHitTestのときは無限ループが起きるのでパスする 2017.7.31 pathHitTest.enableチェックせずとも無限ループは起きなくなったはず 2018.1.18
if ( ticker && !pathHitTest.enable && !GISgeometriesCaptureFlag){ // スマホなどでクリックしやすくするためのティッカー ただし単なるpathHitTestのときは無限ループが起きるのでパスする 2017.7.31 pathHitTest.enableチェックせずとも無限ループは起きなくなったはず 2018.1.18 GISgeometriesCapture中はtickerの表示は不要なので高速化のため外す2019.12.26
checkTicker(); // ここで呼び出しただけでは、ロード中のレイヤのオブジェクトは拾えないので、スクロール・伸縮などで新たに出現するオブジェクトはTicker表示されない(ちょっとスクロールするとかしないと表示されない) バグに近いです
}
// console.log("call checkLoadCompleted : ending dynamicLoad");
Expand Down Expand Up @@ -1826,8 +1828,9 @@ function parseSVG( svgElem , docId , parentElem , eraseAll , symbols , inCanvas
if ( GISgeometry && onViewport ){ // ひとまずviewportにあるオブジェクトだけを収集する機能を検証2016.12.7
if (GISgeometry.href){ // 2018/2/27 debug
GISgeometry.href = getImageURL(GISgeometry.href,docDir);
if ( imgElem.naturalHeight > 0 ){ // ロードできてないイメージは外す。 cesiumのimageryではerr404imgで動作が停止する・・　何とかしてよねぇ‥
if ( imgElem.naturalHeight > 0 || GISgeometry.href.indexOf("data:")==0){ // ロードできてないイメージは外す。 cesiumのimageryではerr404imgで動作が停止する・・　何とかしてよねぇ‥
// ただし、ロード済みでないとこの値はセットされないので・・　ロード中にgisgeomを呼ぶパターンでは使えないはず・・ 2018.2.27
// dataURLの場合は、データは実存するにもかかわらずnaturalHeightの設定が遅延するので・・・なんか、こういう話じゃなかも・・(これだと本当にロードが遅延してるdataURLじゃないコンテンツの場合にどうするかがわからない感じもするが・) 2019/12/26
GISgeometries[docId].push(GISgeometry);
}
} else {
Expand Down Expand Up @@ -6635,18 +6638,42 @@ function contColorSet() {
}
}

function refreshScreen(noRetry){
var retryingRefreshScreen = false;
function refreshScreen(noRetry, parentCaller, isRetryCall){
// スクロール・パンを伴わずに画面の表示を更新(内部のSVGMapDOMとシンクロ)する処理
// SVGMapコンテンツ全体のDOMトラバースが起きるため基本的に重い処理
// SVGMapLv0.1.jsは画面の更新は定期的に行われ"ない" 実際は末尾のdynamicLoad()でそれが起きる
//
// この関数は、データのロードが起きる可能性があるため、非同期処理になっている。
// viewBoxは変化しないので、タイルコンテンツの非同期読み込みはないものの、
// 直前に外部リソースを読み込むDOM編集が起きたケースが非同期になる。
// 一方、他の非同期読み込みが進んでいるときに動作することは好ましくないので・・

// ペンディングされている間に、更に新たなrefreshScreenが来た場合は、原理的に不要(caputureGISgeomも含め)のはずなので無視する。
if ( retryingRefreshScreen && !isRetryCall){
console.log( "Is refreshScreen retry queue:: SKIP this Call" );
return;
}

var rsCaller = ((refreshScreen.caller).toString()).substring(0,20);
console.log("called refreshScreen: caller:",rsCaller, " parentCaller:",parentCaller);
if ( loadCompleted == false){ // loadCompletedしてないときに実行すると破綻するのを回避 2019/11/14
if ( !noRetry ){
console.log( "NOW LOADING:: delay and retry refreshScreen" );
setTimeout(refreshScreen , 100); // 何度でもリトライし必ず実行することにする・・(問題起きるかも？)
setTimeout(function(){
refreshScreen(noRetry, rsCaller, true);
}, 10); // 何度でもリトライし必ず実行することにする・・(問題起きるかも？)
retryingRefreshScreen = true;
} else {
console.log( "NOW LOADING:: SKIP refreshScreen" );
}
return;
} else {
retryingRefreshScreen = false;
}
// console.log("called refreshScreen from", refreshScreen.caller);
loadCompleted = false; // 2016.11.24 debug この関数が呼ばれるときは少なくとも(描画に変化がなくとも) loadCompletedをfalseにしてスタートさせないと、あらゆるケースでの描画完了を検知できない
dynamicLoad( "root" , mapCanvas );
dynamicLoad( "root" , mapCanvas ); // 以前はrefreshScreenのためにこの関数を生で呼んでいたが、上のいろんな処理が加わったので、それは廃止している（はず）
}

// サンプルその１
Expand Down Expand Up @@ -7072,6 +7099,11 @@ var GISgeometries;

function captureGISgeometries( cbFunc , prop1 , prop2 , prop3 , prop4 , prop5 , prop6 , prop7 ){ // 非同期、callbackFuncいるだろうね
// console.log(cbFunc);
if ( GISgeometriesCaptureFlag ){ // 2019/12/24 排他制御
console.log("Now processing another captureGISgeometries. Try later.");
cbFunc(false);
return ( false );
}
GISgeometriesCaptureFlag = true;
delete GISgeometries;
GISgeometries = new Object;
Expand All @@ -7085,7 +7117,7 @@ function captureGISgeometries( cbFunc , prop1 , prop2 , prop3 , prop4 , prop5 ,
}

function prepareGISgeometries(cbFunc , prop1 , prop2 , prop3 , prop4 , prop5 , prop6 , prop7 ){
// console.log("Called prepareGISgeometries GISgeometries:", GISgeometries);
// console.log("Called prepareGISgeometries in resp to captGISgeom GISgeometries:", GISgeometries);
// DEBUG 2017.6.12 geojsonの座標並びが逆だった・・・
for ( var docId in GISgeometries ){
var layerGeoms = GISgeometries[docId];
Expand Down

0 comments on commit eb51207

Please sign in to comment.