diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js index 7b49321f..5b14ae22 100644 --- a/src/components/map/mapbox/MapBoxMap.js +++ b/src/components/map/mapbox/MapBoxMap.js @@ -318,33 +318,70 @@ 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) { - arrGeoJson.push({ - ...item, - properties: { ...item.properties, color: '#a4edf5' } - }); + if (item.properties?.divCd) { + if (item.properties.divCd === '3cut') { + arrGeoJson.push({ + ...item, + 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 } diff --git a/src/views/control/setting/ControlSetting.js b/src/views/control/setting/ControlSetting.js index 574e3de3..bcb0f1f8 100644 --- a/src/views/control/setting/ControlSetting.js +++ b/src/views/control/setting/ControlSetting.js @@ -52,33 +52,70 @@ const ControlSetting = props => { 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' } //FFA800 + properties: { + ...item.properties, + color: '#f5dcab', + stroke: '#f5dcab' + } //FFA800 }); } 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) { - arrGeoJson.push({ - ...item, - properties: { ...item.properties, color: '#a4edf5' } //009cad - }); + if (item.properties?.divCd) { + if (item.properties.divCd === '3cut') { + arrGeoJson.push({ + ...item, + properties: { + ...item.properties, + color: '#a4edf5', + stroke: '#54797d' + } + }); + } + } else { + arrGeoJson.push({ + ...item, + properties: { + ...item.properties, + color: '#a4edf5', + stroke: '#a4edf5' + } + }); + } } });