关键字

src/assets/js/widget.js

@@ -0,0 +1,163 @@
+import * as jt3dSDK from "@jintian/Map3dSDK"
+
+let jtMap3d; // 地图对象
+
+// 初始化当前业务
+export function onMounted(mapInstance) {
+	jtMap3d = mapInstance; // 记录map
+}
+
+// 释放当前业务
+export function onUnmounted() {
+	jtMap3d = null
+}
+
+//信息展示
+export function createContent(field, properties) {
+
+	let strHtml = "";
+	strHtml += "<table style='z-index:100;width:98%';border:2px solid #fff;>";
+	strHtml += "<thead>";
+	strHtml += "<tr>";
+	strHtml += "<th>属性名</th>";
+	strHtml += "<th>属性值</th>";
+	strHtml += "</tr> ";
+	strHtml += " </thead>";
+	strHtml += "<tbody>";
+
+	field.forEach(itemField => {
+		if (itemField.isDisplay === 1) {
+			var fieldDesc = itemField.fieldDescription || itemField.fieldName;
+			var fieldVals = properties[itemField.fieldName];
+
+			//日期格式
+			if (itemField.fieldType === 1) {
+				let time = new Date(fieldVals).getTime();
+				fieldVals = formattingTime(time);
+			}
+
+			if (fieldVals != null && fieldVals != "" && fieldVals != undefined) {
+				strHtml += "<tr>";
+				strHtml += "<td>" + fieldDesc + "</td>";
+				strHtml += "<td>" + fieldVals + "</td>";
+				strHtml += "</tr>";
+			}
+		}
+	});
+	strHtml += "</tbody>";
+	strHtml += "</table>";
+	let divb = document.getElementById('detailDiv')
+	divb.innerHTML = strHtml; //设置显示的数据，可以是标签．
+}
+
+//定位
+export function locHighlight(geometry) {
+	let _self = this;
+
+	//先创建一个CustomDataSource源，然后把entity存入这里面
+	let dataSources = new Cesium.CustomDataSource("单击高亮显示");
+	jtMap3d._dataSources.add(dataSources);
+
+	//高亮显示并定位
+	if (geometry.type == 'Point') {
+		let coordinates = geometry.coordinates;
+
+		//动态圆
+		let circleObject = new jt3dSDK.CircleObject(jtMap3d._viewer);
+		circleObject.drawCircle([coordinates[0], coordinates[1], coordinates[2] || 0], 10, {
+			color: [255, 0, 0, 1],
+			outline: true,
+			outlineColor: [255, 255, 255, 1],
+			outlineWidth: 1,
+			CircleType: 'DynamicCircle',
+			count: 2,
+			duration: 4000
+		}).then(function(entity) {
+
+			dataSources.entities.add(entity);
+
+			//定位到点
+			let LocateUtil = new jt3dSDK.LocateUtil(window.viewer);
+			LocateUtil.flyToPoint({
+				longitude: coordinates[0],
+				latitude: coordinates[1],
+				height: coordinates[2],
+				duration: 3,
+				heading: 100,
+				pitch: -80,
+				range: 300,
+			}).then(function(flag) {
+
+			});
+		});
+
+	} else if (geometry.type == 'MultiPoint') {
+
+	} else if (geometry.type == 'LineString') {
+
+	} else if (geometry.type == "MultiLineString") {
+		
+		let coordinatesList = geometry.coordinates;
+		for (var j = 0; j < coordinatesList.length; j++) {
+			let coordinates = coordinatesList[j];
+			let positions = coordinates.map(point => {
+				return Cesium.Cartesian3.fromDegrees(point[0], point[1], point[2] || 0);
+			});
+
+			let PolylineObject = new jt3dSDK.PolylineObject(window.viewer);
+			PolylineObject.addPolyline(positions, {
+				color: [255, 255, 0, 0.8]
+			}).then(function(entity) {
+				dataSources.entities.add(entity);
+
+				//定位
+				flyToEntity(entity, {
+					duration: 3,
+					heading: 200,
+					pitch: -80,
+					range: 1000
+				})
+
+			});
+		}
+	} else if (geometry.type == "Polygon") {
+
+	} else if (geometry.type == "MultiPolygon") {
+
+		let coordinatesList = geometry.coordinates;
+		for (var j = 0; j < coordinatesList.length; j++) {
+			let coordinates = coordinatesList[j][0];
+			let positions = coordinates.map(point => {
+				return Cesium.Cartesian3.fromDegrees(point[0], point[1], point[2] || 0);
+			});
+
+			let PolygonObject = new jt3dSDK.PolygonObject(window.viewer);
+			PolygonObject.generatePolygonByPoints(coordinates, {
+				color: [255, 0, 255, 0],
+				outline: true,
+				outlineWidth: 5,
+				outlineColor: [0, 255, 180, 1]
+			}).then((entity) => {
+				dataSources.entities.add(entity);
+
+				//定位
+				flyToEntity(entity, {
+					duration: 3,
+					heading: 200,
+					pitch: -80,
+					range: 1000
+				})
+			});
+		}
+	}
+}
+
+//定位飞行飞行
+export function flyToEntity(entity, options) {
+	let LocateUtil = new jt3dSDK.LocateUtil(window.viewer);
+	LocateUtil.flyToEntity(entity, options).then(function(entity) {
+		if (entity.point) {
+			jtMap3d._viewer.entities.remove(entity);
+		}
+	});
+}

src/views/Map3d/components/query-keyword.vue

@@ -22,41 +22,22 @@
 
 <template>
 	<div class="query-keyword fadein-left">
-		<el-input v-model="search.searchKey" placeholder="请输入查询关键字" @change="searchKeyChange" @input="searchKeyChange" clearable>
-			<template #append>
-				<el-button :icon="Search" @click="btnSearchClick" />
-			</template>
+		<el-input v-model="search.searchKey" placeholder="请输入查询关键字" @input="searchKeyChange" clearable>
+			<!-- <template #append>
+				<el-button :icon="Search" />
+			</template> -->
 		</el-input>
-		<div class="autocomplete " v-if="search.searchListShow">
+		<div class="autocomplete" v-if="search.searchListShow">
 			<ul>
-				<li v-for="(item,index) in search.searchCompleteData" :key="index" @click="SearchSelect(index)">
-					{{ item }}
+				<li v-for="(item,index) in searchCompleteData" :key="item.id" @click="SearchSelect(item)">
+					{{index+1}}.{{ item.name }}
 				</li>
 			</ul>
-		</div>
-		<div class="query-result" v-if="resultListShow">
-			<template v-if="resultCompleteData && resultCompleteData.length">
-				<ul>
-					<li v-for="(item, i) in resultCompleteData" :key="i" class="query-result__item" @click.stop="flyTo(item)">
-						<div class="query-result__context">
-							<p class="query-result-text" :title="item.jh">
-								<span class="query-result-text_num">{{ i + 1 }}</span>
-								{{ item.jh }}
-							</p>
-							<p class="query-result-sub">{{ item.dwmc }}</p>
-						</div>
-						<p class="query-result__more">
-							<el-icon>
-								<DArrowRight />
-							</el-icon>
-						</p>
-					</li>
-				</ul>
-				<div class="query-result__page">
-					<p class="query-result-allcount">共{{ resultCompleteData.length }}条结果</p>
-					<el-pagination layout="prev, pager, next" size="small" :total="resultCompleteData.length" pageSize="1" :simple="true" />
-				</div>
-			</template>
+			<div>
+				<el-pagination layout="prev, pager, next" small :total="resultCompleteData.length" background
+					pageSize="1" :simple="true" :pager-count="3" @current-change="currentchange" />
+			</div>
+
 		</div>
 	</div>
 </template>
@@ -76,10 +57,10 @@
 				search: {
 					searchKey: "", // input框输入的值，用v-model双向绑定
 					searchDataList: [], // autocomplete查询数据，一般由后端返回
-					searchCompleteData: [], // autocomplete查询到的数据
-					searchListShow: false,
+					searchListShow: false, //控制查询结果展示隐藏
 				},
-				resultCompleteData: [], // 查询结果
+				searchCompleteData: [], // autocomplete查询到的数据
+				resultCompleteData: '', // 查询结果
 				resultListShow: false,
 				pagination: {
 					size: "small",
@@ -94,22 +75,33 @@
 		 * 方法
 		 */
 		methods: {
-			
+			//页数改变时触发
+			currentchange(val) {
+				console.log('页数', val)
+				let num = Number(val * 10 - 10)
+				this.searchCompleteData = this.resultCompleteData.slice(num, num + 10)
+			},
+
 			/**
 			 * 在 Input 值改变时触发
 			 * 当 modelValue 改变时，当输入框失去焦点或用户按Enter时触发
 			 */
 			searchKeyChange() {
+				console.log('值改变', this.search.searchKey)
 				let _self = this;
 				this.search.searchListShow = true;
 				this.resultListShow = false;
-				let searchRegex = new RegExp(this.search.searchKey, 'i');
-				this.search.searchCompleteData = []; // 先把原有的数据清空，重新查询
-				if (this.search.searchKey === '') return; //如果什么都没有输入，则不用查找
-				this.search.searchDataList.forEach((item) => {
-					if (searchRegex.test(item.label)) {
-						_self.search.searchCompleteData.push(item.label)
+				_self.$http.get('/getTableList', {
+					tableName: 'view_query',
+					sqlWhere: "name like '%" + this.search.searchKey + "%'",
+					orderByField: ''
+				}).then(res => {
+					console.log('从服务端搜索数据', res.data)
+					if (_self.searchCompleteData) {
+						_self.searchCompleteData = res.data.slice(0, 10);
 					}
+
+					this.resultCompleteData = res.data
 				});
 			},
 
@@ -117,10 +109,10 @@
 			 * 选中联想查询数据
 			 * @param {Object} index
 			 */
-			SearchSelect(index) {
-				this.search.searchListShow = false;
-				console.log(this.search.searchCompleteData[index]);
-				this.getSearchData(this.search.searchCompleteData[index]);
+			SearchSelect(item) {
+				// this.search.searchListShow = false;
+				console.log('点击参数', item);
+				this.getSearchData(item);
 			},
 
 			/**
@@ -131,38 +123,94 @@
 					ElMessage("请输入查询关键字");
 					return;
 				}
-				this.getSearchData(this.search.searchKey);
+				// this.getSearchData(this.search.searchKey);
+			},
+
+			//匹配对应字段，arr数据列表，tableList参数配置表
+			getTextoption(arr, tableList) {
+				let resultObject = {}
+				Object.keys(arr).forEach((res, index) => {
+					tableList.forEach((item, idx) => {
+						if (Object.keys(arr)[index] == item.fieldName) {
+							let name = item.fieldDescription
+							resultObject[name] = Object.values(arr)[index]
+						}
+					})
+				})
+				return resultObject
 			},
 
 			/**
 			 * 数据查询
 			 * @param {Object} queryString
 			 */
-			getSearchData(queryString) {
+			getSearchData(item) {
 				let _self = this;
-				_self.$http.get('/getTableList', {
-					tableName: 'yy_yj',
-					sqlWhere: " jh like '%" + queryString + "%'",
+				_self.$http.get('/getGeoJson', {
+					tableName: item.tablename,
+					sqlWhere: " id = " + item.id,
 					orderByField: ''
 				}).then(res => {
-					console.log('从服务端搜索数据', res.data)
-					_self.resultCompleteData = res.data;
-					_self.resultListShow = true;
-					_self.search.searchListShow = false;
+					console.log('项目详细数据', res)
+					if (res.data.features.length >= 1) {
+						let data = res.data.features[0]
+						let coords = [data.geometry.coordinates] //coords结构[[116.322,36.555]]
+						let type = data.geometry.type
+						if(type != 'Point'){
+							ElMessage("目前仅支持点类项目信息查询！");
+							return
+						}
+						if(jt3d._viewer.entities){
+							console.log('移除绘制')
+							// jt3d._viewer.scene.primitives.removeAll(); 
+							jt3d._viewer.entities.removeAll();
+						}
+						
+						let datalist = this.getTextoption(data.properties, res.table)
+						jt3d.LocateUtil.flyToEntityByPoints(coords, 'point',{range:1000}).then(res => {
+							console.log('项目定位成功')
+							var LocateUtil = new this.jt3dSDK.LocateUtil(window["viewer"]);
+							let html = "";
+							html +=
+								"<div style='text-align: left;backfround-color:rgba(61, 198, 205, 0.6);width:300rem;font-family: TTTGB-Medium, sans-serif !important;'>";
+							Object.keys(datalist).forEach((res, index) => {
+								if (Object.values(datalist)[index]) {
+									html +=
+										"<div :class=" + `${index}%2==0?'one':'odd'` + ">" +
+										"<span style='width:100rem'>" + Object.keys(datalist)[
+											index] + "：</span>" +
+										"<span>" + Object.values(datalist)[index] + "</span>" +
+										"</div>";
+								}
+							})
+							html += "</div>";
+							let popup = new _self.jt3dSDK.PopupWindow.HtmlWindow(window[
+									"viewer"], coords[0], "设备信息", html,
+								50);
+							let circleObject = new this.jt3dSDK.CircleObject(jt3d._viewer);
+							circleObject.drawCircle(coords[0], 50, {
+								color: [255, 0, 0, 1],
+								outline: true,
+								outlineColor: [255, 255, 255, 1],
+								outlineWidth: 20,
+								CircleType: 'DynamicCircle',
+								count: 2,
+								duration: 4000
+							})
+						})
+					} else {
+						ElMessage("项目信息暂未入库！");
+					}
+					// _self.resultCompleteData = res.data;
+					// _self.resultListShow = true;
+					// jt3d.LocateUtil.flyToEntityByPoints()
+					// _self.search.searchListShow = false;
 				});
 			}
 		},
 
 		mounted() {
-			let _self = this;
-			_self.$http.get('/getTableList', {
-				tableName: 'yy_yj',
-				sqlWhere: '',
-				orderByField: ''
-			}).then(res => {
-				console.log('从服务端搜索数据', res.data)
-				_self.search.searchDataList = res.data;
-			});
+
 		}
 	};
 </script>
@@ -173,6 +221,20 @@
 
 	$jt3d-select-bg:red;
 
+	.one {
+		background-color: rgba(61, 198, 255, 0.4);
+		line-height: 30rem;
+		height: 30rem;
+		margin: 0;
+	}
+
+	.odd {
+		background-color: rgba(0, 37, 98, 0.4);
+		line-height: 30rem;
+		height: 30rem;
+		margin: 0
+	}
+
 	.query-keyword {
 		position: absolute;
 		top: 80rem;
@@ -203,9 +265,8 @@
 
 	.autocomplete ul {
 		font-family: sans-serif;
-		position: absolute;
 		list-style: none;
-		background: rgb(0 44 126 / 30%);
+		background: rgb(0 44 126 / 20%);
 		margin: 0;
 		width: 80%;
 		margin-top: 1rem;
@@ -216,7 +277,7 @@
 	.autocomplete ul li {
 		text-decoration: none;
 		display: block;
-		background: rgb(0 44 126 / 30%);
+		background: rgb(0 44 126 / 20%);
 		color: #fff;
 		padding: 5rem;
 		margin-left: -40rem;
@@ -232,9 +293,11 @@
 	.query-result {
 		position: absolute;
 		border-top: none;
+		height: 700rem;
 		padding-bottom: 0rem;
 		width: 100%;
 		z-index: 100;
+		overflow: auto;
 		border: 1rem solid rgb(0 44 126 / 100%);
 		background: rgb(0 44 126 / 30%);
 		margin-left: -1rem;
@@ -249,7 +312,7 @@
 			display: flex;
 			justify-content: flex-start;
 			align-items: center;
-			margin-left: -40rem;
+			padding-left: -40rem;
 			text-align: left;
 
 			&:hover {
@@ -310,7 +373,7 @@
 			}
 		}
 	}
-	
+
 	/* 四个边角样式 */
 	// .borderstyle {
 	// 	position: relative;
@@ -320,46 +383,47 @@
 	// 	border: 1rem solid #008aff70 !important;
 	// 	background-color: rgba(5, 45, 115, 0.7) !important;
 	// 	box-shadow: 0 4rem 15rem 1rem #02213bb3;
-	
 
-		.angle-border {
-			position: absolute;
-			width: 12rem;
-			height: 12rem;
-		}
-	
-		.angle-border-blue {
-			position: absolute;
-			width: 70rem;
-			height: 30rem;
-		}
-	
-		.left-top-border {
-			top: -2rem;
-			left: -2rem;
-			border-left: 2rem solid #008affdd;
-			border-top: 2rem solid #008affdd;
-		}
-	
-		.right-top-border {
-			top: -2rem;
-			right: -2rem;
-			border-right: 2rem solid #008affdd;
-			border-top: 2rem solid #008affdd;
-		}
-	
-		.left-bottom-border {
-			bottom: -2rem;
-			left: -2rem;
-			border-bottom: 2rem solid #FFFFFF;
-			border-left: 2rem solid #FFFFFF;
-		}
-	
-		.right-bottom-border {
-			bottom: -2rem;
-			right: -2rem;
-			border-right: 2rem solid #FFFFFF;
-			border-bottom: 2rem solid #FFFFFF;
-		}
+
+	.angle-border {
+		position: absolute;
+		width: 12rem;
+		height: 12rem;
+	}
+
+	.angle-border-blue {
+		position: absolute;
+		width: 70rem;
+		height: 30rem;
+	}
+
+	.left-top-border {
+		top: -2rem;
+		left: -2rem;
+		border-left: 2rem solid #008affdd;
+		border-top: 2rem solid #008affdd;
+	}
+
+	.right-top-border {
+		top: -2rem;
+		right: -2rem;
+		border-right: 2rem solid #008affdd;
+		border-top: 2rem solid #008affdd;
+	}
+
+	.left-bottom-border {
+		bottom: -2rem;
+		left: -2rem;
+		border-bottom: 2rem solid #FFFFFF;
+		border-left: 2rem solid #FFFFFF;
+	}
+
+	.right-bottom-border {
+		bottom: -2rem;
+		right: -2rem;
+		border-right: 2rem solid #FFFFFF;
+		border-bottom: 2rem solid #FFFFFF;
+	}
+
 	// }
 </style>