效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>惠安3D门户</title>
<script src="https://cesiumjs.org/releases/1.56.1/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.56.1/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
.area {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
list-style: none;
}
.area li {
float: left;
margin: 0 20px;
min-width: 60px;
padding: 0 15px;
height: 32px;
text-align: center;
;
background-image: -webkit-linear-gradient(bottom, rgb(0, 0, 0, 0.8), rgb(0, 170, 255));
color: #fff;
line-height: 32px;
cursor: pointer;
border-radius: 5px;
}
.cl {
position: absolute;
bottom: 30px;
right: 30px;
width: 60px;
height: 32px;
color: #fff;
line-height: 32px;
text-align: center;
border-radius: 5px;
background: #00aaff;
}
.cesium-viewer-bottom {
display: none;
}
</style>
</head>
<body>
<div id="cesiumContainer" style="width: 100%; height:100%"></div>
<ul class="area">
<li>3D展馆</li>
</ul>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
Cesium.Ion.defaultAccessToken =
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNGM2MmQ0YS02NjJjLTQ5YWEtYTM4Zi1mYzMwZDk0OGI3ZDIiLCJpZCI6MTAxMTcsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NTU2NzA3NTF9.k6R983S4fJLVXA-SVnlAJIqk5cp0zx3eNmcpl4AnQvM';
var viewer = new Cesium.Viewer('cesiumContainer', {
geocoder: true,
homeButton: true,
sceneModePicker: true,
baseLayerPicker: true,
navigationHelpButton: true,
animation: false, //左下角的动画控件的显示
shouldAnimate: false, //控制模型动画
timeline: false,
fullscreenButton: true,
});
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, 20.4, 110.4, 61.2); //homebutton默认跳转位置
// $('.cesium-home-button').click();
viewer.camera.zoomIn((1000000))
var data = [{
'hb': [{
'name': '政府',
'link': '查看详情',
'image': 'img/2.png',
'point': {
lng: 118.7968179295,
lat: 25.0006637223
},
'url': 'http://www.huian.gov.cn/',
'description': `辖境东北连泉州湾，西接洛江区，北邻泉港区，南隔泉州湾与晋江市相望。总面积489.42平方公里（不含泉州台商投资区），2017年，全县总人口809226人 [1] 。人口以汉族为主，有回、畲、蒙古等民族。惠安县，是闽南著名侨乡和台湾汉族同胞主要祖籍地之一。素有“海滨邹鲁”、“雕艺之乡”、“建筑之乡”、“渔业强县”、“食品工业强县”之美誉。
惠安海岸有黄金海岸之称， 全长192千米， 占全省的6 % 。沿海港湾密布。 净峰斗尾港是大陆至台湾西海岸的最近港口之一， 可供30万吨级巨轮自由出入， 是规划建设中的中国四大中转港口之一。 崇武港是国家中心渔港， 半月湾、 青山湾、 净峰惠女湾竞秀争艳， 崇武海岸则被国家地理杂志评选为“ 中国最美的八大海岸” 之一。 惠安为极具实力的县市， 其综合竞争力位居福建省第三位， 2010 年位居全国百强县（ 市） 第廿九位。
全县辖15个镇、 1 个民族乡（ 百崎回族乡）， 县政府驻螺城镇。 惠安县以惠安女独特民俗及石雕而闻名。 县境内北宋洛阳桥、 明代崇武城均为国家重点文物保护单位。
2017 年， 惠安县实现地区生产总值688 .76 亿元， 增长8 .1 % （按可比价计算， 下同）， 比年初8 .0 % 的增长目标高出0 .1 个百分点， 与上年同期比提高了0 .2 个百分点。`
}, {
'name': '数字展馆',
'link': 'VR漫游',
'image': 'img/7.png',
'point': {
lng: 118.8622117800,
lat: 24.9501327800
},
'url': 'http://www.51jianmo.com/#/singleScene?m=c3e5c498-82f5-1a41-5dfa-263f2b316a52&qs=1&play=1&pavilionId=df7a9bc0-e63d-11e8-b4ff-8cec4b489356&userId=cdded7df-5c31-ae79-a460-a966101fc840',
'description': `公司生产基地位于泉州市惠安县山霞工业区,是一家生产规模宏大、技术力量雄厚、产品质量优良的石雕石材及建筑建材生产厂家。公司业务不仅遍布国内各省市，拥有自营进出口权，产品出口至世界各地。 公司业务涉及宗教古建石雕、园林庭院石雕、市政园林城市雕塑、陵园墓碑系列、石材幕墙及石材装饰工程等。`
}]
}]
$('.area li').map(function(i, v) {
$(v).click(function() {
clear();
console.log(Object.values(data[0]))
var arr = Object.values(data[0])[i];
//设置中心点
var a = 0;
var height=40000
center(arr[a].point.lng, arr[a].point.lat, height);
arr.map(function(val, idx) {
console.log(val)
point(val)
})
})
})
// 清除覆盖物
function clear() {
var dataSources = viewer.dataSources;
for (var i = 0; i < viewer.dataSources.length; i++) {
viewer.dataSources.remove(viewer.dataSources.get(i));
i--;
}
}
function point(v) {
if(v.contact){
var address=`<p style='color:#ccc;margin:5px 0'>法人代表：${v.contact.name}</p><p style='color:#ccc;margin:5px 0'>联系电话：${v.contact.phone}</p><p style='color:#ccc;margin:5px 0'>行业类别：${v.contact.type}</p><p style='color:#ccc;margin:5px 0'>地址信息：${v.contact.address}</p>`
}else{
var address='';
}
var czml = [{
"id": "document",
"name": "Basic CZML billboard and label",
"version": "1.0"
}, {
"id": "some-unique-id",
"name": "详细信息",
"description": "<p><a style='color:#ff9900;font-size:16px'>" + v.name + "</a></p>"+address+"<p style='text-indent:25px'>" + v.description +
"</p><a style='position:absolute;right:20px;top:20px;cursor:pointer;color:#108cf9;text-decoration: underline;' class='open' url= " +
v.url + ">" + v.link + "</a>",
"billboard": {
"image": v.image,
"scale": 0.5
},
"position": {
"cartesian": changePoint(v.point.lng, v.point.lat)
}
}];
viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
}
//单击鼠标左键画点
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
var first = 1;
handler.setInputAction(function(movement) {
console.log(first)
if (first == 1) {
var time = setInterval(function() {
var ele = $('.cesium-infoBox-iframe').contents().find(".open");
console.log(ele.html())
if (ele.html()) {
center(118.7681674300, 24.9684471100, 40000);
clearInterval(time)
first = 2;
}
}, 20)
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 谷歌坐标转换成xyz坐标
function changePoint(lng, lat) {
var ellipsoid = viewer.scene.globe.ellipsoid;
var coord_wgs84 = Cesium.Cartographic.fromDegrees(lng, lat, 0); //单位：度，度，米
var coord_xyz = ellipsoid.cartographicToCartesian(coord_wgs84);
return [coord_xyz.x, coord_xyz.y, coord_xyz.z]
}
// 设置视角中心点
function center(lng, lat, height) {
var initialPosition = new Cesium.Cartesian3.fromDegrees(lng, lat, height);
var homeCameraView = {
destination: initialPosition,
};
viewer.scene.camera.setView(homeCameraView);
}
// 初始位置
function init() {
var val = data[0].hb[0]
point(val);
center(val.point.lng, val.point.lat, 13000000);
}
init();
var timer = setInterval(function() {
var ele = $('.cesium-infoBox-iframe').contents().find(".open");
if (ele.html()) {
var url = ele.attr('url');
ele.click(function() {
setCookie('url', url);
window.open('iframe.html');
})
}
}, 20)
function setCookie(name, value) {
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
</script>
</body>
</html>
扫一扫
436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
