大屏设计增加地图图层设置

This commit is contained in:
aixianling
2023-04-24 16:24:34 +08:00
parent 4f9c4c8d27
commit c3fa9b8d79
4 changed files with 55 additions and 40 deletions

View File

@@ -50,7 +50,8 @@
</AiRanking>
<AiDvMap v-else-if="data.type === 'AiDvMap'" style="width: 100%; height: 100%" :ref="'chart' + index" :key="`AiDvMap${index}`" :theme="theme"></AiDvMap>
<ai-map v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId" :is3d="data.is3d==1" :is3dAround="data.is3dAround === '1'"
:map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map" :lib.sync="lib" :onlyShowArea="data.limitArea==1"/>
:map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map" :lib.sync="lib"
:onlyShowArea="data.limitArea==1" :satellite="data.layers=='satellite'"/>
<ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"/>
<video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay v-else-if="data.type === 'video'"/>
<AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="data.type === 'partyOrg'" :instance="instance"/>

View File

@@ -39,10 +39,10 @@
<div class="layout-config__item--right">
<el-select size="mini" v-model="config.border" placeholder="请选择边框" clearable>
<el-option
v-for="(item, index) in borderList"
:key="index"
:label="item"
:value="item">
v-for="(item, index) in borderList"
:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</div>
@@ -93,12 +93,12 @@
<div class="layout-config__item--right">
<el-select size="mini" v-model="config.stripe" placeholder="请选择" clearable>
<el-option
label="是"
value="1">
label="是"
value="1">
</el-option>
<el-option
label="否"
value="0">
label="否"
value="0">
</el-option>
</el-select>
</div>
@@ -132,6 +132,15 @@
</el-select>
</div>
</div>
<div class="layout-config__item">
<label>地图图层</label>
<div class="layout-config__item--right">
<el-select size="mini" v-model="config.layers" placeholder="请选择" clearable>
<el-option label="地图" value="vector"/>
<el-option label="卫星" value="satellite"/>
</el-select>
</div>
</div>
<div class="layout-config__item">
<label>选择地区</label>
<div class="layout-config__item--right">
@@ -139,7 +148,7 @@
</div>
</div>
<div class="layout-config__item">
<label>限制显示地区</label>
<label>限制地区</label>
<div class="layout-config__item--right">
<ai-select v-model="config.limitArea" :selectList="dict.getDict('yesOrNo')"/>
</div>
@@ -180,10 +189,10 @@
<div class="layout-config__item--right">
<el-select size="mini" v-model="config.display" placeholder="请选择类型" clearable>
<el-option
v-for="(item, index) in summaryList"
:key="index"
:label="item"
:value="item">
v-for="(item, index) in summaryList"
:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</div>
@@ -203,11 +212,11 @@ export default {
dict: Object,
},
data () {
data() {
return {
borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5', 'border6'],//边框待选项
summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5',
'summary7', 'summary8', 'summary9', 'summary10', 'summary11', 'summary12', 'summary13', 'summary14', 'summary15'],//汇总待选项
'summary7', 'summary8', 'summary9', 'summary10', 'summary11', 'summary12', 'summary13', 'summary14', 'summary15'],//汇总待选项
//是否显示排名
tableStatus: [
{label: '是', value: '1'},
@@ -219,33 +228,32 @@ export default {
</script>
<style lang="scss" scoped>
.componentConfig {
.table-config {
& > div {
display: flex;
align-items: center;
justify-content: space-between;
width: 232px;
.componentConfig {
.table-config {
& > div {
display: flex;
align-items: center;
justify-content: space-between;
width: 232px;
:deep( .el-select ) {
width: 80px
input {
width: 80px;
}
:deep( .el-select ) {
width: 80px input {
width: 80px;
}
}
.el-select {
.el-select {
width: 100%;
.el-input {
width: 100%;
.el-input {
width: 100%;
:deep( input ) {
width: 80px
}
:deep( input ) {
width: 80px
}
}
}
}
}
}
</style>

View File

@@ -610,6 +610,7 @@ const components = [
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
is3dAround: '0',
limitArea: '0',
layers:'vector'
},
{
type: 'AiDvMap',

View File

@@ -22,7 +22,8 @@ export default {
mask: Boolean,
searchBus: {default: "2"},
pulseLines: Boolean,
onlyShowArea: Boolean
onlyShowArea: Boolean,
satellite: Boolean
},
computed: {
viewMode() {
@@ -33,7 +34,7 @@ export default {
return {
amap: null,
mapLib: null,
loca: null
loca: null,
}
},
watch: {
@@ -44,7 +45,7 @@ export default {
}
},
methods: {
initMap() {
initMap(c = 0) {
let {plugins, viewMode, mapStyle} = this
AMapLoader.load({
key: '54a02a43d9828a8f9cd4f26fe281e74e',
@@ -67,12 +68,16 @@ export default {
this.amap.on('complete', () => {
this.amap.setFitView();//视口自适应
})
/*增加卫星图层*/
if (this.satellite) {
this.amap.add([new AMap.TileLayer.RoadNet({zIndex: 11}), new AMap.TileLayer.Satellite({zIndex: 10})])
}
/* end */
this.$emit('update:map', this.amap)
this.$emit("loaded")
this.mapLoaded()
}
}).catch(this.initMap)
}).catch(() => c < 10 ? this.initMap(++c) : new Error("地图加载有问题"))
},
getMapArea() {
const {mapLib: AMap} = this