InteractiveViewerを使ってみたら

scatter3Dを拡大すると上下左右が消えるので

『四次元年表』の位置情報をscatter3Dで表示しているのだけれど、
拡大すると真ん中しか見えない。
これはよろしくない。
ということで、InteractivViewerで囲ってみたら、
ほほ、拡大したあと、上下左右に動くわ、よしよし。

と思ったら、回転しない

でも、おっと、せっかく回転するはずの三次元表示がうまく回らない。
競合するのか？
そもそも、拡大縮小もscatter3Dでできるのに、
さらにInteractiveViewerでもtrueにする必要があるのか？
うーん、回ってくれないのは困るんだけどな。

Simulatorの限界と思いますよ・・・と爺様はいう

ということで、実機テストしようと思ったら、
今度は実機が認識されない、という別問題に直面。
とりあえず、動作確認できないまま、「使ったよ」のcodeだけ報告。

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      constraints: const BoxConstraints.expand(),
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/images/sea.png'),
          fit: BoxFit.cover,
        ),
      ),
      child: Center(
        child: InteractiveViewer(　　<=ここ
          panEnabled: true,
          scaleEnabled: true,
          minScale: 1.0,
          maxScale: 5.0,
          child: SizedBox(
            width: 1200,
            height: 1000,
            child: maritimeData == null
                ? const CircularProgressIndicator()
                : Echarts(
              extensions: const [glScript],
              option: '''
                (function() {
                  return {
                    tooltip: {
                      show: true,
                      formatter: function(params) {
                        var data = params.data;
                        return 'Name: ' + data.name;
                      }
                    },
                    grid3D: {
                      viewControl: {
                        alpha: 40,
                        beta: -60,
                        projection: 'orthographic'
                      }
                    },
                    xAxis3D: {
                      type: 'value',
                      min: -90,
                      max: 90,
                      splitLine: {show: false},
                      name: 'Longitude',
                      axisLine: {
                        lineStyle: {color: '#E6E1E6'}
                      }
                    },
                    yAxis3D: {
                      type: 'value',
                      min: -90,
                      max: 90,
                      splitLine: {show: false},                  
                      name: 'Latitude',
                      axisLine: {
                        lineStyle: {color: '#E6E1E6'}
                      }
                    },
                    zAxis3D: {
                      type: 'value',
                      min: -1000,
                      max: 1000,
                      splitLine: {show: false},
                      name: 'timeline',
                      axisLine: {
                        lineStyle: {color: '#E6E1E6'}
                      }                                 
                    },
                    series: [
                      {
                        type: 'scatter3D',
                        symbolSize: 6,
                        data: ${json.encode(maritimeData)},
                        label: {
                          show: true,
                          textStyle: {
                            fontSize: 12,
                            borderWidth: 1
                          },
                          formatter: function(param) {
                            return param.data.name;
                          }
                        },
                        itemStyle: {color: 'yellow', opacity: 0.8}    
                      },
                      {
                        type: 'scatter3D',
                        symbolSize: 3,
                        data: ${json.encode(coastLine)},
                        itemStyle: { color: 'white' } 
                      }, 
                      {
                        type: 'scatter3D',
                        symbolSize: 3,
                        data: ${json.encode(ridgeLine)},
                        itemStyle: {color: '#bc8f8f'}              
                      }, 
                      {
                        type: 'scatter3D',
                        symbolSize: 3,
                        data: ${json.encode(trenchLine)},
                        itemStyle: {color: '#800000'}              
                      },       
                    ]
                  };
                })()
              ''',
            ),
          ),
        ),
      ),
    ),
  );
}