Skip to content

E
east-nanjing-new
Commit ec16d3b6 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

整理地图

parent 38bd947c
Show whitespace changes
Inline Side-by-side
Showing with 594 additions and 99 deletions
paths.json 0 → 100644
View file @ ec16d3b6
[
{
"name": "第一工作站",
"path": [
[-448.329953822261, -293.460812442785],
[-431.7521211874291, -671.2658974800385],
[-424.4347237401342, -721.1895650357069],
[-398.89824688593046, -803.6322429418965],
[-365.2547551197802, -867.1158334507442],
[-392.5813071687177, -874.8011678318296],
[-403.0902474574316, -1077.6749785273678],
[-353.7288206095779, -1071.1265279304666],
[-235.53838240578477, -1022.8565095154296],
[-110.56798272540209, -1153.1351229372399],
[-93.69249324525651, -1138.2894877772196],
[-68.09400454827903, -1119.6983373136686],
[108.32141989715319, -1078.5720831861604],
[162.94558513506695, -1051.8780519335146],
[319.4097326987787, -1005.952081175323],
[764.5059353911838, -763.8371763725968],
[632.5075268631167, -531.321704831237],
[456.02595645205906, -245.14531867638112],
[265.6661356282508, 118.08284918620457],
[171.38332987513922, 95.29556402830092],
[107.25481620144524, 61.96213147601915],
[43.56451955001853, 9.376088803933783],
[6.621997748308331, -34.25957789448293],
[-61.673711759777404, 39.489039654835494],
[-84.91161630850314, 43.66450373493032],
[-117.17844516507756, 35.95023049388385],
[-268.3674519701745, -19.099749397742613],
[-336.6383567411507, -44.7065063404232],
[-412.38375562778185, -44.284825809562136],
[-452.45167430528585, -55.794223828358156],
[-462.21647248071554, -56.90216875258136],
[-480.70426987297697, -84.93978993199039],
[-448.329953822261, -293.460812442785]
]
},
{
"name": "第二工作站",
"path": [
[62.564369398678764, 740.5887328698475],
[137.63177213765096, 581.9293660719472],
[265.9218724678516, 118.00636791345084],
[633.5446129216658, -540.7909132227782],
[1009.9399620665309, -314.1334937621058],
[1093.7138275309285, -280.9447555096293],
[964.1008078882224, 10.568783246614885],
[884.0476529902461, -20.486747614446926],
[826.2691520165776, 82.29581472151119],
[899.6994421063242, 120.57779232713301],
[826.2278107880617, 251.71216917922004],
[705.7015931731263, 615.2007867814553],
[689.5206363320461, 675.2447870777893],
[684.3364462761659, 756.2487902316288],
[534.3504692208784, 845.4714296144077],
[483.33539323239313, 867.770888275825],
[418.098934634476, 876.5269604754694],
[339.3025530833796, 879.3795052430589],
[278.7872627819655, 867.1094286195723],
[216.4694949172632, 843.7681709995571],
[158.20316744710817, 810.0089237935626],
[69.50142754362844, 745.9134831026813],
[62.564369398678764, 740.5887328698475],
]
},
{
"name": "第三工作站",
"path": [
[-827.6197677404292, 863.6615701613555],
[-708.507420140734, 529.087007783064],
[-544.6473267955473, 184.59055056098282],
[-523.8857618349174, 124.25716166503844],
[-451.3484422811116, -294.9842367135918],
[-152.79862643148, -277.8524316166481],
[-122.5120424208119, -268.7160201146585],
[-84.99074341988057, -211.12768879216264],
[-63.923253368233645, -138.51595502702844],
[-34.306397259521646, -87.17841745611986],
[38.478969665379054, 8.683623226294912],
[107.08887251018473, 60.05423378001592],
[158.0543390244511, 92.77168202741245],
[264.45839297839234, 119.5525298599415],
[171.40755583505143, 467.1165062378942],
[134.7709591243579, 587.717138064158],
[81.23406819640945, 702.8193864978215],
[60.116968670543656, 737.5046772225696],
[-52.52134254357884, 666.753298740646],
[-117.37746183915078, 641.493808117498],
[-151.4095611533494, 632.9609785518389],
[-186.334631003489, 628.7524414889315],
[-237.86233822557006, 637.5911961456075],
[-301.7758775109821, 657.7822521527194],
[-467.37230245383194, 765.9722471785428],
[-527.2261330989933, 795.6221762700677],
[-676.0132145273228, 855.6165670921827],
[-733.4857904099746, 866.563724403164],
[-791.5950212117696, 868.8044189887198],
[-827.6197677404292, 863.6615701613555],
]
}
]
\ No newline at end of file
src/components/MyComponent/MyMap/my-map.vue
View file @ ec16d3b6
......@@ -3,7 +3,8 @@
</template>
<script lang="ts">
import { defineComponent, nextTick, onMounted, PropType } from 'vue'
import { computed, defineComponent, nextTick, onMounted, PropType } from 'vue'
import store from '@/store'
declare const SMap: any
declare const Plugins: any
......@@ -27,29 +28,35 @@ export default defineComponent({
},
emits: ['complete', 'event'],
setup(props, ctx) {
const curMapType = computed(() => store.state.curMapType)
let map: any = null
onMounted(async () => {
await nextTick()
initMap()
})
function initMap() {
// onMounted(async () => {
// await nextTick()
// initMap()
// })
function initMap(config?: any) {
map = new SMap.Map('MapContainer', {
viewMode: '3D',
center: [1141.75319496382872, -480.0854532701907],
center: [1019.614669, 54.167243],
// center: [-135.98002789627407, -722.1597065437004],
zooms: [5, 10],
zoom: 7,
pitch: 45,
mapStyle: 'smap://styles/dark',
showBuildingBlock: true,
...config,
...props.config,
}).on(SMap.MapEvent.maploaded, () => {
// map.enableMouseEvent(false)
setBuildingBlock()
// setBuildingBlock()
ctx.emit('complete', map)
addListener()
// hideCommunity()
hideCommunity()
})
}
function layer(name: string) {
return map.getLayer(name)
}
function setBuildingBlock(val = false) {
map.getLayer('model_white_zw').visible = val // 整个街道图层名
map.getLayer('model_white_zhenxing2').visible = val // 振兴小区名
......@@ -69,7 +76,7 @@ export default defineComponent({
function setFilter(arr: unknown[], key = 'sect_id') {
if (arr.length === 0) return
const valid = arr.map((val) => {
return `${key} like '${val}'`
return `${key} = '${val}'`
})
map.setFilter('wg_gis_xq_point', valid.join(' or '))
map.setFilter('wg_gis_mpz', valid.join(' or '))
......@@ -78,9 +85,8 @@ export default defineComponent({
function addListener() {
// 触发地图点击事件
map.on(SMap.MapEvent.click, (view: any, eventParamter: any) => {
const { x, y } = eventParamter.mapPoint
console.log(map.getZoom())
console.log([x, y])
// const { x, y } = eventParamter.mapPoint
console.log(map.getZoom(), map.getCenter())
view.hitTest(eventParamter).then((res: any) => {
if (res.results && res.results.length > 0) {
ctx.emit(
......@@ -102,7 +108,9 @@ export default defineComponent({
console.error('传入的坐标点不能为空')
return
}
map.setZoomAndCenter(zoom, [+x, +y, 0])
curMapType.value === '3D'
? map.setZoomAndCenter(zoom, [+x, +y, 0])
: map.setZoomAndCenter(zoom, [+x, +y])
}
// 添加边界
......@@ -129,6 +137,25 @@ export default defineComponent({
function rotate(deg: number) {
map.setRotation(deg)
}
function cameraTo({
center = [0, 0],
heading = 180,
tilt = 45,
}: {
center: number[]
heading: number
tilt: number
}) {
// map.setPitch(60)
// map.setCenter(0, 0, 0)
// map.setRotation(180)
map.view.goTo({
// center,
heading,
tilt,
})
}
// 将数据转换为符合地图的点数组
function getMapPoints({
data = [],
......@@ -158,14 +185,11 @@ export default defineComponent({
item.communityMiny || item.Y || item.y || item.gpsy,
item.communityMinz || item.Z || item.z || item.gpsz || 0,
],
label: null,
}
if (labelKey) {
result.label = new SMap.Label({
text: (item[labelKey] || item[key]) + '',
label: new SMap.Label({
text: labelKey ? (item[labelKey] || item[key]) + '' : '',
size,
color,
})
}),
}
return new SMap.Marker(result)
})
......@@ -181,6 +205,7 @@ export default defineComponent({
}: PointProp) {
if (!map) return
const points = getMapPoints({ data, key, labelKey, icon, size, color })
console.log(points)
map.add(points)
return points
}
......@@ -191,14 +216,43 @@ export default defineComponent({
map.remove(points)
}
// 添加线状覆盖物
function addPolyLine({
paths,
attributes = {},
strokeColor = 'rgba(51,145,255,.6)',
width = 2,
}: {
paths: any[]
attributes: any
strokeColor: string
width: number
}) {
const polyline = new SMap.Polyline({
path: paths.map((item: any) => new SMap.LngLat(item[0], item[1])),
attributes,
cap: 'square',
strokeColor,
style: 'solid',
lineJoin: 'round',
width,
})
map.add(polyline)
return polyline
}
return {
initMap,
focus,
layer,
setBuildingBlock,
hideCommunity,
showCommunity,
addBoundary,
rotate,
cameraTo,
addPoint,
addPolyLine,
remove,
setFilter,
}
......
src/main.ts
View file @ ec16d3b6
......@@ -2,7 +2,7 @@ import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from '@/components/MyComponent'
import router from '@/router'
import { Progress, Select, Input } from 'ant-design-vue'
import { Progress, Select, Input, Tooltip, Checkbox } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import './assets/style/reset.styl'
......@@ -12,4 +12,6 @@ createApp(App)
.use(Progress)
.use(Select)
.use(Input)
.use(Tooltip)
.use(Checkbox)
.mount('#app')
src/store/index.ts
View file @ ec16d3b6
......@@ -55,6 +55,12 @@ export interface DutyDataProp {
export interface GlobalStateProps {
showLoading: boolean
curView: ViewType
curMapType: string
readonly zhenxing: any
readonly weihai: any
readonly workArea1: any
readonly workArea2: any
readonly workArea3: any
readonly viewOptions: ViewType[]
readonly communityOptions: ViewType[]
curTheme: ThemeType
......@@ -92,6 +98,7 @@ export interface GlobalStateProps {
dutyPlaces: Partial<DutyDataProp>
dutyRanking: Partial<DutyDataProp>
}
export default createStore<GlobalStateProps>({
state,
mutations,
......
src/store/mutations.ts
View file @ ec16d3b6
......@@ -13,6 +13,9 @@ export default {
SET_LOADING(state: GlobalStateProps, val: boolean): void {
state.showLoading = val
},
SET_MAP_TYPE(state: GlobalStateProps, val: string): void {
state.curMapType = val
},
SET_CURRENT_VIEW(state: GlobalStateProps, val: ViewType): void {
state.curView = val
},
......
src/store/state.ts
View file @ ec16d3b6
......@@ -2,6 +2,7 @@ import { GlobalStateProps } from './index'
export default {
showLoading: false,
curMapType: '2D',
curView: { name: '南京东路街道', type: 'street' },
viewOptions: [
{ name: '南京东路街道', type: 'street' },
......@@ -14,6 +15,130 @@ export default {
{ name: '威海路62弄', type: '527635870583459841' },
],
curTheme: 'manage',
zhenxing: { paths: [] },
weihai: { paths: [] },
workArea1: {
workStation: {
name: '第一',
address: '武胜路481号',
x: -136.67,
y: -660.07,
},
id: '01001',
center: [893.507386, -466.674359],
paths: [
[-448.329953822261, -293.460812442785],
[-431.7521211874291, -671.2658974800385],
[-424.4347237401342, -721.1895650357069],
[-398.89824688593046, -803.6322429418965],
[-365.2547551197802, -867.1158334507442],
[-392.5813071687177, -874.8011678318296],
[-403.0902474574316, -1077.6749785273678],
[-353.7288206095779, -1071.1265279304666],
[-235.53838240578477, -1022.8565095154296],
[-110.56798272540209, -1153.1351229372399],
[-93.69249324525651, -1138.2894877772196],
[-68.09400454827903, -1119.6983373136686],
[108.32141989715319, -1078.5720831861604],
[162.94558513506695, -1051.8780519335146],
[319.4097326987787, -1005.952081175323],
[764.5059353911838, -763.8371763725968],
[632.5075268631167, -531.321704831237],
[456.02595645205906, -245.14531867638112],
[265.6661356282508, 118.08284918620457],
[171.38332987513922, 95.29556402830092],
[107.25481620144524, 61.96213147601915],
[43.56451955001853, 9.376088803933783],
[6.621997748308331, -34.25957789448293],
[-61.673711759777404, 39.489039654835494],
[-84.91161630850314, 43.66450373493032],
[-117.17844516507756, 35.95023049388385],
[-268.3674519701745, -19.099749397742613],
[-336.6383567411507, -44.7065063404232],
[-412.38375562778185, -44.284825809562136],
[-452.45167430528585, -55.794223828358156],
[-462.21647248071554, -56.90216875258136],
[-480.70426987297697, -84.93978993199039],
[-448.329953822261, -293.460812442785],
],
},
workArea2: {
workStation: {
name: '第二',
address: '',
x: 382.4793321452691,
y: 678.9654976442117,
},
id: '01002',
center: [1291.532466, 175.263969],
paths: [
[62.564369398678764, 740.5887328698475],
[137.63177213765096, 581.9293660719472],
[265.9218724678516, 118.00636791345084],
[633.5446129216658, -540.7909132227782],
[1009.9399620665309, -314.1334937621058],
[1093.7138275309285, -280.9447555096293],
[964.1008078882224, 10.568783246614885],
[884.0476529902461, -20.486747614446926],
[826.2691520165776, 82.29581472151119],
[899.6994421063242, 120.57779232713301],
[826.2278107880617, 251.71216917922004],
[705.7015931731263, 615.2007867814553],
[689.5206363320461, 675.2447870777893],
[684.3364462761659, 756.2487902316288],
[534.3504692208784, 845.4714296144077],
[483.33539323239313, 867.770888275825],
[418.098934634476, 876.5269604754694],
[339.3025530833796, 879.3795052430589],
[278.7872627819655, 867.1094286195723],
[216.4694949172632, 843.7681709995571],
[158.20316744710817, 810.0089237935626],
[69.50142754362844, 745.9134831026813],
[62.564369398678764, 740.5887328698475],
],
},
workArea3: {
workStation: {
name: '第三',
address: '',
x: -57.84609277641425,
y: 261.561716873108,
},
center: [609.931363, 342.166777],
id: '01003',
paths: [
[-827.6197677404292, 863.6615701613555],
[-708.507420140734, 529.087007783064],
[-544.6473267955473, 184.59055056098282],
[-523.8857618349174, 124.25716166503844],
[-451.3484422811116, -294.9842367135918],
[-152.79862643148, -277.8524316166481],
[-122.5120424208119, -268.7160201146585],
[-84.99074341988057, -211.12768879216264],
[-63.923253368233645, -138.51595502702844],
[-34.306397259521646, -87.17841745611986],
[38.478969665379054, 8.683623226294912],
[107.08887251018473, 60.05423378001592],
[158.0543390244511, 92.77168202741245],
[264.45839297839234, 119.5525298599415],
[171.40755583505143, 467.1165062378942],
[134.7709591243579, 587.717138064158],
[81.23406819640945, 702.8193864978215],
[60.116968670543656, 737.5046772225696],
[-52.52134254357884, 666.753298740646],
[-117.37746183915078, 641.493808117498],
[-151.4095611533494, 632.9609785518389],
[-186.334631003489, 628.7524414889315],
[-237.86233822557006, 637.5911961456075],
[-301.7758775109821, 657.7822521527194],
[-467.37230245383194, 765.9722471785428],
[-527.2261330989933, 795.6221762700677],
[-676.0132145273228, 855.6165670921827],
[-733.4857904099746, 866.563724403164],
[-791.5950212117696, 868.8044189887198],
[-827.6197677404292, 863.6615701613555],
],
},
propertySummary: {},
caseList: [],
stationInfo: {},
......
src/view/community.vue
View file @ ec16d3b6
<template>
<m-loader v-if="loading" background="#000">
<!-- <m-loader v-if="loading" background="#000">
<p style="color: #fff; margin-top: 0.3rem">地图初始化…</p>
</m-loader>
</m-loader> -->
<m-grid
:template="['title title title', 'left . right']"
columns="16vw auto 49vw"
rows="0.4rem auto"
gap="0.05rem"
>
<m-title area="title"> 南东城运{{ title }} </m-title>
<m-title area="title" @click="test"> 南东城运{{ title }} </m-title>
<m-map
ref="map"
:config="{ center: [-75.5563452697323, -718.3061904627932], zoom: 8 }"
:config="{
center: [-75.5563452697323, -718.3061904627932],
zoom: 8,
}"
@complete="handleComplete"
@event="handleMapClick"
/>
......@@ -32,7 +35,7 @@
</div>
</div>
<SiteSelector />
<m-drawer v-model="showDrawer">
<m-drawer v-model="showDrawer" width="32vw">
<div class="community-device">
<p>类型：{{ drawerInfo.key }}</p>
<p>地点：{{ drawerInfo.relationName }}</p>
......@@ -50,7 +53,7 @@
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue'
import { computed, defineComponent, onMounted, ref, nextTick } from 'vue'
import LeftSection from '@/view/community/left-section.vue'
import RightSection from '@/view/community/right-section.vue'
import SiteSelector from '@/view/community/site-selector.vue'
......@@ -70,6 +73,11 @@ export default defineComponent({
name: 'Main',
components: { LeftSection, RightSection, SiteSelector },
setup() {
const test = () => {
console.log('go')
map.value.cameraTo({})
map.value.cameraTo({})
}
const loading = ref(true)
const title = computed(
() => store.state.communityInfo.bigscreenCommunityName
......@@ -80,15 +88,17 @@ export default defineComponent({
const initData = (id: unknown) => {
store.dispatch('initCommunityData', id)
}
onMounted(() => {
const map = ref<any>(null)
onMounted(async () => {
curId.value = route.query.id || communityOptions.value[0].type
initData(curId.value)
store.commit(
'SET_CURRENT_VIEW',
communityOptions.value.find((item) => item.type == curId.value)
) // 使标题不显示公共的3个按钮
await nextTick()
map.value.initMap()
})
const map = ref<any>(null)
const points = ref<any>(null)
const initMapPoints = (key: string, data: any[]) => {
const getIcon = (type: string) => {
......@@ -96,7 +106,7 @@ export default defineComponent({
if (type.indexOf('充电') >= 0) return point5
if (type.indexOf('电梯加装') >= 0) return point3
if (type.indexOf('垃圾箱') >= 0) return point6
if (type.indexOf('助老') >= 0) return point7 // TODO 看是否是“助老”
if (type.indexOf('助') >= 0) return point7
return point4 // 默认为美丽家园-微更新
}
const pointData = data.map((item: any) => {
......@@ -122,36 +132,46 @@ export default defineComponent({
drawerInfo.value = e
showDrawer.value = true
}
const handleComplete = (instance: any) => {
const handleComplete = () => {
let center = [-135.98002789627407, -722.1597065437004]
// let center = [-75.5563452697323, -718.3061904627932]
let zoom = 9.7608
map.value.layer('model_white_zw').visible = false
if (curId.value === '527635870583459841') {
instance.getLayer('model_white_WEIHAI33').visible = true
instance.getLayer('model_white_WEIHAI33').opacity = 1
map.value.layer('model_white_WEIHAI33').visible = true
center = [-38.73075358777865, -569.7527629458657]
zoom = 10
} else {
instance.getLayer('model_white_zhenxing2').visible = true
instance.getLayer('model_white_zhenxing2').opacity = 0.8
map.value.layer('model_white_zhenxing2').visible = true
}
let i = -90
map.value.rotate(i)
setTimeout(() => {
loading.value = false
setTimeout(() => {
const timer = setInterval(() => {
i += 2
if (i > 0) {
setTimeout(() => {
map.value.focus(...center, zoom)
}, 500)
clearInterval(timer)
}
map.value.rotate(i)
}, 2)
}, 1000)
}, 7000)
// let i = -90
// map.value.rotate(i)
// setTimeout(() => {
// setTimeout(() => {
// map.value.cameraTo({})
// setTimeout(() => {
// map.value.rotate(180)
// map.value.focus(...center, zoom)
// })
// }, 1000)
// }, 5000)
// setTimeout(() => {
// loading.value = false
// setTimeout(() => {
// const timer = setInterval(() => {
// i += 15
// if (i > 0) {
// setTimeout(() => {
// map.value.focus(...center, zoom)
// }, 500)
// clearInterval(timer)
// }
// map.value.rotate(i)
// }, 0)
// }, 1000)
// }, 7000)
}
const btns = ref([
{ name: '美丽家园', key: '微更新' },
......@@ -166,6 +186,8 @@ export default defineComponent({
{ name: '监控设施', key: '监控' },
]
}
// 点击下方分类撒点
const curBtn = ref<string | null>(null)
const handleClick = async (key: string) => {
map.value.remove(points.value)
......@@ -174,7 +196,7 @@ export default defineComponent({
map.value.showCommunity()
return
}
const { content } = (
const pointList = (
await ajax.get({
url: api.GET_COMMUNITY_FACILITY,
params: {
......@@ -183,14 +205,26 @@ export default defineComponent({
pageSize: 1000,
},
})
).data.content
if (key === '小区设施') {
const { content } = (
await ajax.get({
url: api.GET_COMMUNITY_FACILITY,
params: {
bigscreenCommunityId: curId.value,
classification: '为老设施',
pageSize: 1000,
},
})
).data
initMapPoints(key, content)
pointList.push(...content)
}
initMapPoints(key, pointList)
map.value.hideCommunity()
// map.value.setFilter(['1408241008852645'])
// map.value.showCommunity()
curBtn.value = key
}
return {
test,
loading,
title,
map,
......@@ -210,8 +244,9 @@ export default defineComponent({
@import '../components/MyComponent/main.styl'
.community-device
$full()
overflow hidden
img
width 50%
width 3rem
.btns
position fixed
z-index 9999
......
src/view/community/community-photo.vue
View file @ ec16d3b6
......@@ -24,6 +24,7 @@ import photo2 from '@/assets/images/community2.png'
import photo3 from '@/assets/images/community3.png'
import { ajax } from '@/ajax'
import VideoComponent from '../components/video-component.vue'
import video from '@/assets/images/video.mp4'
export default defineComponent({
name: 'CommunityPhoto',
......@@ -32,13 +33,15 @@ export default defineComponent({
const showModal = ref(false)
const src = ref<string | null>(null)
const handleClick = async (id: string) => {
if (!id) return
const [{ remark2 }] = (
await ajax.get({
url: `http://10.39.25.33:81/njdl/imp/pc/njdl/equipment/getEquipmentVideoById?id=${id}`,
})
).data
src.value = remark2
// if (!id) return
// const [{ remark2 }] = (
// await ajax.get({
// url: `http://10.39.25.33:81/njdl/imp/pc/njdl/equipment/getEquipmentVideoById?id=${id}`,
// })
// ).data
// src.value = remark2
src.value =
'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5KNmAWXGgAfLx1DPNngc885.mp4'
showModal.value = true
}
return {
......
src/view/community/left-section.vue
View file @ ec16d3b6
......@@ -193,7 +193,7 @@ export default defineComponent({
(buildingList.value.find(
(b: any) => b.sectId === curBuilding.value
) as any)
).icMember || []
).icMember.sort((a: any, b: any) => +a.dirDuty - +b.dirDuty) || []
}
return {
healthVal,
......
src/view/components/map-btns.vue
View file @ ec16d3b6
<template>
<div class="map-btns" :class="{ full: fullScreen }">
<!-- <a-checkbox-group :option="options" @change="handleChange" /> -->
<template v-for="btn in btns">
<a-tooltip v-if="btn.key === 'home'" :key="btn.key" placement="right">
<img :key="btn.key" :src="btn.icon" draggable="false" />
<template v-if="options.length > 0" #title>
<div class="btns-tip">
<a-checkbox-group :options="options" @change="handleChange" />
</div>
</template>
</a-tooltip>
<img
v-for="btn in btns"
v-else
:key="btn.key"
:src="btn.icon"
draggable="false"
@click="handleClick(btn.key)"
/>
</template>
</div>
<m-modal v-model="searchModal" title="搜索">
<div id="modal-search-bar">
......@@ -52,24 +63,39 @@ import btn3 from '@/assets/images/map-btn3.png'
import btn4 from '@/assets/images/map-btn4.png'
import btn5 from '@/assets/images/map-btn5.png'
import btn6 from '@/assets/images/map-btn6.png'
import d2 from '@/assets/images/2d.png'
import d3 from '@/assets/images/3d.png'
import store from '@/store'
export default defineComponent({
name: 'MapBtns',
emits: ['full'],
emits: ['full', 'change'],
setup(_, ctx) {
const btns = ref([
const btns = computed(() => {
const mapType =
store.state.curMapType === '2D'
? { key: '3D', icon: d3 }
: { key: '2D', icon: d2 }
const list = [
{ key: 'search', icon: btn1 },
{ key: 'full', icon: btn2 },
{ key: '', icon: btn3 },
{ key: 'home', icon: btn3 },
{ key: '', icon: btn4 },
{ key: '', icon: btn5 },
{ key: '', icon: btn6 },
])
]
return [mapType, ...list]
})
const fullScreen = ref(false)
const searchModal = ref(false)
const handleClick = (key: string) => {
switch (key) {
case '3D':
store.commit('SET_MAP_TYPE', key)
break
case '2D':
store.commit('SET_MAP_TYPE', key)
break
case 'full':
fullScreen.value = !fullScreen.value
ctx.emit('full', fullScreen.value)
......@@ -84,6 +110,23 @@ export default defineComponent({
const searchType = ref('case')
const searchKey = ref('')
const caseList = computed(() => store.state.caseList)
const options = computed(() => {
const result: { [key: string]: any } = {
street: [
{ label: '第一工作站', value: 'workArea1' },
{ label: '第二工作站', value: 'workArea2' },
{ label: '第三工作站', value: 'workArea3' },
],
work1: [
{ label: '振兴小区', value: 'zhenxing' },
{ label: '威海路62弄', value: 'weihai' },
],
}
return result[store.state.curView.type] || []
})
const handleChange = (e: any) => {
ctx.emit('change', e)
}
return {
btns,
fullScreen,
......@@ -92,6 +135,8 @@ export default defineComponent({
searchType,
searchKey,
caseList,
options,
handleChange,
}
},
})
......@@ -102,7 +147,11 @@ export default defineComponent({
$border = .01rem solid rgba(91,213,255,.3)
$bg = rgba(6,34,67,.4)
.btns-tip *
color #fff !important
font-size .1rem
.ant-checkbox-group-item
display block
#modal-search-bar
width 100%
position relative
......
src/view/components/video-component.vue
View file @ ec16d3b6
......@@ -35,7 +35,10 @@ export default defineComponent({
setup(props) {
const videoRef = ref<any | null>(null)
const isVideo = computed(
() => props.videoSrc && props.videoSrc.indexOf('m3u8') >= 0
() =>
props.videoSrc &&
(props.videoSrc.indexOf('m3u8') >= 0 ||
props.videoSrc.indexOf('mp4') >= 0)
)
const init = () => {
if (!videoRef.value) return
......
src/view/hooks/useSwitchMap.ts 0 → 100644
View file @ ec16d3b6
import { ref, watch, computed } from 'vue'
import { ajax, api } from '@/ajax'
import store from '@/store'
export default function useSwitchMap(map: any) {
const curMapType = computed(() => store.state.curMapType)
const curViewType = computed(() => store.state.curView.type)
watch(
() => curMapType.value,
(type) => {
if (!map.value) return
map.value.initMap({ viewMode: type })
},
{ immediate: true }
)
watch(
() => curViewType.value,
(type) => {
setPoints(type)
if (curMapType.value === '2D') return
store.commit('SET_MAP_TYPE', '2D')
}
)
// 根据条件显示小区点
function setPoints(type: string) {
switch (type) {
case 'work1':
showPoints({ gridId: store.state.workArea1.id })
map.value.focus(...store.state.workArea1.center, 7)
break
case 'work2':
showPoints({ gridId: store.state.workArea2.id })
map.value.focus(...store.state.workArea2.center, 7)
break
case 'work3':
showPoints({ gridId: store.state.workArea3.id })
map.value.focus(...store.state.workArea3.center, 7)
break
case 'street':
showPoints()
map.value.focus(1019.614669, 54.167243, 6.5)
break
default:
break
}
}
async function showPoints(params = {}) {
const { content } = (
await ajax.get({ url: api.GET_COMMUNITY_IDS, params })
).data
map.value.setFilter(content)
map.value.showCommunity()
}
const handleMapComplete = async () => {
map.value.addBoundary({ name: '南京东路街道', color: 'rgba(0,0,0,0)' })
setPoints(curViewType.value)
if (curMapType.value === '3D') {
if (curViewType.value === 'work1') {
map.value.layer('model_white_zw').visible = false
map.value.layer('model_white_dyjd').visible = true // 第一街道名
} else {
map.value.layer('model_white_zw').visible = true
map.value.layer('model_white_dyjd').visible = false
}
}
}
// 工作站勾边
const areaLines = ref([])
const selectArea = (e: any) => {
map.value.remove(areaLines.value)
areaLines.value = e.map(
(
name:
| 'workArea1'
| 'workArea2'
| 'workArea3'
| 'zhenxing'
| 'weihai'
| null
) => {
if (!name) return
return map.value.addPolyLine({
paths: store.state[name].paths,
strokeColor: '#FF6161',
})
}
)
}
return {
handleMapComplete,
selectArea,
}
}
src/view/main.vue
View file @ ec16d3b6
......@@ -5,7 +5,7 @@
rows="0.4rem auto"
gap="0.05rem"
>
<m-title area="title" @click="showDrawer = false">南东城运</m-title>
<m-title area="title" @click="test">南东城运</m-title>
<m-map ref="map" @complete="handleMapComplete" />
<m-animate enter="fadeInLeft" leave="fadeOutLeft">
<Command v-show="'street' === curViewType && !fullScreen" area="left" />
......@@ -38,7 +38,7 @@
/>
</m-animate>
<ViewSelector />
<MapBtns @full="fullScreen = $event" />
<MapBtns @change="selectArea" @full="fullScreen = $event" />
<m-drawer v-model="showDrawer">
<CaseDrawer />
<!-- <PopulationDrawer /> -->
......@@ -47,7 +47,7 @@
</template>
<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue'
import { computed, defineComponent, onMounted, ref, nextTick } from 'vue'
import ManageBasic from './left/manage-basic.vue'
import Command from './left/command.vue'
import PublicWork from './right/public-work.vue'
......@@ -59,6 +59,7 @@ import MapBtns from './components/map-btns.vue'
import CaseDrawer from './drawers/case-drawer.vue'
import PopulationDrawer from './drawers/population-drawer.vue'
import store from '@/store'
import useSwitchMap from './hooks/useSwitchMap'
export default defineComponent({
name: 'Main',
......@@ -96,8 +97,20 @@ export default defineComponent({
const fullScreen = ref(false)
const showDrawer = ref(false)
const map = ref<any>(null)
const mapInstance = ref<any>(null)
onMounted(async () => {
await nextTick()
map.value.initMap({ viewMode: '2D' })
})
// const mapInstance = ref<any>(null)
const { handleMapComplete, selectArea } = useSwitchMap(map)
function test() {
map.value.layer('model_white_zw').visible = false
map.value.layer('model_white_dyjd').visible = true
}
// const handleMapSwitch = (type: string) => {
// console.log(type)
// map.value.initMap({ viewMode: type })
// }
// watch(
// () => curViewType.value,
// (val) => {
......@@ -114,23 +127,25 @@ export default defineComponent({
// { immediate: true }
// )
const handleMapComplete = (instance: any) => {
instance.getLayer('model_white_dyjd').visible = true
instance.getLayer('model_white_dyjd').opacity = 0.8
// instance.getLayer('model_white_zw').visible = true
// instance.getLayer('model_white_zw').opacity = 0.8
map.value.addBoundary({ name: '南京东路街道', color: 'rgba(0,0,0,0)' })
mapInstance.value = instance
}
// const handleMapComplete = (instance: any) => {
// // instance.getLayer('model_white_dyjd').visible = true
// // instance.getLayer('model_white_dyjd').opacity = 0.8
// // instance.getLayer('model_white_zw').visible = true
// // instance.getLayer('model_white_zw').opacity = 0.8
// map.value.addBoundary({ name: '南京东路街道', color: 'rgba(0,0,0,0)' })
// mapInstance.value = instance
// }
return {
map,
mapInstance,
// mapInstance,
curViewType,
curTheme,
streetComponentList,
fullScreen,
showDrawer,
handleMapComplete,
selectArea,
test,
}
},
})
......
tsconfig.json
View file @ ec16d3b6
......@@ -17,5 +17,5 @@
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"exclude": ["node_modules", "dist"]
"exclude": ["node_modules", "dist", "public"]
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment