Skip to content

H
huamu
Commit 041744c4 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

添加地图撒点方法

parent 9791d78c
Show whitespace changes
Inline Side-by-side
Showing with 226 additions and 35 deletions
src/hooks/useInitMap.ts
View file @ 041744c4
......@@ -4,7 +4,6 @@ import useJsApi from '@/hooks/useJsApi'
import senceViewPopup from '@/util/senceViewPopup'
export default async function useInitMap(el: HTMLElement, camera: any) {
console.log('use---', el, camera)
const config = {
jsApiUrl: 'http://10.108.3.41/arcgis_js_api/library/4.18/init.js',
cssUrl: 'http://10.108.3.41/arcgis_js_api/library/4.18/esri/css/main.css',
......@@ -65,8 +64,6 @@ export default async function useInitMap(el: HTMLElement, camera: any) {
'esri/core/urlUtils',
])
console.log('~~~', esriConfig)
esriConfig.request.useIdentity = false
esriConfig.request.interceptors.push({
......
src/shims-vue.d.ts
View file @ 041744c4
......@@ -30,4 +30,5 @@ declare interface Window {
sceneView: any
sceneLayer0: any
modelHighlight: any
pointLayers: any
}
\ No newline at end of file
src/util/clientLayersOperate.ts 0 → 100644
View file @ 041744c4
import useJsApi from '@/hooks/useJsApi'
export default {
async displayJSONData(layerName: string, Parameters: any) {
if (!Parameters.result || Parameters.result.length === 0) return
const [
LabelClass,
Graphic,
Point,
Polyline,
Polygon,
SpatialReference,
FeatureLayer,
Legend,
] = await useJsApi([
'esri/layers/support/LabelClass',
'esri/Graphic',
'esri/geometry/Point',
'esri/geometry/Polyline',
'esri/geometry/Polygon',
'esri/geometry/SpatialReference',
'esri/layers/FeatureLayer',
'esri/widgets/Legend',
])
let clientOperateLayer
const geometryType = 'point'
const graphicSource = Parameters.result.map((item: any) => {
const point = new Point({
x: item['上海2000经度'],
y: item['上海2000纬度'],
spatialReference: SpatialReference.WebMercator,
})
return new Graphic({
geometry: point,
attributes: item,
})
})
const renderer = {
type: 'simple', // autocasts as new SimpleRenderer()
symbol: {
type: 'point-3d', // autocasts as new PointSymbol3D()
symbolLayers: [
{
type: 'icon', // autocasts as new IconSymbol3DLayer()
resource: {
primitive: 'circle',
},
material: {
color: '#dd505e',
},
size: 8,
outline: {
color: 'white',
size: 1,
},
},
],
verticalOffset: {
screenLength: 40,
maxWorldLength: 200,
minWorldLength: 35,
},
// callout: {
// type: "line", // autocasts as new LineCallout3D()
// // color: "#659def",
// color: "#fff",
// size: 2,
// border: {
// // color: [192, 196, 204]
// color: "#659def"
// }
// }
}, // autocasts as new SimpleFillSymbol()
}
const statesLabelClass = new LabelClass({
labelExpressionInfo: {
expression: '$feature[\'党组织名称\']',
},
symbol: {
type: 'text',
color: '#fff',
font: {
size: 14,
// weight: "bold"
},
haloSize: 2,
haloColor: '#dd505e',
},
labelPlacement: 'above-center',
})
const fields = [
{
name: 'OBJECTID',
alias: 'OBJECTID',
type: 'oid',
},
]
Object.keys(Parameters.result[0]).forEach((item) => {
const field = {
name: item,
alias: item,
type: 'string',
}
fields.push(field)
})
clientOperateLayer = window.map.findLayerById(layerName)
if (!clientOperateLayer) {
clientOperateLayer = new FeatureLayer({
id: layerName,
title: layerName,
objectIdField: 'OBJECTID',
geometryType,
renderer: renderer,
labelingInfo: [statesLabelClass],
screenSizePerspectiveEnabled: false,
// popupEnabled: true,
// popupTemplate: {
// title: '{name}',
// content: [{
// type: 'fields',
// fieldInfos: [{
// fieldName: '党组织名称',
// label: '党组织名称',
// },
// {
// fieldName: '党组织地址',
// label: '党组织地址',
// },
// ],
// }, ],
// },
// popupTemplate: Parameters.popupTemplate,
fields: fields,
featureReduction: {
type: 'selection',
},
// elevationInfo: Parameters.elevationInfo,
spatialReference: SpatialReference.WebMercator,
})
window.map.add(clientOperateLayer)
if (!window.pointLayers) {
window.pointLayers = []
}
window.pointLayers.push(clientOperateLayer)
} else {
// clientOperateLayer.source = null;
// clientOperateLayer.refresh();
}
clientOperateLayer.source = graphicSource
clientOperateLayer.visible = true
clientOperateLayer.refresh()
},
}
src/view/components/building-drawer.vue
View file @ 041744c4
......@@ -134,6 +134,7 @@ const props = defineProps({
default: null,
},
})
const emit = defineEmits(['building'])
const show = computed(() => store.state.showBuildingDrawer)
const curBuilding = ref<any>(null)
......@@ -172,6 +173,7 @@ const setBuilding = (building: any, causedByNext?: boolean) => {
}
curBuilding.value = building
}
emit('building', curBuilding.value?.OBJECTID || null)
store.dispatch('getBasicInfo', query)
// TODO 地图切换楼宇画面
}
......
src/view/components/filter-drawer.vue
View file @ 041744c4
......@@ -162,6 +162,7 @@
:path="curPath"
:reset-info="checkPathThenFetchInfo"
:close="close"
@building="setBuildingBoundary"
/>
</template>
......@@ -475,6 +476,10 @@ const checkPathThenFetchInfo = () => {
store.dispatch('getBasicInfo', query.length > 0 ? query.join(',') : undefined)
}
function setBuildingBoundary(building: string) {
if (!building) return
emit('boundary', { type: 'building', name: building })
}
watch(
[() => curArea.value, () => curCommittee.value, () => curCommunity.value],
([area, committee, community]) => {
......
src/view/components/map.vue
View file @ 041744c4
......@@ -6,6 +6,8 @@
import { onMounted, ref, nextTick } from 'vue'
import useInitMap from '@/hooks/useInitMap'
import useJsApi from '@/hooks/useJsApi'
import clientLayersOperate from '@/util/clientLayersOperate'
import axios from 'axios'
const mapRef = ref<HTMLElement | undefined>()
const camera = {
......@@ -176,6 +178,48 @@ function showCommittee(name: string) {
function showCommunity(name: string) {
queryBound(0, name)
}
function showBuilding(name: string) {
window.sceneView
.whenLayerView(window.sceneLayer0)
.then(async (layerView: any) => {
const query = window.sceneLayer0.createQuery()
query.outFields = ['*']
const objectId =
(
await axios.get(
`http://10.108.3.48/changsanjiao/rest/services/HM_BOUND_3857/MapServer/4/query?where=NAME=%27${name}%27&f=json&outFields=*`,
)
)?.data?.features?.[0]?.attributes?.id || null
if (!objectId) return
query.objectIds = [objectId]
layerView
.queryExtent(query)
.then((result: any) => {
window.sceneView.goTo(result.extent.expand(7))
if (window.modelHighlight) {
window.modelHighlight.remove()
}
window.modelHighlight = layerView.highlight(objectId)
})
.catch(console.error)
})
}
function addPoints(name: string, data: any[]) {
clientLayersOperate.displayJSONData(name, data)
}
function clearPoints(name?: string) {
if (!window.pointLayers) return
window.pointLayers.forEach((item) => {
// TODO 看是否能根据name删除指定图层
item.visible = false
})
}
defineExpose({
resetMap,
switchBM,
......@@ -184,30 +228,10 @@ defineExpose({
showArea,
showCommittee,
showCommunity,
showBuilding,
addPoints,
clearPoints,
})
// function showBuilding(name: string) {
// window.sceneView
// .whenLayerView(window.sceneLayer0)
// .then(function (layerView: any) {
// const query = window.sceneLayer0.createQuery()
// query.outFields = ['*']
// //需要根据buildingName查询objectId
// const objectId = 492
// query.objectIds = [objectId]
// layerView
// .queryExtent(query)
// .then(function (result: any) {
// console.log(result)
// window.sceneView.goTo(result.extent.expand(7))
// if (window.modelHighlight) {
// window.modelHighlight.remove()
// }
// window.modelHighlight = layerView.highlight(objectId)
// })
// .catch(console.error)
// })
// }
</script>
<style lang="stylus" scoped>
......
src/view/components/new-activity-drawer.vue
View file @ 041744c4
......@@ -517,7 +517,6 @@ const rules: FormRules = {
}
return true
},
trigger: ['blur', 'change'],
message: '请上传附件',
},
{
......@@ -531,7 +530,6 @@ const rules: FormRules = {
}
return true
},
trigger: ['blur', 'change'],
message: '请上传签到照片',
},
],
......@@ -547,7 +545,6 @@ const rules: FormRules = {
if (!detailData.value.attachment) return false
return true
},
trigger: ['blur', 'change'],
message: '请输入活动内容描述',
},
{
......@@ -560,7 +557,6 @@ const rules: FormRules = {
return false
return true
},
trigger: ['blur', 'change'],
message: '请上传描述照片',
},
],
......@@ -573,12 +569,15 @@ const rules: FormRules = {
}
const submit = () => {
let noError = true
basicRef.value?.validate((errors: any) => {
if (errors) return
if (errors) noError = false
memberRef.value?.validate((errors: any) => {
if (errors) return
if (errors) noError = false
detailRef.value?.validate(async (errors: any) => {
if (errors) return
if (errors) noError = false
if (!noError) return
const { name, type, orgName, date, address } = basicData.value
const { count, excludeCount, attachment, attachmentPhoto, fileType } =
memberData.value
......@@ -592,7 +591,7 @@ const submit = () => {
活动名称: name,
标签类别: type,
党组织名称: orgName,
活动日期: +(date + '').slice(0, 10), // 截掉10位后的10，不然这接口会认为不是时间戳
活动日期: +(date + '').slice(0, 10), // 截掉10位后的0，不然这接口会认为不是时间戳
活动地址: address,
实际参与人数: count,
不计入参与活动党员人数: excludeCount,
......@@ -906,7 +905,7 @@ const handleExport = async () => {
.content
.n-upload
.n-upload-file-list.n-upload-file-list--grid
min-height .9rem
min-height .7rem
&.view-mode
.n-upload__trigger.n-upload__trigger--image-card
display none !important
......
src/view/main.vue
View file @ 041744c4
......@@ -38,6 +38,9 @@ const resetMap = () => map.value && map.value.resetMap()
const setBoundary = ({ type, name }: { type: string; name: string }) => {
if (!map.value) return
switch (type) {
case 'building':
map.value.showBuilding(name)
break
case 'community':
map.value.showCommunity(name)
break
......
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