| | |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2023-03-13 15:00:55 |
| | | * @FilePath: \forest-fire\src\views\statistics\components\box\dataContent.vue |
| | | * @Description: |
| | | * |
| | | * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. |
| | | * @Description: |
| | | * |
| | | * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. |
| | | --> |
| | | <script setup> |
| | | import publicContent from './publicContent.vue' |
| | | |
| | | const fxy = () => { |
| | | if (state.layer) { |
| | | console.log("***************************") |
| | | window.$viewer.removeLayer(state.layer) |
| | | } |
| | | let layer = new DC.VectorLayer(`${row.id}`) |
| | | state.layer = layer |
| | | window.$viewer.addLayer(layer) |
| | | let material = new DC.PolylineDashMaterialProperty({ |
| | | color: DC.Color.ORANGE |
| | | }) |
| | | let item = new DC.Position(row.lng, row.lat, 100) |
| | | let label = new DC.CustomLabel( |
| | | item, |
| | | row.name |
| | | ) |
| | | label.setStyle({ |
| | | fillColor: DC.Color.YELLOW, |
| | | font: '12px', |
| | | pixelOffset: { x: 0, y: -10 }, |
| | | }) |
| | | label.setVLine({ |
| | | width: 2, |
| | | material |
| | | }) |
| | | layer.addOverlay(label) |
| | | } |
| | | |
| | | const fxe = () => { |
| | | if (state.layer) { |
| | | console.log("***************************") |
| | | window.$viewer.removeLayer(state.layer) |
| | | } |
| | | let layer = new DC.VectorLayer(`${row.id}`) |
| | | state.layer = layer |
| | | window.$viewer.addLayer(layer) |
| | | let material = new DC.PolylineDashMaterialProperty({ |
| | | color: DC.Color.ORANGE |
| | | }) |
| | | let item = new DC.Position(row.lng, row.lat, 100) |
| | | let label = new DC.CustomLabel( |
| | | item, |
| | | row.name |
| | | ) |
| | | label.setStyle({ |
| | | fillColor: DC.Color.YELLOW, |
| | | font: '12px', |
| | | pixelOffset: { x: 0, y: -10 }, |
| | | }) |
| | | label.setVLine({ |
| | | width: 2, |
| | | material |
| | | }) |
| | | layer.addOverlay(label) |
| | | } |
| | | |
| | | |
| | | const fxs = () => { |
| | | if (state.layer) { |
| | | console.log("***************************") |
| | | window.$viewer.removeLayer(state.layer) |
| | | } |
| | | let layer = new DC.VectorLayer(`${row.id}`) |
| | | state.layer = layer |
| | | window.$viewer.addLayer(layer) |
| | | let material = new DC.PolylineDashMaterialProperty({ |
| | | color: DC.Color.ORANGE |
| | | }) |
| | | let item = new DC.Position(row.lng, row.lat, 100) |
| | | let label = new DC.CustomLabel( |
| | | item, |
| | | row.name |
| | | ) |
| | | label.setStyle({ |
| | | fillColor: DC.Color.YELLOW, |
| | | font: '12px', |
| | | pixelOffset: { x: 0, y: -10 }, |
| | | }) |
| | | label.setVLine({ |
| | | width: 2, |
| | | material |
| | | }) |
| | | layer.addOverlay(label) |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | </script> |
| | | |
| | | <template> |
| | | <public-content> |
| | | <template #content> |
| | | <div> |
| | | |
| | | <div class="data-content"> |
| | | <ul> |
| | | <li @click="fxy">防线一</li> |
| | | <li @click="fxe">防线二</li> |
| | | <li @click="fxs">防线三</li> |
| | | </ul> |
| | | </div> |
| | | </template> |
| | | </public-content> |
| | | </template> |
| | | |
| | | <style lang="scss" scoped></style> |
| | | <style lang="scss" scoped> |
| | | .data-content { |
| | | color: #fff; |
| | | } |
| | | |
| | | .data-content>ul { |
| | | margin-top: 90px; |
| | | margin-left: 90px; |
| | | } |
| | | |
| | | .data-content>ul>li { |
| | | display: block; |
| | | color: #000; |
| | | margin-top: 160px; |
| | | background-color: #fff; |
| | | width: 60px; |
| | | height: 60px; |
| | | line-height: 60px; |
| | | text-align: center; |
| | | border-radius: 50%; |
| | | } |
| | | </style> |