ThingsJs--学习笔记3：在springboot项目前端嵌入thingsjs页面，并在实现对它的跨域数据对接

效果图如下：
点击不同按钮，会在卫星地图中相应的数据坐标点加载出“水模型”。

================================================================================

代码写的急，写的不是很好，所以酌情参考。

================================================================================
1.在线编写thingsjs页面

var app = new THING.App();
app.background = [0, 0, 0];
// app.camera.earthFlyTo.
THING.Utils.dynamicLoad('https://www.thingjs.com/uearth/uearth.min.js', function () {
    // 创建一个地图
    var map = app.create({
        type: 'Map',
        attribution: 'Google',// 右下角地图版权信息   
        style: {
            night: false
        }
    });
    // map.visible = false;// 不显示地球

    // 创建一个瓦片图层
    var tileLayer1 = app.create({
        type: 'TileLayer',
        name: '卫星影像图层',
        // Google WGS84 卫星影像服务
        url: 'https://mt{0,1,2,3}.google.cn/vt/lyrs=s&x={x}&y={y}&z={z}'
    });
    // 将瓦片图添加到底图图层中
    map.addLayer(tileLayer1);
    app.camera.earthFlyTo({
        lonlat: [108.69187085000000000, 34.27071589999999900],
        height: 1500,
        disablePick: false
    });


    // 创建一个 ThingLayer
    var thingLayer = app.create({
        type: "ThingLayer",
        name: "thingLayer01"
    });
    // 将ThingLayer添加到地图中
    map.addLayer(thingLayer);




    new THING.widget.Button('积水', function () {
        //数据对接
        $.ajax({
            'headers': {
                "token": '31415926'// 请求头中带上了token数据，必须要有
            },
            //****PS!!!：请看代码后面的注意事项note3!!!***
            'url': "//localhost:8081/getModelData",  
            'type': "GET",
            'dataType': "json",
            'data': {},
            'success': function (data) {
                if (data.level0 != null) {
                    var level1 = data.level0;//获取json对象level0
                    for (var i = 0; i < level1.length; i++) {
                        var x = level1[i].lng;//经度
                        var y = level1[i].lat;//纬度
                     
                        var geoPoint = thingLayer.query('积水')[i];
                        if (!geoPoint) {
                            geoPoint = app.create({
                                type: 'GeoPoint',
                                name: '积水',
                                userData: { '类别': '水' },
                                coordinates: [x, y],
                                modelAngle: 90, // 模型旋转角度
                                renderer: {
                                    type: 'model', // model 代表使用模型
                                    url: 'https://model.3dmomoda.com/models/1e476bfd0670483695f4b7a2c00b48f3/0/gltf/', // 模型地址
                                    size: 5  // 缩放比例
                                }
                            });
                            //设置不透明度是0.5，如果设置成1.0即为完全不透明
                            geoPoint.style.opacity = 0.1;
                            //设置物体附加颜色
                            geoPoint.style.color = "#00ffff";//青色
                            thingLayer.add(geoPoint);// 将一个点加到ThingLayer中
                        }
                        else {
                            geoPoint.visible = !geoPoint.visible;
                        }
                    }
                }
                else {
                    alert("沒有“积水”等级的点！");
                }
            },
            error: function (data) {
                console.log("未获取到level1数据！");
            }
        });
    });

    new THING.widget.Button('轻度内涝', function () {
        //数据对接
        $.ajax({
        ....//和上面的差不多，我就不复制了
        });  
    });

    new THING.widget.Button('中度内涝', function () {
        //数据对接
        $.ajax({
        ....//和上面的差不多，我就不复制了
        });  
    });

    new THING.widget.Button('严重内涝', function () {
        //数据对接
        $.ajax({
        ....//和上面的差不多，我就不复制了
        });  
    });
});

note1：
code中的模型地址，可以改变成你想要的模型，只要有的url（https://model.3dmomoda.com/models/+模型id+/0/gltf/）就行。

模型id的获取方法如下：

2.通过 <iframe标签> 在项目前端嵌入用 ThingsJs 在线开发的页面的引用地址

        <!--<iframe src="https//www.thingjs.com/pp/74abe68ce0a3bacc5f019f02" style="width: 100%;height: 1024px"></iframe>-->
        <iframe src="//www.thingjs.com/pp/fb9620041686b0b9d1228f40" style="width: 100%;height: 1024px"></iframe>

note2：
如何获取在线开发的 ThingsJs页面的引用地址?

note3：

关于相对协议：

我在步骤1代码中写到了 ‘url’: “//localhost:8081/getModelData”,****步骤2代码中写到了src="//www.thingjs.com/pp/fb9620041686b0b9d1228f40"。

完整的URL其实是 “http//localhost:8081/getModelData” ，但是我要引用在springboot项目前端的ThingsJs（在线开发的）页面实际上默认是https://www.thingjs.com/pp/fb9620041686b0b9d1228f40。

这就相当于我在https协议中发起了http请求，这违反了https的安全性要求。最简单的方法是使用相对协议，即将https和http头都去掉，这样他们会自己进行合适的匹配。

值得注意的是，https中嵌套了http和有没有进行跨域处理无关，因为浏览器处于安全考虑会在跨域前就将请求拦截掉。

（如果还是没看懂，可以看看这篇文章）->->-> 传送link

3. springboot中通过@CrossOrigin注解，快速又简单进行跨域处理

    /**
     * @return 返回给seeperforecast1.html页面嵌套的thingjs3d立体界面需要的数据（跨域ajax请求）
     */
    //@CrossOrigin(origins = {"https://www.thingjs.com", "3600"})
    @CrossOrigin(origins = {"*", "3600"})
    //实现跨域注解
    //origin="*"代表所有域名都可访问
    //maxAge飞行前响应的缓存持续时间的最大年龄，简单来说就是Cookie的有效期 单位为秒
    //若maxAge是负数,则代表为临时Cookie,不会被持久化,Cookie信息保存在浏览器内存中,浏览器关闭Cookie就消失
    //"Access-Control-Allow-Origin", "*"
    @RequestMapping(value = "/getModelData", method = RequestMethod.GET)
    @ResponseBody
    public Map<String, List<Points>> getModelData() {
        Map<String, List<Points>> returnData = new Main().returnResult();
        return returnData;
    }