效果圖如下：
點擊不同按鈕，會在衛星地圖中相應的數據座標點加載出“水模型”。
================================================================================
代碼寫的急，寫的不是很好，所以酌情參考。
================================================================================
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;
}