|
|
@@ -728,6 +728,21 @@ export default defineComponent({
|
|
|
};
|
|
|
// mySource = state.markCircle;
|
|
|
state.map.addSource('pointSource', state.markCircle);
|
|
|
+ state.map.addSource('pointSource1', {
|
|
|
+ type: 'geojson',
|
|
|
+ data: turf.circle(
|
|
|
+ [
|
|
|
+ parseFloat(i.locations?.split(',')[0] ?? '0'),
|
|
|
+ parseFloat(i.locations?.split(',')[1] ?? '0'),
|
|
|
+ ],
|
|
|
+ 10,
|
|
|
+ {
|
|
|
+ steps: 164,
|
|
|
+ units: 'kilometers',
|
|
|
+ properties: { foo: 'bar' },
|
|
|
+ },
|
|
|
+ ),
|
|
|
+ });
|
|
|
|
|
|
state.markCirclelayer = {
|
|
|
id: 'polygonLayer',
|
|
|
@@ -736,12 +751,24 @@ export default defineComponent({
|
|
|
layout: {},
|
|
|
paint: {
|
|
|
'fill-color': '#0dacfc',
|
|
|
- 'fill-opacity': 0.2,
|
|
|
+ 'fill-opacity': 0.1,
|
|
|
'fill-translate': [-10, -10],
|
|
|
'fill-outline-color': '#0a217d',
|
|
|
},
|
|
|
};
|
|
|
state.map.addLayer(state.markCirclelayer);
|
|
|
+ state.map.addLayer({
|
|
|
+ id: 'polygonLayer1',
|
|
|
+ type: 'fill',
|
|
|
+ source: 'pointSource1',
|
|
|
+ layout: {},
|
|
|
+ paint: {
|
|
|
+ 'fill-color': '#0dacfc',
|
|
|
+ 'fill-opacity': 0.2,
|
|
|
+ 'fill-translate': [-10, -10],
|
|
|
+ 'fill-outline-color': '#0a217d',
|
|
|
+ },
|
|
|
+ });
|
|
|
}
|
|
|
} catch (E) {}
|
|
|
|
|
|
@@ -910,7 +937,9 @@ export default defineComponent({
|
|
|
const handleRemoveAllMarkers = () => {
|
|
|
try {
|
|
|
state.map.removeSource('pointSource');
|
|
|
- state.map.removeLayer('polygonLayer');
|
|
|
+ state.map.removeLayer('polygonLayer');
|
|
|
+ state.map.removeSource('pointSource1');
|
|
|
+ state.map.removeLayer('polygonLayer1');
|
|
|
|
|
|
} catch (E) { }
|
|
|
|
