主要参考资料:
https://www.cnblogs.com/fuckgiser/p/5702544.html
以下为示例一
创建一个实体对象,在地图中显示,然后改变他的描述
源码如下,其他的不多说,我代码注释是很完整的。(ps:你这要是看不懂,也别问我了,至于原理方面的知识我也没吃透,去看我的参考地址,在最上方。)
<!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, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>Hello World!</title>
<!-- 该文件很重要是所有的核心 -->
<script src="../../Build/Cesium/Cesium.js"></script>
<style>
@import url(../../Build/Cesium/Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
// Viewer是所有的入口
var viewer = new Cesium.Viewer("cesiumContainer");
//创建元素节点,HTML的 DOM 知识
var canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
//使用CallbackProperty(回调函数)的方式来实现
function createDescriptionCallback() {
var description;
return function (time, result) {
var image = canvas.toDataURL("image/png");
description = "楼主好帅啊,我们爱死你了";
return description;
};
}
//创建实体模型
var redBox = viewer.entities.add({//创建实体
name: 'Red box with black outline',//名字
position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 20.0),//经度,纬度,中心点离地面距离
description:'111111111111111',
box: {//实体的类型(box为长方体)
dimensions: new Cesium.Cartesian3(20.0, 20.0, 40.0),//长宽高
material: Cesium.Color.RED.withAlpha(0.1),//透明度
outline: true,//边界线显示
outlineColor: Cesium.Color.BLUE//边界线颜色
}
});
viewer.zoomTo(viewer.entities);//定位到创建的物体
//调用描述方法,改变redBox的描述。
redBox.description = new Cesium.CallbackProperty(createDescriptionCallback(), true);
</script>
</body>
</html>
想了半天试了一下,直接修改redBox.description也行,就是说创建一个实体模型,然后直接如下也行(建议看一下参考网址,回调函数修改值一定有一些应用价值)
<body>
<div id="cesiumContainer"></div>
<script>
// Viewer是所有的入口
var viewer = new Cesium.Viewer("cesiumContainer");
//创建实体模型
var redBox = viewer.entities.add({//创建实体
name: 'This is its name,hahaha',//名字
position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 20.0),//经度,纬度,中心点离地面距离
description:'111111111111111',
box: {//实体的类型(box为长方体)
dimensions: new Cesium.Cartesian3(20.0, 20.0, 40.0),//长宽高
material: Cesium.Color.RED.withAlpha(0.1),//透明度
outline: true,//边界线显示
outlineColor: Cesium.Color.BLUE//边界线颜色
}
});
viewer.zoomTo(viewer.entities);//定位到创建的物体
//修改description
redBox.description = "123123123123";
</script>
</body>
viewer.entities的api:
viewer.entities.add的api:
viewer.zoomTo的api
以下为示例二(此为参考资料的网址示例还原的模样)
注意三个文件的位置是否摆放正确:js、css、ne_10m_us_states.topojson
ne_10m_us_states.topojson 文件百度网盘地址:
链接:https://pan.baidu.com/s/1aMlYV0NZFOiEOVG7r0s1rA
提取码:zbst
<!--
Custom InfoBox
-->
<!DOCTYPE html>
<head>
<title>Info Box</title>
<link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<!-- <script type="text/javascript" src="./js/require.min.js" data-main="./js/main"></script> -->
<script src="../../Build/Cesium/Cesium.js"></script>
<style>
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
//创建viewer对象
var viewer = new Cesium.Viewer('cesiumContainer');
viewer.infoBox.frame.setAttribute('sandbox', 'allow-same-origin allow-popups allow-forms allow-scripts');
//移除双击效果
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
//创建元素节点,HTML的 DOM 知识
var canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
//使用CallbackProperty(回调函数)的方式来实现
function createDescriptionCallback() {
var description;
return function (time, result) {
var image = canvas.toDataURL("image/png");
description = "ExamplesforCesium";
return description;
};
}
function MyObject() {
}
MyObject.prototype.myListener = function (dataCollection, dataValue) {
var entities;
var values = [];
var names = [];
entities = dataValue.entities.values;
var i = 0;
for (i = 0; i < entities.length; i++) {
var name = entities[i].properties.name;
var nValue = entities[i].properties.Population;
values.push(nValue);
names.push(name);
//主要涉及到CallbackProperty和ConstantProperty两种类型
entities[i].description = new Cesium.CallbackProperty(createDescriptionCallback(), true);
}
}
var myObjectInstance = new MyObject();
var evt = viewer.dataSources.dataSourceAdded;
evt.addEventListener(MyObject.prototype.myListener, myObjectInstance);
viewer.dataSources.add(Cesium.GeoJsonDataSource.load('ne_10m_us_states.topojson', {
stroke: Cesium.Color.HOTPINK,
fill: Cesium.Color.PINK.withAlpha(0.5),
strokeWidth: 3
}));
</script>
</body>