362 lines
12 KiB
HTML
362 lines
12 KiB
HTML
<!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">
|
|
<link rel="stylesheet" href="./bootstrap.min.css"/>
|
|
<link rel="stylesheet" href="./example.css"/>
|
|
<script src="./bootstrap.bundle.min.js"></script>
|
|
<script src="./jquery-1.8.0.js"></script>
|
|
<title>例子</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container text-center">
|
|
|
|
<div class="row align-items-start">
|
|
<div class="col-3">
|
|
<div class="action-list">
|
|
<button type="button" class="btn btn-primary debugInfo">打印websocket当前在线用户</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col">
|
|
{"code": "21u3i21i21g4i1192982u3","function": "CubeControl.ChangeColor","type": "noCallBack","parameters":
|
|
{"id": "2","color": "red"}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row align-items-start" style="margin-top:20px">
|
|
<div class="col-3">
|
|
<div class="action-list">
|
|
<button type="button" class="btn btn-primary sendToWeb">web发送给web</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col">
|
|
{"code": "21u3i21i21g4i1192982u3","function": "CubeControl.ChangeColor","type": "noCallBack","parameters":
|
|
{"id": "2","color": "red"}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row align-items-start" style="margin-top:20px">
|
|
<div class="col-3">
|
|
<div class="action-list">
|
|
<button type="button" class="btn btn-primary createApiLayers">创建Api数据图层</button>
|
|
<button type="button" class="btn btn-primary showLayers">根据type显示Api数据图层</button>
|
|
<button type="button" class="btn btn-primary hideLayers">根据type隐藏Api数据图层</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col">
|
|
{"code": "21u3i21i21g4i1192982u3","function": "CubeControl.ChangeColor","type": "noCallBack","parameters":
|
|
{"id": "2","color": "red"}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row align-items-start" style="margin-top:20px">
|
|
<div class="col-3">
|
|
<div class="action-list">
|
|
<button type="button" class="btn btn-primary showTerrainLayers">显示Terrain图层</button>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
{"code": "21u3i21i21g4i1192982u3","function": "CubeControl.ChangeColor","type": "noCallBack","parameters":
|
|
{"id": "2","color": "red"}}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row align-items-start" style="margin-top:20px">
|
|
<div class="col-3">
|
|
<div class="action-list">
|
|
<button type="button" class="btn btn-primary showWMSLayers">显示WMS图层</button>
|
|
<button type="button" class="btn btn-primary hideWMSLayers">隐藏WMS图层</button>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
{"code": "21u3i21i21g4i1192982u3","function": "CubeControl.ChangeColor","type": "noCallBack","parameters":
|
|
{"id": "2","color": "red"}}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row align-items-start" style="margin-top:20px">
|
|
<div class="col-3">
|
|
<div class="action-list">
|
|
<button type="button" class="btn btn-primary showTMSLayers">显示TMS图层</button>
|
|
<button type="button" class="btn btn-primary hideTMSLayers">隐藏TMS图层</button>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
{"code": "21u3i21i21g4i1192982u3","function": "CubeControl.ChangeColor","type": "noCallBack","parameters":
|
|
{"id": "2","color": "red"}}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row align-items-start" style="margin-top:20px">
|
|
<div class="col-3">
|
|
<div class="action-list">
|
|
<button type="button" class="btn btn-primary show3dTilesLayers">显示3dtile图层</button>
|
|
<button type="button" class="btn btn-primary hide3dTilesLayers">隐藏3dtile图层</button>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
{"code": "21u3i21i21g4i1192982u3","function": "CubeControl.ChangeColor","type": "noCallBack","parameters":
|
|
{"id": "2","color": "red"}}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<script type="module">
|
|
var client = null;
|
|
import {web3DCoreSocket, MapServerControlle,Web3DCore,SunLightController} from './index.esm.js';
|
|
|
|
var ws_url = localStorage.getItem("ws_url")
|
|
var appId = localStorage.getItem("appId")
|
|
var sessionId = localStorage.getItem("sessionId")
|
|
var clientId = localStorage.getItem("clientId")
|
|
|
|
if (ws_url == null) {
|
|
ws_url = "ws://192.168.2.201:8089/hs-core"
|
|
appId = "1201"
|
|
sessionId = "1201"
|
|
clientId = "main_Page"
|
|
}
|
|
|
|
localStorage.setItem("ws_url", ws_url)
|
|
localStorage.setItem("appId", appId)
|
|
localStorage.setItem("sessionId", sessionId)
|
|
localStorage.setItem("clientId", clientId)
|
|
|
|
|
|
var wsUrl = ws_url
|
|
|
|
const ws = new web3DCoreSocket(wsUrl, {
|
|
appId: appId,
|
|
sessionId: sessionId,
|
|
clientId: clientId,
|
|
})
|
|
|
|
|
|
const mapServerController = new MapServerController(ws)
|
|
|
|
// const _ws_instance=Web3DCore.getInstance(wsUrl, {
|
|
// appId: appId,
|
|
// sessionId: sessionId,
|
|
// clientId: clientId,
|
|
// })
|
|
//
|
|
// const mapServerController = new MapServerController(_ws_instance)
|
|
//
|
|
|
|
ws.onMessage(data => {
|
|
console.log(data)
|
|
|
|
//用户点击3D场景中某个物体的时候
|
|
|
|
})
|
|
|
|
|
|
$(".debugInfo").click(function () {
|
|
mapServerController.debugInfo()
|
|
})
|
|
|
|
$(".createApiLayers").click(function () {
|
|
var data = {
|
|
"layerId": "xMFDF8sfLJ3NsBwmtN6X8JRfFOzpPk0n",
|
|
"extendData": {
|
|
"type": "api",
|
|
"layerType": "",
|
|
"icon": "",
|
|
"requestsType": "get",
|
|
"requestsContentType": "json",
|
|
"url": "http://webgl.jszy.xyz/doc/shuiku.json",
|
|
"headers": "h_1:123;h_2:123",
|
|
"paramerts": "abc1:abc1;abc2:abc2;abc3:abc3",
|
|
"postBody": "",
|
|
"treeStructure": "result;",
|
|
"fieldMapping": "resCode;resName;resName;stLgtd;stLttd",
|
|
"fieldType": "string;string;string;number;number"
|
|
}
|
|
}
|
|
mapServerController.createApiServiceLayer(data)
|
|
})
|
|
|
|
|
|
$(".showTerrainLayers").click(function () {
|
|
var data = {
|
|
"layerId": "xMFDF8sfLJ3NsBwmtN6X8JRfFOzpPk0n",
|
|
"extendData": {
|
|
"layerType": "Terrain图层名称",
|
|
"type": "terrain",
|
|
"icon": "图标路径",
|
|
"name": "Terrain图层名称",
|
|
"serverOrFile": true,
|
|
"url": "http://192.168.1.197:28881/guangdong_terrain/layer.json",
|
|
'layer': 'ne:countries'
|
|
}
|
|
}
|
|
mapServerController.showLayer(data)
|
|
})
|
|
|
|
|
|
$(".showLayers").click(function () {
|
|
var data = {
|
|
"layerId": "xMFDF8sfLJ3NsBwmtN6X8JRfFOzpPk0n",
|
|
"extendData": {
|
|
"type": "api",
|
|
"layerType": "大型水库",
|
|
"icon": "图标路径",
|
|
"requestsType": "get",
|
|
"requestsContentType": "json",
|
|
"url": "http://webgl.jszy.xyz/doc/shuiku.json",
|
|
"headers": "h_1:123;h_2:123",
|
|
"paramerts": "abc1:abc1;abc2:abc2;abc3:abc3",
|
|
"postBody": "",
|
|
"treeStructure": "result;",
|
|
"fieldMapping": "resCode;resName;resName;stLgtd;stLttd",
|
|
"fieldType": "string;string;string;number;number"
|
|
}
|
|
}
|
|
mapServerController.showLayer(data)
|
|
})
|
|
$(".hideLayers").click(function () {
|
|
var data = {
|
|
"layerId": "xMFDF8sfLJ3NsBwmtN6X8JRfFOzpPk0n",
|
|
"extendData": {
|
|
"type": "api",
|
|
"layerType": "大型水库",
|
|
"icon": "图标路径",
|
|
"requestsType": "get",
|
|
"requestsContentType": "json",
|
|
"url": "http://webgl.jszy.xyz/doc/shuiku.json",
|
|
"headers": "h_1:123;h_2:123",
|
|
"paramerts": "abc1:abc1;abc2:abc2;abc3:abc3",
|
|
"postBody": "",
|
|
"treeStructure": "result;",
|
|
"fieldMapping": "resCode;resName;resName;stLgtd;stLttd",
|
|
"fieldType": "string;string;string;number;number"
|
|
}
|
|
}
|
|
mapServerController.hideLayer(data)
|
|
})
|
|
|
|
|
|
$(".showWMSLayers").click(function () {
|
|
var data = {
|
|
"layerId": "xMFDF8sfLJ3NsBwmtN6X8JRfFOzpPk0n",
|
|
"extendData": {
|
|
"layerType": "WMS图层名称",
|
|
"type": "wms",
|
|
"icon": "图标路径",
|
|
"name": "WMS图层名称",
|
|
"serverOrFile": true,
|
|
"url": "https://wms.websitehai.com/geoserver/ows?",
|
|
'layer': 'ne:countries'
|
|
}
|
|
}
|
|
mapServerController.showLayer(data)
|
|
})
|
|
$(".hideWMSLayers").click(function () {
|
|
var data = {
|
|
"layerId": "xMFDF8sfLJ3NsBwmtN6X8JRfFOzpPk0n",
|
|
"extendData": {
|
|
"layerType": "WMS图层名称",
|
|
"type": "wms",
|
|
"icon": "图标路径",
|
|
"name": "WMS图层名称",
|
|
"serverOrFile": true,
|
|
"url": "https://wms.websitehai.com/geoserver/ows?",
|
|
'layer': 'ne:countries'
|
|
}
|
|
}
|
|
mapServerController.hideLayer(data)
|
|
})
|
|
|
|
|
|
$(".showTMSLayers").click(function () {
|
|
var data = {
|
|
"layerId": "xMFDF8sfLJ3NsBwmtN6X8JRfFOzpPk0n",
|
|
"extendData": {
|
|
"layerType": "TMS图层名称",
|
|
"type": "tms",
|
|
"icon": "图标路径",
|
|
"name": "TMS图层名称",
|
|
"serverOrFile": true,
|
|
"url": "http://192.168.1.197:28881/GuangDongL18/tilemapresource.xml"
|
|
}
|
|
}
|
|
mapServerController.showLayer(data)
|
|
})
|
|
|
|
$(".hideTMSLayers").click(function () {
|
|
var data = {
|
|
"layerId": "xMFDF8sfLJ3NsBwmtN6X8JRfFOzpPk0n",
|
|
"extendData": {
|
|
"layerType": "TMS图层名称",
|
|
"type": "tms",
|
|
"icon": "图标路径",
|
|
"name": "TMS图层名称",
|
|
"serverOrFile": true,
|
|
"url": "http://192.168.1.197:28881/GuangDongL18/tilemapresource.xml"
|
|
}
|
|
}
|
|
mapServerController.hideLayer(data)
|
|
})
|
|
|
|
|
|
$(".show3dTilesLayers").click(function () {
|
|
var data = {
|
|
"layerId": "xMFDF8sfLJ3NsBwmtN6X8JRfFOzpPk0n",
|
|
"extendData": {
|
|
"layerType": "3dtiles图层名称",
|
|
"type": "3dtiles",
|
|
"icon": "图标路径",
|
|
"name": "3dtiles图层名称",
|
|
"serverOrFile": true,
|
|
"url": "http://192.168.1.188:13432/3dtile/guangzhou/tileset.json"
|
|
}
|
|
}
|
|
mapServerController.showLayer(data)
|
|
})
|
|
|
|
$(".hide3dTilesLayers").click(function () {
|
|
var data = {
|
|
"layerId": "xMFDF8sfLJ3NsBwmtN6X8JRfFOzpPk0n",
|
|
"extendData": {
|
|
"layerType": "3dtiles图层名称",
|
|
"type": "3dtiles",
|
|
"icon": "图标路径",
|
|
"name": "3dtiles图层名称",
|
|
"serverOrFile": true,
|
|
"url": "http://192.168.1.188:13432/3dtile/guangzhou/tileset.json"
|
|
}
|
|
}
|
|
mapServerController.hideLayer(data)
|
|
})
|
|
|
|
// 1201-1201-web-main_Page
|
|
// 1201-1201-web-page2
|
|
// 1201-1201-web-page3
|
|
|
|
$(".sendToWeb").click(function () {
|
|
ws.sendToWebClient({
|
|
"code": "21u3i21i21g4i1192982u3",
|
|
"function": "CubeControl.ChangeColor",
|
|
"type": "noCallBack",
|
|
"parameters": {"key": "我是web发送给web的信息"}
|
|
}
|
|
)
|
|
})
|
|
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|