Android 实现三维空间坐标系（WebView与JS交互，支持多条曲线，可设置坐标轴翻转等）

置顶陈啊

已于 2023-11-17 16:21:31 修改

阅读量547

点赞数 1

文章标签： android javascript

于 2023-11-17 16:01:04 首次发布

本文链接：https://blog.csdn.net/hongranzuoxiang/article/details/134465208

版权

全部代码已经上传，点击上方进行下载
3D空间坐标系样式
支持多条曲线的绘制，可旋转拖动放大缩小

1.布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <WebView
        android:id="@+id/web_view1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

2.activity中：

 private WebView web_view;
    private JSONObject jsonObject;
    private ArrayList<ArrayList<JSONObject>> objectlist;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        web_view = findViewById(R.id.web_view1);
        web_view.getSettings().setJavaScriptEnabled(true);
        //定义json，用于传值给html，然后在html中获取传入的数据进行显示。
        objectlist = new ArrayList<>();
        for (int i = 0; i < 3; i++) {
            ArrayList<JSONObject>  jsonObjectlist = new ArrayList<>();
             for (int j = 0; j < 20; j++) {
                JSONObject jsonObject = new JSONObject();
                try {
                    jsonObject.put("x", j);
                    jsonObject.put("y", j);
                    jsonObject.put("z", j);
                } catch (JSONException e) {
                    e.printStackTrace();
                }
                jsonObjectlist.add(jsonObject);
            }
            objectlist.add(jsonObjectlist);
        }

        //加载html
        web_view.loadUrl("file:///android_asset/index.html");



        //这里是当html加载完成后执行传值操作
        web_view.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                String jsonString = objectlist.toString();
                view.evaluateJavascript("javascript:test('" + jsonString + "');", null);
            }
        });
    }

3.写一个html，命名为index.html，并放在Android项目的assets文件目录下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3d图表</title>
    <script src="./js/echarts.js"></script>
    <script src="./js/echarts-gl.js"></script>

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        html,
        body {
            width: 100%;
            height: 100vh;        
        }

        .main {
            width: 100%;
            height: 100vh;        
        }

         .popup {
      display: none; /* 默认隐藏弹窗 */
      position: fixed; /* 弹窗位置固定 */
      top: 50%; /* 垂直居中 */
      left: 50%; /* 水平居中 */
      transform: translate(-50%, -50%); /* 使用 transform 实现居中 */
      width: 300px; /* 弹窗宽度 */
      padding: 20px; /* 弹窗内边距 */
      background-color: #f1f1f1; /* 弹窗背景色 */
      border: 1px solid #ccc; /* 弹窗边框 */
      border-radius: 5px; /* 弹窗圆角 */
    }


    </style>

</head>

<body>

<div class="main">

</div>

<script>

 function test(jsonString) {
         var data1 = JSON.parse(jsonString);
         var data = [];
         var chartDom = document.querySelector('.main');
         var myChart = echarts.init(chartDom);
         var option;
         // 定义一个数组
         const series = []
         //循环接数据
         for (var i = 0; i < data1.length; i++) {
              var data = [];
              for (var j = 0; j < data1[i].length; j++) {
                data.push([data1[i][j].x, -data1[i][j].z, data1[i][j].y]);
               }
                //每条分支画线
                   series.push({
                        type: 'line3D',
                        data: data,
                        lineStyle: {
                    width: 4
                   }
                   })
            }


         option = {
             tooltip: {},
             backgroundColor: '#fff',
             xAxis3D: {
                 type: 'value',
                },
             yAxis3D: {
                type: 'value',
                },
             zAxis3D: {
                type: 'value',
                },
             grid3D: {
                viewControl: {
                   projection: 'orthographic'
                },
                },
             series,
            };
            option && myChart.setOption(option);
         }
</script>

</body>

</html>