<template> <!-- 地图 --> <div class="position-r" id="map"> <newFiberMapBox :initJson="`/static/libs/mapbox/style/TemporaryProject.json`" @map-click="mapClick" ></newFiberMapBox> </div> </template> <script setup name="TemporaryProject"> import { getProjects } from '@/api/publicApi.js'; import newFiberMapBox from '@/views/xuncha/gisCommonPage/newFiberMapBox.vue'; import * as turf from '@turf/turf'; import bus from '@/utils/utils'; const timer = ref(null); const legendList = ref([ { name: '海绵型建设与社区', layername: 'HMJZYSQ', data: [], isCheck: true, }, { name: '海绵型道路广场', layername: 'HMXDLGC', data: [], isCheck: true, }, { name: '海绵型公园与绿地', layername: 'HMXGYLD', data: [], isCheck: true, }, { name: '海绵型水系', layername: 'HMXSX', data: [], isCheck: true, }, { name: '管网排查与修复', layername: 'GWPCYXF', data: [], isCheck: true, }, { name: '雨水管网及泵站', layername: 'GWJBZ', data: [], isCheck: true, }, { name: 'GIS平台建设与监测设施', layername: 'GIS', data: [], isCheck: true, }, ]); const getProjectss = async () => { let { data } = await getProjects(); let features = data; console.log(features, 'features'); let projectionFeatures = []; features.forEach((element) => { if (!element.projectLocation) return; let feature = turf.point(element.projectLocation.split(','), element); projectionFeatures.push(feature); legendList.value.forEach((i) => { if (i.layername == element.projectTypeCode) { i.data.push(feature); } }); }); legendList.value.forEach((i) => { i.data = turf.featureCollection(i.data); }); console.log('legendList---', legendList.value); bus.emit('setLegendData', legendList.value); timer.value = setInterval(() => { if (!!!newfiberMap.map.getLayer('point')) { return; } else { legendList.value.forEach((i) => { bus.emit('setLayerVisible', i); }); clearInterval(timer.value); } }, 1000); // let features = data // .filter((i) => i.projectLocation) // .map((i) => { // if (i.projectLocation.indexOf('POINT') > -1) { // i.feature = { // type: 'Feature', // geometry: WKT.parse(i.projectLocation), // properties: { // ...i, // mapParams: { // icon: ICONS_MAP[i.projectTypeCode], // group: i.projectTypeCode, // name: i.projectName, // }, // }, // }; // return i.feature; // } else { // return turf.point(i.projectLocation.split(',').map(Number), { // ...i, // mapParams: { // icon: ICONS_MAP[i.projectTypeCode], // group: i.projectTypeCode, // name: i.projectName, // }, // }); // } // }); // amapUtils.geojsonToMap(turf.featureCollection(features)); }; onMounted(() => { getProjectss(); setTimeout(() => { newfiberMap.map.on('click', 'point', (e) => { const feature = ( newfiberMap.map.queryRenderedFeatures([ [e.point.x - 10 / 2, e.point.y - 10 / 2], [e.point.x + 10 / 2, e.point.y + 10 / 2], ]) || [] ).filter((i) => i.layer.id)[0]; console.log('feature---', feature); }); }, 2000); // 初始化地图 // let interVal = setInterval(() => { // if (window.AMap) init(), clearInterval(interVal); // }, 500); }); </script> <style lang="less" scoped> .position-r { position: relative; width: 100%; height: 100%; background: #c6c6c6; } </style>