|
|
|
@ -318,34 +318,71 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
|
|
|
|
|
if (item.properties.type === '0001' && mapState.area0001) { |
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
...item, |
|
|
|
|
properties: { ...item.properties, color: '#FF3648' } |
|
|
|
|
properties: { |
|
|
|
|
...item.properties, |
|
|
|
|
color: '#FF3648', |
|
|
|
|
stroke: '#FF3648' |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} else if (item.properties.type === '0002' && mapState.area0002) { |
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
...item, |
|
|
|
|
properties: { ...item.properties, color: '#FFA1AA' } |
|
|
|
|
properties: { |
|
|
|
|
...item.properties, |
|
|
|
|
color: '#FFA1AA', |
|
|
|
|
stroke: '#FFA1AA' |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} else if (item.properties.type === '0003' && mapState.area0003) { |
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
...item, |
|
|
|
|
properties: { ...item.properties, color: '#f5dcab' } |
|
|
|
|
properties: { |
|
|
|
|
...item.properties, |
|
|
|
|
color: '#f5dcab', |
|
|
|
|
stroke: '#f5dcab' |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} else if (item.properties.type === '0004' && mapState.area0004) { |
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
...item, |
|
|
|
|
properties: { ...item.properties, color: '#A16B00' } |
|
|
|
|
properties: { |
|
|
|
|
...item.properties, |
|
|
|
|
color: '#A16B00', |
|
|
|
|
stroke: '#A16B00' |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} else if (item.properties.type === '0005' && mapState.area0005) { |
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
...item, |
|
|
|
|
properties: { ...item.properties, color: '#AB40FF' } |
|
|
|
|
properties: { |
|
|
|
|
...item.properties, |
|
|
|
|
color: '#AB40FF', |
|
|
|
|
stroke: '#AB40FF' |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} else if (item.properties.type === '0006' && mapState.area0006) { |
|
|
|
|
if (item.properties?.divCd) { |
|
|
|
|
if (item.properties.divCd === '3cut') { |
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
...item, |
|
|
|
|
properties: { ...item.properties, color: '#a4edf5' } |
|
|
|
|
properties: { |
|
|
|
|
...item.properties, |
|
|
|
|
color: '#a4edf5', |
|
|
|
|
stroke: '#54797d' |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
...item, |
|
|
|
|
properties: { |
|
|
|
|
...item.properties, |
|
|
|
|
color: '#a4edf5', |
|
|
|
|
stroke: '#a4edf5' |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
useGeoJson.features = arrGeoJson.filter(i => i.geometry.type === 'Polygon'); |
|
|
|
|
|
|
|
|
@ -363,6 +400,7 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
|
|
|
|
|
layout: {}, |
|
|
|
|
paint: { |
|
|
|
|
'fill-color': ['get', 'color'], |
|
|
|
|
'fill-outline-color': ['get', 'stroke'], |
|
|
|
|
// 'fill-extrusion-height': 3000,
|
|
|
|
|
'fill-opacity': 0.5 |
|
|
|
|
} |
|
|
|
|