Merge branch 'qzc-dev'
commit
ae42ed2c84
|
|
@ -373,7 +373,7 @@ const map = {
|
|||
layerVisible = {
|
||||
RealDrpLayer: false,
|
||||
RealHDLayer: false,
|
||||
RealSkLayer: true,
|
||||
RealSkLayer: false,
|
||||
BxSkLayer: false,
|
||||
FzdxLayer: false,
|
||||
WataLayer: false,
|
||||
|
|
|
|||
|
|
@ -14,6 +14,16 @@ import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
|||
import clsx from 'clsx';
|
||||
import { renderDrp } from '../../../../utils/renutils';
|
||||
|
||||
const DRP_COLORS = [
|
||||
'#ffffff',
|
||||
'rgb(122, 232, 122)',
|
||||
'rgb(227, 255, 83)',
|
||||
'rgb(255, 140, 83)',
|
||||
'rgb(255, 0, 0)',
|
||||
'rgb(232, 122, 219)',
|
||||
'rgb(136, 11, 29)',
|
||||
]
|
||||
|
||||
const data1 = [
|
||||
{
|
||||
"stcd": "61612150",
|
||||
|
|
@ -867,21 +877,40 @@ function DrpReal({ style }) {
|
|||
useEffect(()=>{
|
||||
getDrp(skObj)
|
||||
getHd(skObj)
|
||||
|
||||
return ()=>{
|
||||
const map = window.__mapref;
|
||||
const layer = map.getLayer('关联站点')
|
||||
if(layer){
|
||||
map.removeLayer('关联站点');
|
||||
map.removeSource('关联站点');
|
||||
}
|
||||
}
|
||||
},[skObj])
|
||||
|
||||
useEffect(()=>{
|
||||
const map = window.__mapref;
|
||||
|
||||
|
||||
|
||||
if(map){
|
||||
if(tab==='1'&&drpData?.length>0){
|
||||
if(tab==='1'&&drpData){
|
||||
setLayer(drpData,'drp')
|
||||
}
|
||||
if(tab==='2'&&hdData){
|
||||
setLayer(hdData,'hd')
|
||||
}
|
||||
}else{
|
||||
const dsq = setInterval(() => {
|
||||
const map = window.__mapref;
|
||||
if(map && drpData.length>0){
|
||||
clearInterval(dsq)
|
||||
setLayer(drpData,'drp')
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
|
||||
},[drpData,hdData,skObj,tab])
|
||||
|
||||
|
||||
|
||||
const getDrp = async(skObj)=>{
|
||||
const { lgtd, lttd } = skObj
|
||||
const step = 0.05
|
||||
|
|
@ -929,14 +958,74 @@ function DrpReal({ style }) {
|
|||
}
|
||||
|
||||
const setLayer = (data=[],type)=>{
|
||||
if(data.length===0){return}
|
||||
const map = window.__mapref;
|
||||
const layer = map.getLayer('关联站点')
|
||||
if(layer){
|
||||
map.removeLayer('关联站点');
|
||||
map.removeSource('关联站点');
|
||||
}
|
||||
map.addLayer({
|
||||
if(data.length===0){return}
|
||||
if(type==='drp'){
|
||||
map.addLayer({
|
||||
'id': '关联站点',//+new Date().getTime(),
|
||||
'type': 'circle',
|
||||
'source': {
|
||||
'type': 'geojson',
|
||||
'data': {
|
||||
'type': 'FeatureCollection',
|
||||
'features': [],
|
||||
},
|
||||
},
|
||||
'paint': {
|
||||
'circle-color': [
|
||||
'case',
|
||||
['==', ['get', 'state'], 1], [
|
||||
'interpolate-hcl',
|
||||
['linear'],
|
||||
['get', 'h1'],
|
||||
0, DRP_COLORS[0],
|
||||
10, DRP_COLORS[1],
|
||||
25, DRP_COLORS[2],
|
||||
50, DRP_COLORS[3],
|
||||
100, DRP_COLORS[4],
|
||||
250, DRP_COLORS[5],
|
||||
500, DRP_COLORS[6],
|
||||
],
|
||||
'#aaa'
|
||||
],
|
||||
'circle-opacity': [
|
||||
'case',
|
||||
['==', ['get', 'state'], 1], 1,
|
||||
0.6
|
||||
],
|
||||
'circle-stroke-width': [
|
||||
'step',
|
||||
['zoom'],
|
||||
0,
|
||||
12, 2,
|
||||
14, 3
|
||||
],
|
||||
'circle-stroke-color': [
|
||||
'match',
|
||||
['get', 'type'],
|
||||
'sh', '#91eda1',
|
||||
'sw', '#f8ec82',
|
||||
'qx', '#e091ed',
|
||||
'#fff'
|
||||
],
|
||||
'circle-radius': [
|
||||
'interpolate',
|
||||
['linear'],
|
||||
['zoom'],
|
||||
10, 6,
|
||||
14, 10,
|
||||
]
|
||||
},
|
||||
'visibility': 'visible',
|
||||
});
|
||||
}
|
||||
if(type==='hd'){
|
||||
map.addLayer({
|
||||
'id': '关联站点',//+new Date().getTime(),
|
||||
'type': 'symbol',
|
||||
'source': {
|
||||
|
|
@ -947,35 +1036,36 @@ function DrpReal({ style }) {
|
|||
},
|
||||
},
|
||||
'layout': {
|
||||
// 'icon-allow-overlap': true,
|
||||
// 'text-allow-overlap': true,
|
||||
'icon-image': '水库-离线', // 从properties中动态读取icon字段
|
||||
'icon-size': [
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
10, 0.6,
|
||||
14, 0.6,
|
||||
],
|
||||
'text-size': [
|
||||
'icon-allow-overlap': true,
|
||||
'text-allow-overlap': true,
|
||||
'icon-image': '水位站',
|
||||
'icon-size': [
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
5, 10,
|
||||
14, 14,
|
||||
],
|
||||
'text-font': ['Roboto Black'],
|
||||
'text-field': [
|
||||
'step',
|
||||
['zoom'],
|
||||
'',
|
||||
8, ['get', 'stnm']
|
||||
],
|
||||
'text-anchor': 'top',
|
||||
'text-offset': [0, 1],
|
||||
},
|
||||
10, 0.5,
|
||||
14, 1,
|
||||
],
|
||||
'text-size': [
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
10, 10,
|
||||
14, 16,
|
||||
],
|
||||
},
|
||||
'paint': {
|
||||
'text-color': '#fff'
|
||||
'text-color': [
|
||||
'case',
|
||||
['!=', ['get', 'state'], 1], '#888',
|
||||
['==', ['get', 'warning'], 3], '#f00',
|
||||
['==', ['get', 'warning'], 2], 'yellow',
|
||||
['==', ['get', 'warning'], 1], 'yellow',
|
||||
'#0f0'
|
||||
],
|
||||
'text-halo-color': '#062040',
|
||||
'text-halo-width': 1
|
||||
},
|
||||
'visibility': 'visible',
|
||||
});
|
||||
map.getSource('sk1111').setData(parseGeoJSON(data))
|
||||
});
|
||||
}
|
||||
map.getSource('关联站点').setData(parseGeoJSON(data))
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1025,6 +1115,7 @@ function DrpReal({ style }) {
|
|||
<div className="table-ellipsis cursor-pointer" onClick={() => {
|
||||
const { lgtd, lttd } = row;
|
||||
if (lgtd && lttd) {
|
||||
dispatch.runtime.setFeaturePop({ type: 'RealDrpPop', properties: row, coordinates: [row.lgtd, row.lttd] });
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [lgtd, lttd],
|
||||
zoom: 15,
|
||||
|
|
@ -1059,6 +1150,7 @@ function DrpReal({ style }) {
|
|||
<div className="table-ellipsis cursor-pointer" onClick={() => {
|
||||
const { lgtd, lttd } = row;
|
||||
if (lgtd && lttd) {
|
||||
dispatch.runtime.setFeaturePop({ type: 'RealHDPop', properties: row, coordinates: [row.lgtd, row.lttd] });
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [lgtd, lttd],
|
||||
zoom: 15,
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
|||
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
||||
import clsx from 'clsx';
|
||||
import { adnmExact, adnmZhen } from '../../../../models/_/adcd';
|
||||
import { geometryBound, geometryCenter } from '../../../../utils/tools'
|
||||
|
||||
|
||||
const data1 = [
|
||||
|
|
@ -1273,10 +1274,6 @@ function DrpReal({ style }) {
|
|||
const [azdData,setAzdData] = useState([])
|
||||
const [qsydwData,setQsydwData] = useState([])
|
||||
const [yhjmhData,setYhjmhData] = useState([])
|
||||
|
||||
|
||||
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const skObj = useSelector(s => s.runtime.skObj);
|
||||
useEffect(()=>{
|
||||
|
|
@ -1365,15 +1362,31 @@ function DrpReal({ style }) {
|
|||
tabs={
|
||||
<span className="button-group">
|
||||
<span className={clsx({ active: tab==='1' })} onClick={() => {
|
||||
dispatch.map.setLayerVisible({Dcpj_danadLayer:true});
|
||||
dispatch.map.setLayerVisible({Dcpj_placementLayer:false});
|
||||
dispatch.map.setLayerVisible({Dcpj_bsnssinfoLayer:false});
|
||||
dispatch.map.setLayerVisible({Dcpj_flrvvlgLayer:false});
|
||||
setTab('1')
|
||||
}}>危险区</span>
|
||||
<span className={clsx({ active: tab==='2' })} onClick={() => {
|
||||
dispatch.map.setLayerVisible({Dcpj_danadLayer:false});
|
||||
dispatch.map.setLayerVisible({Dcpj_placementLayer:true});
|
||||
dispatch.map.setLayerVisible({Dcpj_bsnssinfoLayer:false});
|
||||
dispatch.map.setLayerVisible({Dcpj_flrvvlgLayer:false});
|
||||
setTab('2')
|
||||
}}>安置点</span>
|
||||
<span className={clsx({ active: tab==='3' })} onClick={() => {
|
||||
dispatch.map.setLayerVisible({Dcpj_danadLayer:false});
|
||||
dispatch.map.setLayerVisible({Dcpj_placementLayer:false});
|
||||
dispatch.map.setLayerVisible({Dcpj_bsnssinfoLayer:true});
|
||||
dispatch.map.setLayerVisible({Dcpj_flrvvlgLayer:false});
|
||||
setTab('3')
|
||||
}}>企事业单位</span>
|
||||
<span className={clsx({ active: tab==='4' })} onClick={() => {
|
||||
dispatch.map.setLayerVisible({Dcpj_danadLayer:false});
|
||||
dispatch.map.setLayerVisible({Dcpj_placementLayer:false});
|
||||
dispatch.map.setLayerVisible({Dcpj_bsnssinfoLayer:false});
|
||||
dispatch.map.setLayerVisible({Dcpj_flrvvlgLayer:true});
|
||||
setTab('4')
|
||||
}}>沿河居民户</span>
|
||||
</span>
|
||||
|
|
@ -1397,14 +1410,20 @@ function DrpReal({ style }) {
|
|||
{/* <DpTableCell align="center">{index+1}</DpTableCell> */}
|
||||
<DpTableCell component="th" scope="row">
|
||||
<div className="table-ellipsis cursor-pointer" onClick={() => {
|
||||
const { res_lon:lgtd, res_lat:lttd } = row;
|
||||
if (lgtd && lttd) {
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [lgtd, lttd],
|
||||
zoom: 15,
|
||||
pitch: 60,
|
||||
bearing: 0
|
||||
});
|
||||
const { geometry } = row;
|
||||
if (geometry) {
|
||||
const bbox = geometryBound(geometry);
|
||||
const center = geometryCenter(geometry);
|
||||
if (bbox && center) {
|
||||
dispatch.map.setLayerVisible({Dcpj_danadLayer:true});
|
||||
dispatch.runtime.setFeaturePop({ type: 'danad', properties: row, coordinates: center });
|
||||
dispatch.runtime.setCameraTarget({
|
||||
bounds: [[bbox[0], bbox[1]], [bbox[2], bbox[3]]],
|
||||
zoom: 15,
|
||||
pitch: 60,
|
||||
bearing: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
}}>{row.NAME}</div>
|
||||
</DpTableCell>
|
||||
|
|
@ -1432,6 +1451,8 @@ function DrpReal({ style }) {
|
|||
<div className="table-ellipsis cursor-pointer" onClick={() => {
|
||||
const { lgtd, lttd } = row;
|
||||
if (lgtd && lttd) {
|
||||
dispatch.map.setLayerVisible({Dcpj_placementLayer:true});
|
||||
dispatch.runtime.setFeaturePop({ type: 'placement', properties: row, coordinates: [row.lgtd, row.lttd] });
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [lgtd, lttd],
|
||||
zoom: 15,
|
||||
|
|
@ -1465,6 +1486,8 @@ function DrpReal({ style }) {
|
|||
<div className="table-ellipsis cursor-pointer" onClick={() => {
|
||||
const { lgtd, lttd } = row;
|
||||
if (lgtd && lttd) {
|
||||
dispatch.map.setLayerVisible({Dcpj_bsnssinfoLayer:true});
|
||||
dispatch.runtime.setFeaturePop({ type: 'bsnssinfo', properties: row, coordinates: [row.lgtd, row.lttd] });
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [lgtd, lttd],
|
||||
zoom: 15,
|
||||
|
|
@ -1498,6 +1521,8 @@ function DrpReal({ style }) {
|
|||
<div className="table-ellipsis cursor-pointer" onClick={() => {
|
||||
const { lgtd, lttd } = row;
|
||||
if (lgtd && lttd) {
|
||||
dispatch.map.setLayerVisible({Dcpj_flrvvlgLayer:true});
|
||||
dispatch.runtime.setFeaturePop({ type: 'flrvvlg', properties: row, coordinates: [row.lgtd, row.lttd] });
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [lgtd, lttd],
|
||||
zoom: 15,
|
||||
|
|
|
|||
|
|
@ -11612,13 +11612,13 @@ function SkReal({ style }) {
|
|||
const dispatch = useDispatch();
|
||||
|
||||
const setSkLayer = (data=[])=>{
|
||||
if(data.length===0){return}
|
||||
const map = window.__mapref;
|
||||
const layer = map.getLayer('sk1111')
|
||||
if(layer){
|
||||
map.removeLayer('sk1111');
|
||||
map.removeSource('sk1111');
|
||||
}
|
||||
if(data.length===0){return}
|
||||
map.addLayer({
|
||||
'id': 'sk1111',//+new Date().getTime(),
|
||||
'type': 'symbol',
|
||||
|
|
@ -11661,13 +11661,13 @@ function SkReal({ style }) {
|
|||
map.getSource('sk1111').setData(parseGeoJSON(data))
|
||||
}
|
||||
const setSkLayer2 = (data=[])=>{
|
||||
if(data.length===0){return}
|
||||
const map = window.__mapref;
|
||||
const layer = map.getLayer('sk2222')
|
||||
if(layer){
|
||||
map.removeLayer('sk2222');
|
||||
map.removeSource('sk2222');
|
||||
}
|
||||
if(data.length===0){return}
|
||||
map.addLayer({
|
||||
'id': 'sk2222',//+new Date().getTime(),
|
||||
'type': 'symbol',
|
||||
|
|
@ -11756,6 +11756,20 @@ function SkReal({ style }) {
|
|||
setSkLayer2([data1[0]])
|
||||
}
|
||||
}, 500);
|
||||
|
||||
return ()=>{
|
||||
const map = window.__mapref;
|
||||
const layer = map.getLayer('sk1111')
|
||||
if(layer){
|
||||
map.removeLayer('sk1111');
|
||||
map.removeSource('sk1111');
|
||||
}
|
||||
const layer2 = map.getLayer('sk2222')
|
||||
if(layer2){
|
||||
map.removeLayer('sk2222');
|
||||
map.removeSource('sk2222');
|
||||
}
|
||||
}
|
||||
},[])
|
||||
|
||||
return (
|
||||
|
|
|
|||
Loading…
Reference in New Issue