<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Cesium影像服务--在线服务扩展</title>
<link href="../Cesium/Widgets/widgets.css" rel="stylesheet" />
<link rel="stylesheet" href="./ysc/css/ysc.css">
<link rel="stylesheet" href="./ysc/css/reset.css">
<link rel="stylesheet" href="./ysc/css/layerPay.css">
<link rel="stylesheet" href="./ysc/css/index.css">
<!-- <script src="../Cesium/Cesium.js"></script> -->
<script src="./ysc/jquery-1.10.2.min.js"></script>
<script src="../../Cesium1.48/Cesium/Cesium.js"></script>
<script src="./ysc/echarts.js"></script>
<script src="1-2ImageryProvider-WebExtend.js"></script>
<!-- <script src="./ysc/ysc.js"></script> -->
<!-- <script src="./ysc/index.js"></script> -->
<style>
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<div class='ysc-dynamic-layer' id='one'>
<div class='line'></div>
<div class='main'>
<div class="charts" id="chart-1"></div>
</div>
</div>
<div id="creditContainer" style="display: none;"></div>
<script>
//一： WebMapTileServiceImageryProvider--天地图
//var mtdt = new Cesium.WebMapTileServiceImageryProvider({
// url: 'http://t0.tianditu.com/img_w/wmts?',
// layer: 'img',
// style: 'default',
// format: 'tiles',
// tileMatrixSetID: 'w',
// credit: new Cesium.Credit('天地图全球影像服务'),
// maximumLevel: 18
// });
var mtdt = new Cesium.WebMapTileServiceImageryProvider({
url: "http://{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=837264f46e683ec982d452e78d71052e",
layer: "tdtBasicLayer",
style: "default",
maximumLevel: 20,
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: true,
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
})
var noteLayer = new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=837264f46e683ec982d452e78d71052e",
layer: "tdtBasicLayer",
style: "default",
maximumLevel: 20,
format: "image/png",
tileMatrixSetID: "GoogleMapsCompatible",
show: true
});
//二： UrlTemplateImageryProvider-- esri
var GoogleMap = ImageryProviderWebExtendTool.createGoogleMapsByUrl(Cesium, { url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}" });
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: GoogleMap,
contextOptions: {
webgl: {
alpha: true
}
},
creditContainer: "creditContainer",
selectionIndicator: false,
animation: false, //是否显示动画控件
baseLayerPicker: false, //是否显示图层选择控件
geocoder: false, //是否显示地名查找控件
timeline: false, //是否显示时间线控件
sceneModePicker: true, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
infoBox: false, //是否显示点击要素之后显示的信息
fullscreenButton: true
});
//viewer.imageryLayers.addImageryProvider(noteLayer);
//取消双击事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
//设置homebutton的位置
Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
Cesium.Rectangle.fromDegrees(110.15, 34.54, 110.25, 34.56); //Rectangle(west, south, east, north)
//设置初始位置
// viewer.camera.setView({
// destination: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 3000000)
// });
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(117.21579, 31.80749, 1500.0),
orientation: {
heading: Cesium.Math.toRadians(20.0), //左右摆
pitch: Cesium.Math.toRadians(-35.0), //正俯视
roll: 0.0
}
});
//封装ajax
function ajaxData(sendType, urlPath, sendData, callback) { //get/post,地址，发送数据，回调函数
$.ajax({
async: true, //默认为true，为异步执行；必要时需要改为同步执行
type: sendType,
url: urlPath,
data: sendData,
success: function(res) { //res后台取到的数据.
callback(res);
}
});
}
ajaxData('post', 'https://www.yueyanshaosun.cn/ClodyNoteV2/cors/updateSiteclicker', { "name": "ysCesium" }, function(res) {});
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(e) {
var cartesian = viewer.camera.pickEllipsoid(e.position, viewer.scene.globe.ellipsoid);
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
var lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5); //四舍五入 小数点后保留五位
var lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5); //四舍五入 小数点后保留五位
// var height = Math.ceil(viewer.camera.positionCartographic.height); //获取相机高度
if (cartesian) {
/** main */
var data = {
layerId: "layer1", //弹窗的唯一id，英文，且唯一,内部entity会用得到
lon: lon,
lat: lat,
element: $("#one"),
addEntity: true, //默认为false,如果为false的话就不添加实体，后面的实体属性就不需要了
boxHeight: 150, //中间立方体的高度
boxHeightDif: 5, //中间立方体的高度增长差值，越大增长越快
boxHeightMax: 300, //中间立方体的最大高度
boxSide: 40, //立方体的边长
boxMaterial: Cesium.Color.DEEPSKYBLUE.withAlpha(0.5),
circleSize: 200, //大圆的大小，小圆的大小默认为一半
};
showDynamicLayer(viewer, data, function() { //回调函数 改变弹窗的内容;
// $("#one").find(".main").html("经度:"+lon+"<br/>纬度:"+lat);
$("#one").find(".main").html(" <div class=\"charts\" id=\"chart-1\"></div>");
ajaxData('post', 'https://www.yueyanshaosun.cn/ClodyNoteV2/cors/getSiteclicker', { "name": "首页" }, function(res) {
var sc = res.siteclicker;
setChart1(sc);
});
});
/** main */
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
/**
* 创建一个动态实体弹窗
*/
function showDynamicLayer(viewer, data, callback) {
var element = data.element;
var lon = data.lon;
var lat = data.lat;
var sStartFlog = false;
setTimeout(function() {
sStartFlog = true;
}, 700);
var s1 = 0.001,
s2 = s1,
s3 = s1,
s4 = s1;
/* 弹窗的dom操作--默认必须*/
element.css({ opacity: 0 }); //使用hide()或者display是不行的 因为cesium是用pre定时重绘的div导致 left top display 会一直重绘
$(".ysc-dynamic-layer .line").css({ width: 0 });
element.find(".main").hide(0);
/* 弹窗的dom操作--针对性操作*/
callback();
if (data.addEntity) {
var rotation = Cesium.Math.toRadians(30);
var rotation2 = Cesium.Math.toRadians(30);
function getRotationValue() {
rotation += 0.05;
return rotation;
}
function getRotationValue2() {
rotation2 -= 0.03;
return rotation2;
}
//如果有实体存在 先清除实体;
//如果有实体存在 先清除实体;
viewer.entities.removeById(data.layerId + "_1");
viewer.entities.removeById(data.layerId + "_2");
viewer.entities.removeById(data.layerId + "_3");
//构建entity
var height = data.boxHeight,
heightMax = data.boxHeightMax,
heightDif = data.boxHeightDif;
var goflog = true;
let promiseClick = function() {
let p = new Promise(function(resolve, reject) {
// 添加正方体
let num = 6;
var blueBox = viewer.entities.add({
id: data.layerId + "_1",
name: "立方体盒子",
//中心的位置
position: new Cesium.CallbackProperty(function() {
height = height + heightDif;
if (height >= heightMax) {
height = heightMax;
}
return Cesium.Cartesian3.fromDegrees(lon, lat, height / 2)
}, false),
box: {
dimensions: new Cesium.CallbackProperty(function() {
height = height + heightDif;
if (height >= heightMax) {
height = heightMax;
if (goflog) { //需要增加判断 不然它会一直执行; 导致对div的dom操作 会一直重复
addLayer(); //添加div弹窗
goflog = false;
}
}
return new Cesium.Cartesian3(data.boxSide, data.boxSide, height)
}, false),
material: data.boxMaterial
}
});
if (num <= 10) {
resolve(num);
} else {
reject('数字太于10了即将执行失败回调');
}
})
return p
};
promiseClick().then(
function(backValue) {
addLayer();
return 3
}
).then(
function(backValue) {
//添加底座一 外环
viewer.entities.add({
id: data.layerId + "_2",
name: "椭圆",
position: Cesium.Cartesian3.fromDegrees(lon, lat),
ellipse: {
// semiMinorAxis :data.circleSize, //直接这个大小 会有一个闪白的材质 因为cesium材质默认是白色 所以我们先将大小设置为0
// semiMajorAxis : data.circleSize,
semiMinorAxis: new Cesium.CallbackProperty(function() {
if (sStartFlog) {
s1 = s1 + data.circleSize / 20;
if (s1 >= data.circleSize) {
s1 = data.circleSize;
}
}
return s1;
}, false),
semiMajorAxis: new Cesium.CallbackProperty(function() {
if (sStartFlog) {
s2 = s2 + data.circleSize / 20;
if (s2 >= data.circleSize) {
s2 = data.circleSize;
}
}
return s2;
}, false),
material: "./ysc/images/circle2.png",
rotation: new Cesium.CallbackProperty(getRotationValue, false),
stRotation: new Cesium.CallbackProperty(getRotationValue, false),
zIndex: 2,
}
});
//添加底座二 内环
viewer.entities.add({
id: data.layerId + "_3",
name: "椭圆",
position: Cesium.Cartesian3.fromDegrees(lon, lat),
ellipse: {
semiMinorAxis: new Cesium.CallbackProperty(function() {
if (sStartFlog) {
s3 = s3 + data.circleSize / 20;
if (s3 >= data.circleSize / 2) {
s3 = data.circleSize / 2;
}
}
return s3;
}, false),
semiMajorAxis: new Cesium.CallbackProperty(function() {
if (sStartFlog) {
s4 = s4 + data.circleSize / 20;
if (s4 >= data.circleSize / 2) {
s4 = data.circleSize / 2;
}
}
return s4;
}, false),
material: "./ysc/images/circle1.png",
rotation: new Cesium.CallbackProperty(getRotationValue2, false),
stRotation: new Cesium.CallbackProperty(getRotationValue2, false),
zIndex: 3
}
});
}
)
} else {
//addLayer(); //添加div弹窗
}
function addLayer() {
//添加div
var divPosition = Cesium.Cartesian3.fromDegrees(lon, lat, data.boxHeightMax); //data.boxHeightMax为undef也没事
element.css({ opacity: 1 });
element.find(".line").animate({
width: 50 //线的宽度
}, 500, function() {
element.find(".main").fadeIn(500)
});
creatHtmlElement(viewer, element, divPosition, [10, -(parseInt(element.css("height")))], true); //当为true的时候，表示当element在地球背面会自动隐藏。默认为false，置为false，不会这样。但至少减轻判断计算压力
}
};
/**
* 创建一个 htmlElement元素 并且，其在earth背后会自动隐藏
*/
function creatHtmlElement(viewer, element, position, arr, flog) {
var scratch = new Cesium.Cartesian2(); //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
var scene = viewer.scene,
camera = viewer.camera;
scene.preRender.addEventListener(function() {
var canvasPosition = scene.cartesianToCanvasCoordinates(position, scratch); //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标
if (Cesium.defined(canvasPosition)) {
element.css({
// top:canvasPosition.y,
// left:canvasPosition.x
left: canvasPosition.x + arr[0],
top: canvasPosition.y + arr[1]
});
/* 此处进行判断**/ // var px_position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, cartesian);
if (flog && flog == true) {
var e = position,
i = camera.position,
n = scene.globe.ellipsoid.cartesianToCartographic(i).height;
if (!(n += 1 * scene.globe.ellipsoid.maximumRadius, Cesium.Cartesian3.distance(i, e) > n)) {
element.show();
} else {
element.hide();
}
}
/* 此处进行判断**/
}
});
}
function setChart1(siteclicker) {
var data1 = [];
var data2 = [];
for (var i = 0; i < siteclicker.length; i++) { //这里我们去掉一个
if (i != 4 && i != 6) {
data1.push(siteclicker[i].name);
data2.push({
value: siteclicker[i].number,
name: siteclicker[i].name,
symbol: 'image://./ysc/images/bar.png'
})
}
}
var myChart1 = echarts.init(document.getElementById('chart-1'));
var option1 = {
grid: {
left: '0', //grid 组件离容器左侧的距离。
top: '20px',
right: '15px', //grid 组件离容器右侧的距离。
bottom: '20px', //grid 组件离容器下侧的距离。
containLabel: true //grid 区域是否包含坐标轴的刻度标签[ default: false ]
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: [{
type: 'category',
boundaryGap: true, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
axisLine: {
lineStyle: {
color: '#858585' //坐标轴线线的颜色。
}
},
axisLabel: {
show: false
},
data: data1
}],
yAxis: [{
type: 'value', //坐标轴类型。'value' 数值轴，适用于连续数据;'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据;'time' 时间轴;'log' 对数轴.
name: '点击量', //坐标轴名称。
axisTick: {
show: false //是否显示坐标轴刻度
},
axisLine: {
lineStyle: {
color: '#858585' //坐标轴线线的颜色
}
},
axisLabel: {
margin: 10, //刻度标签与轴线之间的距离
textStyle: {
fontSize: 10, //文字的字体大小
color: '#fdfdfd'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.1)' //分隔线颜色设置
}
}
}],
series: [{
name: '点击量',
type: 'pictorialBar',
symbolSize: ['19', '90%'], //设置图片background-size
symbolPosition: 'start', //设置图形起使位置
z: 10,
data: data2
}]
};
myChart1.setOption(option1);
$(window).resize(function() {
$(myChart1).resize();
});
//渲染完毕后resize一下
myChart1.on('finished', function() {
$(myChart1).resize();
});
}
</script>
</body>
</html>
今天的文章cesium 动态浮云框分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/29549.html
