| | |
| | | <template> |
| | | <div class="bottom" id="bottom" :style="customStyle" v-if="state1.show"> |
| | | <!-- <div class="mapTool"> |
| | | <div class="tool-rotate" @click="PointingNorth" title="指北"> |
| | | <img src="@/assets/img/collection/compass.png" /> |
| | | </div> |
| | | </div> --> |
| | | <div class="mapTool"> |
| | | <div class="tool-rotate" @click="flyBack" title="复位"> |
| | | <img src="@/assets/img/collection/recover.png" /> |
| | | </div> |
| | | </div> |
| | | <div class="mapTool" v-show="test.fwval"> |
| | | <div class="mapTool2" v-show="test.fwval"> |
| | | <div class="tool-rotate" @click="zoomIn" title="放大"> |
| | | <img src="@/assets/img/collection/add.png" /> |
| | | </div> |
| | |
| | | |
| | | <style scoped> |
| | | .mapTool { |
| | | border-radius: 10px; |
| | | width: 51px; |
| | | /* border-radius: 10px; */ |
| | | /* background: #ffffff; */ |
| | | /* margin-bottom: 8px; */ |
| | | } |
| | | .mapTool .tool-rotate img { |
| | | width: 100%; |
| | | } |
| | | .mapTool2 { |
| | | width: 40px; |
| | | height: 80px; |
| | | margin: 0 auto; |
| | | background: #ffffff; |
| | | margin-bottom: 8px; |
| | | box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.21); |
| | | border-radius: 13px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-evenly; |
| | | align-items: center; |
| | | } |
| | | |
| | | .mapTool2 .tool-rotate img { |
| | | width: 18px; |
| | | } |
| | | .border { |
| | | border: 0.5px solid #efecec; |
| | | width: 36px; |
| | | height: 1px; |
| | | border: 1px solid #e5e5e5; |
| | | } |
| | | |
| | | .tool-rotate { |
| | | /* .tool-rotate { |
| | | padding: 8px; |
| | | } |
| | | |
| | | .tool-rotate img { |
| | | width: 20px; |
| | | height: 20px; |
| | | } |
| | | } */ |
| | | </style> |
| | | |
| | | <script> |
| | |
| | | props: ["test"], |
| | | data() { |
| | | return { |
| | | state1:store.mapTools, |
| | | state1: store.mapTools, |
| | | state: store.layerPanel, |
| | | customStyle: { |
| | | position: "absolute", |
| | |
| | | if (newVal) { |
| | | this.customStyle = { |
| | | position: "absolute", |
| | | top: "2rem", |
| | | top: "calc(0.75rem + 51px)", |
| | | right: "0.1rem", |
| | | }; |
| | | } else { |
| | |
| | | duration: 1000, // 缩放持续时间,默认不需要设置 |
| | | }); |
| | | }, |
| | | PointingNorth() { |
| | | alert("指北针开发中"); |
| | | // console.log("指北针开发中") |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | <template> |
| | | <div class="navigationBar" v-if="state.show"> |
| | | <div class="menuBtn" @click="handleMenuListShow"> |
| | | <!-- <div class="menuBtn" @click="handleMenuListShow"> |
| | | <img src="@/assets/img/navigation/menuicon.png" /> |
| | | </div> |
| | | <div class="menuList" v-show="showMenuList.show"> |
| | | </div> --> |
| | | <!-- <div class="menuList" v-show="showMenuList.show"> --> |
| | | <div class="menuList" v-show="true"> |
| | | <ul> |
| | | <li |
| | | v-for="(value, key) in menuList" |
| | |
| | | :src="showState[value.attr].show ? value.imgActive : value.img" |
| | | :class="showState[value.attr].show ? 'Active' : 'noActive'" |
| | | /> |
| | | <span>{{ value.name }}</span> |
| | | <!-- <span>{{ value.name }}</span> --> |
| | | </div> |
| | | </li> |
| | | </ul> |
| | |
| | | name: "NavigationBar", |
| | | data() { |
| | | return { |
| | | state:store.navigator, |
| | | state: store.navigator, |
| | | showMenuList: store.MenuList, |
| | | resetShowState: store.resetLink, |
| | | favoriteShowState: store.favorite, |
| | |
| | | } |
| | | |
| | | .menuList { |
| | | padding: 0px 2px; |
| | | /* background-color: red; */ |
| | | /* padding: 0px 2px; |
| | | position: absolute; |
| | | margin-top: 0.1rem; |
| | | right: 0; |
| | | background-color: white; |
| | | border-radius: 10px; |
| | | border-radius: 10px; */ |
| | | } |
| | | |
| | | .menuItem { |
| | | width: 32px; |
| | | width: 51px; |
| | | /* width: 32px; |
| | | color: black; |
| | | margin-top: 10px; |
| | | margin-bottom: 7px; |
| | | border-bottom: 1px solid #e8e8e9; |
| | | background-color: #bfa; |
| | | text-align: center; |
| | | cursor: pointer; |
| | | cursor: pointer; */ |
| | | } |
| | | |
| | | li:last-child .menuItem { |
| | |
| | | } |
| | | |
| | | .menuItem img { |
| | | width: 24px; |
| | | text-align: center; |
| | | width: 100%; |
| | | /* text-align: center; */ |
| | | } |
| | | |
| | | .menuItem span { |
| | | /* .menuItem span { |
| | | display: block; |
| | | text-align: center; |
| | | margin-top: 2px; |
| | | } |
| | | } */ |
| | | </style> |
| | |
| | | <template> |
| | | <div class="layerPanel"> |
| | | <div class="mapMode"> |
| | | <div class="title" style="margin-top: 0px">地图模式</div> |
| | | <div class="title">地图模式</div> |
| | | <div class="container"> |
| | | <div |
| | | class="layerItem" |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="areaType" style="margin-top: 10px"> |
| | | <div class="title"> |
| | | <div class="areaType"> |
| | | <div class="title ZTtitle"> |
| | | 专题应用 |
| | | <!-- 不显示更多图层 --> |
| | | <span class="more" v-show="false" @click.stop="showLayerTree" |
| | |
| | | ZTValue.name |
| | | }}</span> |
| | | </div> |
| | | </div> |
| | | <div class="title2"></div> |
| | | <div class="container"> |
| | | <div |
| | | class="layerItem" |
| | | v-for="(funcValue, funcIndex) in FuncList" |
| | |
| | | }}</span> |
| | | </div> |
| | | </div> |
| | | <!-- <div class="container"> |
| | | <div |
| | | class="layerItem" |
| | | v-for="(funcValue, funcIndex) in FuncList" |
| | | :key="funcValue.id" |
| | | @click.stop="handleFuncClick(funcIndex)" |
| | | > |
| | | <img |
| | | :src="funcValue.src" |
| | | :class="{ active: curFuncIndex == funcIndex }" |
| | | /> |
| | | <span :class="{ spanActive: curFuncIndex == funcIndex }">{{ |
| | | funcValue.name |
| | | }}</span> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | |
| | | <!-- <div class="yjsxt"> |
| | |
| | | <style scoped> |
| | | .layerPanel { |
| | | width: 100%; |
| | | /* height: 396px; */ |
| | | position: absolute; |
| | | bottom: 0px; |
| | | align-items: center; |
| | | padding: 0.1rem; |
| | | background: white; |
| | | /* padding: 0.1rem; */ |
| | | background: #ffffff; |
| | | z-index: 1000; |
| | | padding-left: 0.25rem; |
| | | /* padding-left: 0.25rem; */ |
| | | border-radius: 15px 15px 0px 0px; |
| | | } |
| | | .mapMode { |
| | | width: 100%; |
| | | margin-top: 24px; |
| | | padding-left: 28px; |
| | | } |
| | | |
| | | @font-face { |
| | | font-family: "YouSheBiaoTiHei"; |
| | | src: url("../../../../static/YouSheBiaoTiHei.ttf"); |
| | | } |
| | | .title { |
| | | height: 25px; |
| | | font-size: 16px; |
| | | font-family: Source Han Sans SC; |
| | | font-weight: 700; |
| | | color: #181818; |
| | | line-height: 25px; |
| | | margin: 10px 0px 10px 0; |
| | | width: 72px; |
| | | height: 14px; |
| | | font-family: "YouSheBiaoTiHei"; |
| | | font-weight: 400; |
| | | font-size: 19px; |
| | | color: #2e2e2e; |
| | | line-height: 15px; |
| | | margin-bottom: 18px; |
| | | } |
| | | |
| | | .title2 { |
| | | height: 15px; |
| | | } |
| | | |
| | | .container { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | text-align: center; |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | .layerItem { |
| | | /* font-size: 14px; */ |
| | | font-family: Source Han Sans SC; |
| | | font-family: "微软雅黑"; |
| | | font-weight: 400; |
| | | margin-right: 30px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .mapMode .layerItem { |
| | | width: 91px; |
| | | margin-right: 24px; |
| | | } |
| | | .mapMode img { |
| | | display: block; |
| | | width: 91px; |
| | | border-radius: 11px; |
| | | border: 1px dashed #127dff; |
| | | /* height: 40px; */ |
| | | margin-bottom: 11px; |
| | | } |
| | | span { |
| | | font-family: "微软雅黑"; |
| | | font-weight: 500; |
| | | font-size: 15px; |
| | | color: #212121; |
| | | line-height: 12px; |
| | | } |
| | | .active { |
| | | color: #4187ff; |
| | | border: 2px solid #4187ff; |
| | | color: #127dff; |
| | | border: 2px solid #127dff; |
| | | border-radius: 10px; |
| | | } |
| | | |
| | | .spanActive { |
| | | color: #4187ff; |
| | | color: #127dff; |
| | | } |
| | | |
| | | img { |
| | | .areaType { |
| | | width: 100%; |
| | | margin-top: 30px; |
| | | } |
| | | .areaType .ZTtitle { |
| | | margin-left: 28px; |
| | | margin-bottom: 3px; |
| | | } |
| | | .areaType .container{ |
| | | padding: 0 18px 22px; |
| | | justify-content: space-between; |
| | | } |
| | | .areaType img { |
| | | display: block; |
| | | width: 60px; |
| | | height: 40px; |
| | | margin-bottom: 5px; |
| | | width: 84px; |
| | | } |
| | | |
| | | .more { |
| | | float: right; |
| | | margin-right: 20px; |
| | | font-size: 0.12rem; |
| | | color: #4187ff; |
| | | color: #127dff; |
| | | line-height: 25px; |
| | | font-weight: 500; |
| | | font-family: unset; |
| | |
| | | id: "qiyexinxi", |
| | | name: "企业信息", |
| | | active: false, |
| | | src: require("@/assets/img/layer/qiyefenbu.png"), |
| | | src: require("@/assets/img/layer/qiyexinxi.png"), |
| | | }, |
| | | { |
| | | id: "shizhengganti", |
| | |
| | | id: "qiyexinxi", |
| | | name: "企业信息", |
| | | active: false, |
| | | src: require("@/assets/img/layer/qiyefenbu.png"), |
| | | src: require("@/assets/img/layer/qiyexinxi.png"), |
| | | }, |
| | | { |
| | | id: "shizhengganti", |