From 883a3e0d10376f6273a808be1c2ac196602a7950 Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期二, 12 一月 2021 12:25:35 +0800
Subject: [PATCH] toolbox
---
src/assets/images/map-pages/icon/toolbox/fullscreen.png | 0
src/components/panel/ToolBoxPanel.vue | 97 ++++++++++++++++++++++++++++++++
src/assets/images/map-pages/icon/toolbox/polygon.png | 0
src/views/MapTemplate.vue | 50 ++++++++++------
src/assets/images/map-pages/icon/toolbox/circle.png | 0
src/assets/images/map-pages/icon/toolbox/location.png | 0
src/assets/images/map-pages/icon/toolbox/legend.png | 0
src/assets/images/map-pages/icon/toolbox/square.png | 0
8 files changed, 128 insertions(+), 19 deletions(-)
diff --git a/src/assets/images/map-pages/icon/toolbox/circle.png b/src/assets/images/map-pages/icon/toolbox/circle.png
new file mode 100644
index 0000000..f03cf36
--- /dev/null
+++ b/src/assets/images/map-pages/icon/toolbox/circle.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/toolbox/fullscreen.png b/src/assets/images/map-pages/icon/toolbox/fullscreen.png
new file mode 100644
index 0000000..f24bec5
--- /dev/null
+++ b/src/assets/images/map-pages/icon/toolbox/fullscreen.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/toolbox/legend.png b/src/assets/images/map-pages/icon/toolbox/legend.png
new file mode 100644
index 0000000..43f6416
--- /dev/null
+++ b/src/assets/images/map-pages/icon/toolbox/legend.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/toolbox/location.png b/src/assets/images/map-pages/icon/toolbox/location.png
new file mode 100644
index 0000000..4f0f9be
--- /dev/null
+++ b/src/assets/images/map-pages/icon/toolbox/location.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/toolbox/polygon.png b/src/assets/images/map-pages/icon/toolbox/polygon.png
new file mode 100644
index 0000000..e2c5ff0
--- /dev/null
+++ b/src/assets/images/map-pages/icon/toolbox/polygon.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/toolbox/square.png b/src/assets/images/map-pages/icon/toolbox/square.png
new file mode 100644
index 0000000..91373ad
--- /dev/null
+++ b/src/assets/images/map-pages/icon/toolbox/square.png
Binary files differ
diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue
new file mode 100644
index 0000000..5e0bbf3
--- /dev/null
+++ b/src/components/panel/ToolBoxPanel.vue
@@ -0,0 +1,97 @@
+<template>
+ <div class="lefttop-toolbox-panel">
+ <ul>
+ <li v-for="(item,i) in imgList" :key="i" @click="toggleActive(i)" :value="total"
+ :class="{'active':activeTools[i]}">
+ <img :src="item"/>
+ </li>
+ </ul>
+ </div>
+</template>
+
+<script>
+import circle from '@/assets/images/map-pages/icon/toolbox/circle.png'
+import fullscreen from '@/assets/images/map-pages/icon/toolbox/fullscreen.png'
+import legend from '@/assets/images/map-pages/icon/toolbox/legend.png'
+import location from '@/assets/images/map-pages/icon/toolbox/location.png'
+import polygon from '@/assets/images/map-pages/icon/toolbox/polygon.png'
+import square from '@/assets/images/map-pages/icon/toolbox/square.png'
+
+export default {
+ name: 'ToolBoxPanel',
+ components: {},
+ data () {
+ return {
+ isPanelVisible: false,
+ total: 0,
+ activeTools: {},
+ imgList: {
+ circle: circle,
+ square: square,
+ fullscreen: fullscreen,
+ legend: legend,
+ location: location,
+ polygon: polygon
+ },
+ form: {
+ regionType: '',
+ enterprise: ''
+ }
+ }
+ },
+ methods: {
+ handleClose (done) {
+ console.log(done)
+ },
+ handleClick (tab, event) {
+ console.log(tab, event)
+ },
+ toggleActive (k) {
+ this.total++
+ this.activeTools[k] = !this.activeTools[k]
+ },
+ loadData () {
+
+ }
+ },
+ mounted () {
+ this.loadData()
+ },
+ created () {
+ }
+}
+</script>
+
+<style lang="less">
+.lefttop-toolbox-panel {
+ position: absolute;
+ left: 5px;
+ top: 5px;
+ z-index: 1000;
+ width: 180px;
+ height: 35px;
+ line-height: 30px;
+ background: #07325b;
+ border: 1px solid #5EF2FF;
+ border-radius: 3px;
+ text-align: center;
+
+ ul {
+ list-style: none;
+ margin: 0;
+ padding: 5px;
+
+ li {
+ float: left;
+ width: 23px;
+ height: 23px;
+ margin: 0 1px;
+ border: 1px solid #07325b;
+ }
+ }
+
+ .active {
+ border: 1px solid #5EF2FF;
+ }
+}
+</style>
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index d628efa..75746b3 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -1,14 +1,15 @@
<template>
<div class="full-screen">
- <div id="map" ref="rootmap"></div>
- <sgis-layer-controller :preset="'warningPreset'">
- <lc-basemap></lc-basemap>
-<!-- <div class="barline"></div>-->
- <lc-service-layer class="barline"></lc-service-layer>
- </sgis-layer-controller>
- <lc-service-layer-filter v-show="showServiceLayerFilter" ref="serviceLayerFilter"></lc-service-layer-filter>
- <monitor-panel></monitor-panel>
- <top-enterprise-panel></top-enterprise-panel>
+ <div id="map" ref="rootmap"></div>
+ <sgis-layer-controller :preset="'warningPreset'">
+ <lc-basemap></lc-basemap>
+ <!-- <div class="barline"></div>-->
+ <lc-service-layer class="barline"></lc-service-layer>
+ </sgis-layer-controller>
+ <lc-service-layer-filter v-show="showServiceLayerFilter" ref="serviceLayerFilter"></lc-service-layer-filter>
+ <monitor-panel></monitor-panel>
+ <top-enterprise-panel></top-enterprise-panel>
+ <tool-box-panel></tool-box-panel>
</div>
</template>
@@ -22,10 +23,19 @@
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'
import MonitorPanel from '@components/panel/MonitorPanel'
import TopEnterprisePanel from '@components/panel/TopEnterprisePanel'
+import ToolBoxPanel from '@components/panel/ToolBoxPanel'
export default {
name: 'MapTemplate',
- components: { TopEnterprisePanel, SgisLayerController, MonitorPanel, LcBasemap, LcServiceLayer, LcServiceLayerFilter },
+ components: {
+ ToolBoxPanel,
+ TopEnterprisePanel,
+ SgisLayerController,
+ MonitorPanel,
+ LcBasemap,
+ LcServiceLayer,
+ LcServiceLayerFilter
+ },
data () {
return {
basemapHelper: {},
@@ -78,21 +88,23 @@
<style lang="less">
-.full-screen{
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- position: absolute;
- #map{
+.full-screen {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+
+ #map {
height: 100%;
width: 100%;
}
- .barline{
+
+ .barline {
//width: 100%;
//height: 1px;
//background-color: #0661AE;
- border-top: 1px solid #0661AE;
+ border-top: 1px solid #0661AE;
}
}
</style>>
--
Gitblit v1.8.0