城市那么大我想可视化~一座城市想要做可视化应用开发是个超超大的工程，别说是一座城市，就是北京的朝阳区、海淀区单拉出来做做都会涉及到好多数据。当然以及必然是有办法实现的。
如果你想找解决方案，这个可以有。
智慧城市三维可视化管理系统以城市基础设施管理、安防监控、告警工单、人车定位和快速查询为基础能力，以城市部件、能源电力、公共安全、地理水文为应用场景。以全局视角构建城市级别可管、可控、可溯的三维可视化管理平台。
如果你想自己开发三维城市应用，这个也可以有~
CityBuilder 是 ThingJS 平台提供的城市级别搭建组件。CityBuilder 支持标准 GIS 数据导入，也支持 CamBuilder 所搭建的场景模型整合，还支持常规 3DSMax 模型文件导入。
CityBuilder可在城市乃至地球这样大尺度区域上创建、展示场景，为智慧城市类应用提供强大平台支持。
CityBuilder 是一款交互式配置 3D 地图的 SaaS 平台，基于 ThingJS 和 3D GIS 可视化技术实现，是 ThingJS 的可视化搭建组件之一，专注于城市级尺度 3D 可视化。
CityBuilder 也是一个设计师与开发者协同工作的平台，设计师来制作“活”的 3D 地图效果，开发者专心致志地写业务的代码逻辑，两个角色尽其所长，创造专业价值，共同实现终端用户的基本生产需求和可视化情感需求。
CityBuilder 致力于帮助用户快速搭建城市 3D 场景，并支持应用于开发环境中，为团队有效地降低开发门槛、缩短开发周期、减少开发成本。
来选择你的城市范围开搭吧~
打开指定全景图.js
/**
* 说明：画点，画线，打开指定的全景图。
* 操作：
* 点击 创建点 按钮 根据 position 字段的值 在场景中创建全景图的点位
* 点击 创建线 按钮 将全景图的点位 根据数据关系 创建路径
* 点击 创建出来的点图标 打开相应点位对应的全景图
*/
// 加载全景图插件
THING.Utils.dynamicLoad('/panooss/pano/js/thing.pano.min.js', function () {
// 创建App
var app = new THING.App({
url: "models/uinnova",
"skyBox": "BlueSky"
});
// 全景图数据
var panoData = {
"config": {
"panos": [{
"panoID": "PUBLIC/a15355465645611000",
"title": "开始",
"correction": "0",
"startH": "-180",
"startV": "0",
"hotspots": [{
"name": "spot1",
"nextPanoID": "PUBLIC/a15355465645611001",
"h": "180",
"v": "0"
}
],
"position": {
"parent": "Ground",
'position': [-10.4, 0, 27.9]
}
}, {
"panoID": "PUBLIC/a15355465645611001",
"title": "门口1",
"correction": "0",
"startH": "0",
"hotspots": [{
"nextPanoID": "PUBLIC/a15355465645611000",
"h": "0",
"v": "0"
}, {
"name": "spot1",
"nextPanoID": "PUBLIC/a15355465645611002",
"h": "180",
"v": "0"
}
],
"position": {
"parent": "Ground",
"position": [-16.3, 0, 27.9]
}
}, {
"panoID": "PUBLIC/a15355465645611002",
"title": "门口2",
"correction": "0",
"startH": "0",
"hotspots": [{
"nextPanoID": "PUBLIC/a15355465645611001",
"h": "0",
"v": "0"
}, {
"name": "spot1",
"nextPanoID": "PUBLIC/a15355465645611003",
"h": "180",
"v": "0"
}
],
"position": {
"parent": "Ground",
"position": [-23.6, 0, 27.9]
}
}, {
"panoID": "PUBLIC/a15355465645611003",
"title": "门口拐弯",
"correction": "0",
"startH": "0",
"hotspots": [{
"nextPanoID": "PUBLIC/a15355465645611002",
"h": "0",
"v": "0"
}, {
"name": "spot1",
"nextPanoID": "PUBLIC/a15355465645611004",
"h": "-90",
"v": "0"
}
],
"position": {
"parent": "Ground",
"position": [-27.6, 0, 27.9]
}
}, {
"panoID": "PUBLIC/a15355465645611004",
"title": "入门口",
"correction": "0",
"startH": "0",
"hotspots": [{
"nextPanoID": "PUBLIC/a15355465645611003",
"h": "90",
"v": "0"
}, {
"name": "spot1",
"nextPanoID": "PUBLIC/a15355465645611005",
"h": "180",
"v": "0"
}
],
"position": {
"parent": "Ground",
"position": [-27.6, 0, 23.1]
}
}, {
"panoID": "PUBLIC/a15355465645611005",
"title": "进入门口",
"correction": "0",
"startH": "0",
"hotspots": [{
"nextPanoID": "PUBLIC/a15355465645611004",
"h": "0",
"v": "0"
}, {
"name": "spot1",
"nextPanoID": "PUBLIC/a15355465645611006",
"h": "-90",
"v": "10"
}
],
"position": {
"parent": "4",
"position": [-30, 0, 23.1]
}
}, {
"panoID": "PUBLIC/a15355465645611006",
"title": "进入门口上台阶",
"correction": "0",
"startH": "0",
"hotspots": [{
"nextPanoID": "PUBLIC/a15355465645611005",
"h": "90",
"v": "0"
}, {
"name": "spot1",
"nextPanoID": "PUBLIC/a15355465645611006",
"h": "-90",
"v": "0"
}
],
"position": {
"parent": "4",
"position": [-30, 0.91, 17.4]
}
}
],
"tours": []
}
}
// 创建全景图所在位置点
function createPoint() {
var points = app.query("panoPoint");
for (var i = 0; i < points.length; i++) {
points[i].destroy();
}
var panos = panoData.config.panos;
for (var j in panos) {
var pano = panos[j];
var position = pano.position;
var p = position.parent;
var marker = app.create({
type: "Marker",
position: position.position,
size: 3,
parent: app.query(p)[0],
url: "https://www.thingjs.com/static/images/marker01.png",
name: "panoPoint"
});
marker['panoID'] = pano.panoID;
// 设置永远显示在最上层
marker.style.alwaysOnTop = true;
marker.on(THING.EventType.SingleClick, function (ev) {
// 打印点击图标 所对应的 全景图 id
console.log(ev.object.panoID);
// 切换加载指定全景图
THING.PanoManager.changePano(ev.object.panoID);
})
}
}
// 已知两点，创建连线
function createPanoLine(startPosition, endPosition) {
app.create({
type: 'RouteLine',
arrowFlag: false,
name: "panoLine",
points: [[startPosition[0], startPosition[1] + 0.1, startPosition[2]],
[endPosition[0], endPosition[1] + 0.1, endPosition[2]]],
image: 'https://www.thingjs.com/static/images/line01.png',
});
}
// 创建热点之间的连线
function createLine() {
var lines = app.query("panoLine");
for (var i = 0; i < lines.length; i++) {
lines[i].destroy();
}
var points = app.query("panoPoint");
var panos = panoData.config.panos;
var pointMap = [];
for (var i = 0; i < panos.length; i++) {
var startID = panos[i].panoID;
for (var j = 0; j < panos[i].hotspots.length; j++) {
var endID = panos[i].hotspots[j].nextPanoID;
var startPosition = null;
var endPosition = null;
for (var k = 0; k < points.length; k++) {
if (points[k].panoID == startID) {
startPosition = points[k].position;
continue;
}
else if (points[k].panoID == endID) {
endPosition = points[k].position;
continue;
}
}
if (startPosition != null && endPosition != null) {
var find = false;
for (var m = 0; m < pointMap.length; m++) {
if ((pointMap[m].point1.panoID == startID &&
pointMap[m].point2.panoID == endID) || (
pointMap[m].point1.panoID == endID &&
pointMap[m].point2.panoID == startID
)) {
find = true;
continue;
}
}
if (!find) {
pointMap.push({
point1: { panoID: startID, position: startPosition },
point2: { panoID: endID, position: endPosition }
});
}
}
}
}
for (var i = 0; i < pointMap.length; i++) {
createPanoLine(pointMap[i].point1.position, pointMap[i].point2.position);
}
}
// 创建UI界面
function createButton() {
THING.widget.Button('创建点', function () {
createPoint();
});
THING.widget.Button('创建线', function () {
createLine();
});
}
// 场景加载完事件
app.on('load', function (ev) {
// 进入园区层级
app.level.change(ev.campus);
// 创建全景图播放器
THING.PanoManager.createPlayer(panoData, {
fullscreen: false,
location: "right-top",
offsetX: 0,
offsetY: 0
}, {}, null, function () {
// 播放器创建完成
createButton();
});
});
})
