From 59c2705dd386fb43a8f8d1a8d5ab319d6c0ee44c Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 03 Aug 2022 15:12:37 +0800
Subject: [PATCH] 图标添加
---
src/views/home/index.vue | 18 ++++++++-
src/components/map/index.vue | 79 +++++++++++++++++++++++++++++++++++++++
2 files changed, 94 insertions(+), 3 deletions(-)
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 082f322..f33ce91 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -11,6 +11,9 @@
var addLayers = []
var addPlotLayers = []
+var siteEntitylayers = null
+var sitePositionsArray = []
+
export default {
name: 'mapBox',
@@ -39,6 +42,8 @@
}
})
+ // global.viewer.scene.globe.depthTestAgainstTerrain = true
+
farmRegionLayer = new global.DC.VectorLayer('farmRegionLayer')
global.viewer.addLayer(farmRegionLayer)
@@ -47,6 +52,9 @@
farmLogoLayer = new global.DC.HtmlLayer('farmLogoLayer')
global.viewer.addLayer(farmLogoLayer)
+
+ siteEntitylayers = new global.DC.VectorLayer('siteEntitylayers')
+ global.viewer.addLayer(siteEntitylayers)
if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) { // 判断是否支持图像渲染像素化处理
global.viewer.setOptions({
@@ -254,6 +262,49 @@
addPlotLayers.push({ center, name: item.landName })
},
+ addSiteEntity (item, url) {
+ const that = this
+
+ const center = [Number(item.lon), Number(item.lat)]
+
+ const label = new global.DC.Label(new global.DC.Position(Number(item.lon), Number(item.lat)), item.name)
+
+ label.attrParams = item
+
+ label.setStyle({
+ fillColor: global.DC.Namespace.Cesium.Color.fromBytes(
+ 1, 190, 254, 255
+ ),
+ showBackground: true,
+ backgroundColor: global.DC.Namespace.Cesium.Color.fromBytes(
+ 0, 0, 0, 145
+ ), // 背景颜色
+ distanceDisplayCondition: {
+ near: 0, // 最近距离
+ far: 3000 // 最远距离
+ }, // 根据距离设置可见
+ font: '12px',
+ pixelOffset: { x: 0, y: -26 } // 偏移像素
+ })
+
+ label.on(global.DC.MouseEventType.CLICK, (e) => {
+ that.$parent.plotDetailsPopupShow(e.overlay.attrParams)
+ })
+
+ const billboard = new global.DC.Billboard(new global.DC.Position(Number(item.lon), Number(item.lat)), url)
+ billboard.size = [18, 18]
+ billboard.attrParams = item
+
+ billboard.on(global.DC.MouseEventType.CLICK, (e) => {
+ that.$parent.plotDetailsPopupShow(e.overlay.attrParams)
+ })
+
+ siteEntitylayers.addOverlay(label)
+ siteEntitylayers.addOverlay(billboard)
+
+ sitePositionsArray.push({ center, name: item.name, id: item.id })
+ },
+
setCenter (name) {
let center
addLayers.forEach(item => {
@@ -265,7 +316,7 @@
if (center == '') {
this.$message({
message: '当前农场暂未绘制',
- type: 'warning'
+ type: 'warning'
})
return
}
@@ -310,6 +361,32 @@
})
},
+ setSiteCenter (name) {
+ let center
+ sitePositionsArray.forEach(item => {
+ if (name == item.name) {
+ center = item.center
+ }
+ })
+
+ console.log(name, center)
+
+ global.viewer.camera.flyTo({
+ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
+ center[0], center[1], 500.0
+ ),
+ orientation: {
+ // 指向
+ heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+ },
+
// 经纬度测算中心位置
getCenter (arr) {
let centerLonLat = []
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 87a6b81..de27920 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -257,6 +257,7 @@
class="box"
:class="{ first: index == 0 }"
:title="item.name"
+ @click="setSiteCenter(item, 'jkListShow')"
>{{ item.name }}</div>
</div>
</div>
@@ -272,6 +273,7 @@
class="box"
:class="{ first: index == 0 }"
:title="item.name"
+ @click="setSiteCenter(item, 'jcListShow')"
>{{ item.name }}</div>
</div>
</div>
@@ -282,14 +284,14 @@
<span>市场流通</span>
</div>
- <div class="layers-box">
+ <!-- <div class="layers-box">
<div class="sl">
<div class="text">标准图</div>
</div>
<div class="yx on">
<div class="text">卫星图</div>
</div>
- </div>
+ </div>-->
<div class="lenged-box">
<ul>
@@ -625,6 +627,11 @@
this.farmId = item.id
this.AllDataUpdate()
this.$refs.modalForm.setCenter(item.farmName)
+ },
+
+ setSiteCenter (item, show) {
+ this[show] = false
+ this.$refs.modalForm.setSiteCenter(item.name)
},
getFarmList () {
@@ -1294,6 +1301,13 @@
getStationAndVideoList().then((res) => {
if (JSON.stringify(res.data) != '{}' && res.data.data) {
that.equipmentList = res.data.data
+
+ that.equipmentList.staList.forEach(item => {
+ that.$refs.modalForm.addSiteEntity(item, '/img/icon/jk.png')
+ })
+ that.equipmentList.vidList.forEach(item => {
+ that.$refs.modalForm.addSiteEntity(item, '/img/icon/jk.png')
+ })
}
})
}
--
Gitblit v1.9.3