广告牌信息

src/App.vue

@@ -10,6 +10,15 @@
 </script>
 
 <style lang="scss">
+	@charset "UTF-8";
+	@font-face {
+		font-family: "TTTGB-Medium";
+		src: url("@/assets/fonts/fonts/TTTGB-Medium.ttf") format("truetype"),
+			url("@/assets/fonts/fonts/TTTGB-Medium.eot") format("embedded-opentype"),
+			url("@/assets/fonts/fonts/TTTGB-Medium.svg") format("svg");
+		font-weight: normal;
+		font-style: normal;
+	}
 	.lk-status-bar{
 		z-index: 15;
 	}

src/views/Map3d/components/sbyxjc.vue

@@ -110,29 +110,11 @@
 		methods: {
 			flyto(num) {
 				let that = this
-				// that.entity1 = new Cesium.Entity({
-				// 	name: "add billboard",
-				// 	//位置
-				// 	position: Cesium.Cartesian3.fromDegrees(120.623, 36.9157, 100),
-				// 	//图片标签
-				// 	billboard: {
-				// 		image: 'jt3dSDK/imgs/jijing1.png',
-				// 		horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平
-				// 		verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
-				// 		// scale: billboard.scale, //尺寸
-				// 		// pixelOffset: new Cesium.Cartesian2(0, billboard.pixelOffset),
-				// 		disableDepthTestDistance: Number.POSITIVE_INFINITY,
-				// 		scale: 0.2,
-				// 		scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1, 2400,
-				// 			1
-				// 		) //按距离缩放，即距离大于180米时，图标不显示  Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
-				// 	}
-				// });
 				let PointObject = new this.jt3dSDK.PointObject(window.viewer);
 				var LocateUtil = new this.jt3dSDK.LocateUtil(window["viewer"]);
-				let Drawtools =  new this.jt3dSDK.DrawTools(window.viewer)
+				let Drawtools = new this.jt3dSDK.DrawTools(window.viewer)
 				//_createCircle
-				PointObject.addBillboard([120.623, 36.9157,100], {
+				PointObject.addBillboard([120.623, 36.9157, 0], {
 					billboard: {
 						imgUrl: 'jt3dSDK/imgs/jijing1.png',
 						scale: 0.2,
@@ -140,18 +122,38 @@
 				}).then(res1 => {
 					var LocateUtil = new this.jt3dSDK.LocateUtil(window["viewer"]);
 					LocateUtil.flyToEntity(res1).then(res2 => {
-						console.log('定位成功')
-						// let popup = new that.jt3dSDK.Popupwindow.HtmlWindow(window"viewer"1,cPoint,"位置信息", html,-30);
+						let html = "";
+						html +=
+							"<div style='text-align: left;backfround-color:rgba(61, 198, 205, 0.6);width:300rem;height:150rem;font-family: TTTGB-Medium, sans-serif !important;'>";
+						html +=
+							"<div style='background-color: rgba(61, 198, 255, 0.4);line-height:30rem;height:30rem;margin:0;'>" +
+							"<span style='width:100rem'>设备名称：</span>" + "<span>机井</span>" +
+							"</div>";
+						html +=
+							"<div style='background-color: rgba(0, 37, 98, 0.4);line-height:30rem;height:30rem;margin:0'>" +
+							"<span style='width:100rem'>设备编号：</span>" + "<span>05</span>" +
+							"</div>";
+						html +=
+							"<div style='background-color: rgba(61, 198, 255, 0.4);line-height:30rem;height:30rem;margin:0'>" +
+							"<span style='width:100rem'>电流：</span>" + "<span>10A</span>" +
+							"</div>";
+						html +=
+							"<div style='background-color: rgba(0, 37, 98, 0.4);line-height:30rem;height:30rem;margin:0'>" +
+							"<span style='width:100rem'>压力：</span>" + "<span>20Kpa</span>" +
+							"</div>";
+						html +=
+							"<div style='background-color: rgba(61, 198, 255, 0.4);line-height:30rem;height:30rem;margin:0'>" +
+							"<span style='width:100rem'>流量：</span>" + "<span>80m³/h</span>" +
+							"</div>";
+						html += "</div>";
+						let popup = new that.jt3dSDK.PopupWindow.HtmlWindow(window["viewer"], [120.623,
+							36.9157
+						], "设备信息", html, 50);
+						this.createCircle()
 						// Drawtools._createCircle( Cesium.Cartesian3.fromDegrees(120.623, 36.9157),'dynamicCircle')
 					})
 				})
 
-				// LocateUtil.flyToEntity(that.entity1, {
-				// 	range: 400
-				// }).then(res2 => {
-				// 	console.log('定位成功', res2)
-				// })
-
 				//====实现
 				/* let PointObject = new this.jt3dSDK.PointObject(window.viewer);
 				var LocateUtil = new this.jt3dSDK.LocateUtil(window["viewer"]);
@@ -162,6 +164,33 @@
 					})
 				}) */
 
+			},
+			//创建动态圆
+			createCircle() {
+				let entity = window.viewer.entities.add({
+					position: Cesium.Cartesian3.fromDegrees(120.623,
+						36.9157),
+					name: 'Dynamic Circle',
+					description: 'A dynamic circle.',
+				});
+
+				// 添加动态圆形
+				var radius = 2000;
+				var divisions = 100;
+
+				var circleGeometry = new Cesium.CircleGeometry({
+					center: entity.position.getValue(), // 动态圆心位置
+					radius: radius,
+					vertexFormat: Cesium.VertexFormat.POSITION_AND_ST
+				});
+
+				entity.polygon = new Cesium.PolygonGraphics();
+				entity.polygon.hierarchy = new Cesium.CallbackProperty(function() {
+					var geometry = circleGeometry.createGeometry(Cesium.Ellipsoid.WGS84);
+					return geometry.hierarchy;
+				}, false);
+				entity.polygon.material = Cesium.Material.fromType(Cesium.Material.ColorType);
+				entity.polygon.material.uniforms.color = new Cesium.Color(1.0, 0.0, 0.0, 0.5);
 			}
 		},
 		mounted() {