forked from MapComplete/MapComplete
Refactoring: fix download buttons
This commit is contained in:
parent
8a1f0599d9
commit
ef0ec5160d
10 changed files with 142 additions and 134 deletions
|
|
@ -7,24 +7,21 @@ import CheckBoxes from "../Input/Checkboxes"
|
|||
import { GeoOperations } from "../../Logic/GeoOperations"
|
||||
import Toggle from "../Input/Toggle"
|
||||
import Title from "../Base/Title"
|
||||
import FeaturePipeline from "../../Logic/FeatureSource/FeaturePipeline"
|
||||
import { UIEventSource } from "../../Logic/UIEventSource"
|
||||
import { Store } from "../../Logic/UIEventSource"
|
||||
import SimpleMetaTagger from "../../Logic/SimpleMetaTagger"
|
||||
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
|
||||
import { BBox } from "../../Logic/BBox"
|
||||
import FilteredLayer, { FilterState } from "../../Models/FilteredLayer"
|
||||
import geojson2svg from "geojson2svg"
|
||||
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
|
||||
import { SpecialVisualizationState } from "../SpecialVisualization"
|
||||
import { Feature, FeatureCollection } from "geojson"
|
||||
import { GeoIndexedStoreForLayer } from "../../Logic/FeatureSource/Actors/GeoIndexedStore"
|
||||
import LayerState from "../../Logic/State/LayerState"
|
||||
|
||||
export class DownloadPanel extends Toggle {
|
||||
constructor(state: {
|
||||
filteredLayers: UIEventSource<FilteredLayer[]>
|
||||
featurePipeline: FeaturePipeline
|
||||
layoutToUse: LayoutConfig
|
||||
currentBounds: UIEventSource<BBox>
|
||||
}) {
|
||||
constructor(state: SpecialVisualizationState) {
|
||||
const t = Translations.t.general.download
|
||||
const name = state.layoutToUse.id
|
||||
const name = state.layout.id
|
||||
|
||||
const includeMetaToggle = new CheckBoxes([t.includeMetaData])
|
||||
const metaisIncluded = includeMetaToggle.GetValue().map((selected) => selected.length > 0)
|
||||
|
|
@ -71,12 +68,13 @@ export class DownloadPanel extends Toggle {
|
|||
)
|
||||
).OnClickWithLoading(t.exporting, async () => {
|
||||
const geojson = DownloadPanel.getCleanGeoJsonPerLayer(state, metaisIncluded.data)
|
||||
const leafletdiv = document.getElementById("leafletDiv")
|
||||
const maindiv = document.getElementById("maindiv")
|
||||
const layers = state.layout.layers.filter((l) => l.source !== null)
|
||||
const csv = DownloadPanel.asSvg(geojson, {
|
||||
layers: state.filteredLayers.data.map((l) => l.layerDef),
|
||||
mapExtent: state.currentBounds.data,
|
||||
width: leafletdiv.offsetWidth,
|
||||
height: leafletdiv.offsetHeight,
|
||||
layers,
|
||||
mapExtent: state.mapProperties.bounds.data,
|
||||
width: maindiv.offsetWidth,
|
||||
height: maindiv.offsetHeight,
|
||||
})
|
||||
|
||||
Utils.offerContentsAsDownloadableFile(
|
||||
|
|
@ -97,7 +95,11 @@ export class DownloadPanel extends Toggle {
|
|||
t.licenseInfo.SetClass("link-underline"),
|
||||
]).SetClass("w-full flex flex-col border-4 border-gray-300 rounded-3xl p-4")
|
||||
|
||||
super(downloadButtons, t.noDataLoaded, state.featurePipeline.somethingLoaded)
|
||||
super(
|
||||
downloadButtons,
|
||||
t.noDataLoaded,
|
||||
state.dataIsLoading.map((x) => !x)
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -118,7 +120,7 @@ export class DownloadPanel extends Toggle {
|
|||
* DownloadPanel.asSvg(perLayer).replace(/\n/g, "") // => `<svg width="1000px" height="1000px" viewBox="0 0 1000 1000"> <g id="testlayer" inkscape:groupmode="layer" inkscape:label="testlayer"> <path d="M0,27.77777777777778 1000,472.22222222222223" style="fill:none;stroke-width:1" stroke="#ff0000"/> </g></svg>`
|
||||
*/
|
||||
public static asSvg(
|
||||
perLayer: Map<string, any[]>,
|
||||
perLayer: Map<string, Feature[]>,
|
||||
options?: {
|
||||
layers?: LayerConfig[]
|
||||
width?: 1000 | number
|
||||
|
|
@ -128,8 +130,11 @@ export class DownloadPanel extends Toggle {
|
|||
}
|
||||
) {
|
||||
options = options ?? {}
|
||||
const w = options.width ?? 1000
|
||||
const h = options.height ?? 1000
|
||||
const width = options.width ?? 1000
|
||||
const height = options.height ?? 1000
|
||||
if (width <= 0 || height <= 0) {
|
||||
throw "Invalid width of height, they should be > 0"
|
||||
}
|
||||
const unit = options.unit ?? "px"
|
||||
const mapExtent = { left: -180, bottom: -90, right: 180, top: 90 }
|
||||
if (options.mapExtent !== undefined) {
|
||||
|
|
@ -139,7 +144,7 @@ export class DownloadPanel extends Toggle {
|
|||
mapExtent.bottom = bbox.minLat
|
||||
mapExtent.top = bbox.maxLat
|
||||
}
|
||||
|
||||
console.log("Generateing svg, extent:", { mapExtent, width, height })
|
||||
const elements: string[] = []
|
||||
|
||||
for (const layer of Array.from(perLayer.keys())) {
|
||||
|
|
@ -152,7 +157,7 @@ export class DownloadPanel extends Toggle {
|
|||
const rendering = layerDef?.lineRendering[0]
|
||||
|
||||
const converter = geojson2svg({
|
||||
viewportSize: { width: w, height: h },
|
||||
viewportSize: { width, height },
|
||||
mapExtent,
|
||||
output: "svg",
|
||||
attributes: [
|
||||
|
|
@ -184,105 +189,85 @@ export class DownloadPanel extends Toggle {
|
|||
elements.push(group)
|
||||
}
|
||||
|
||||
const w = width
|
||||
const h = height
|
||||
const header = `<svg width="${w}${unit}" height="${h}${unit}" viewBox="0 0 ${w} ${h}">`
|
||||
return header + "\n" + elements.join("\n") + "\n</svg>"
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets all geojson as geojson feature
|
||||
* @param state
|
||||
* @param includeMetaData
|
||||
* @private
|
||||
*/
|
||||
private static getCleanGeoJson(
|
||||
state: {
|
||||
featurePipeline: FeaturePipeline
|
||||
currentBounds: UIEventSource<BBox>
|
||||
filteredLayers: UIEventSource<FilteredLayer[]>
|
||||
layout: LayoutConfig
|
||||
mapProperties: { bounds: Store<BBox> }
|
||||
perLayer: ReadonlyMap<string, GeoIndexedStoreForLayer>
|
||||
layerState: LayerState
|
||||
},
|
||||
includeMetaData: boolean
|
||||
) {
|
||||
const perLayer = DownloadPanel.getCleanGeoJsonPerLayer(state, includeMetaData)
|
||||
const features = [].concat(...Array.from(perLayer.values()))
|
||||
): FeatureCollection {
|
||||
const featuresPerLayer = DownloadPanel.getCleanGeoJsonPerLayer(state, includeMetaData)
|
||||
const features = [].concat(...Array.from(featuresPerLayer.values()))
|
||||
return {
|
||||
type: "FeatureCollection",
|
||||
features,
|
||||
}
|
||||
}
|
||||
|
||||
private static getCleanGeoJsonPerLayer(
|
||||
state: {
|
||||
featurePipeline: FeaturePipeline
|
||||
currentBounds: UIEventSource<BBox>
|
||||
filteredLayers: UIEventSource<FilteredLayer[]>
|
||||
},
|
||||
includeMetaData: boolean
|
||||
): Map<string, any[]> /*{layerId --> geojsonFeatures[]}*/ {
|
||||
const perLayer = new Map<string, any[]>()
|
||||
const neededLayers = state.filteredLayers.data.map((l) => l.layerDef.id)
|
||||
const bbox = state.currentBounds.data
|
||||
const featureList = state.featurePipeline.GetAllFeaturesAndMetaWithin(
|
||||
bbox,
|
||||
new Set(neededLayers)
|
||||
)
|
||||
for (const tile of featureList) {
|
||||
if (tile.layer !== undefined) {
|
||||
continue
|
||||
}
|
||||
|
||||
const layer = state.filteredLayers.data.find((fl) => fl.layerDef.id === tile.layer)
|
||||
if (!perLayer.has(tile.layer)) {
|
||||
perLayer.set(tile.layer, [])
|
||||
}
|
||||
const featureList = perLayer.get(tile.layer)
|
||||
const filters = layer.appliedFilters.data
|
||||
perfeature: for (const feature of tile.features) {
|
||||
if (!bbox.overlapsWith(BBox.get(feature))) {
|
||||
continue
|
||||
}
|
||||
|
||||
if (filters !== undefined) {
|
||||
for (let key of Array.from(filters.keys())) {
|
||||
const filter: FilterState = filters.get(key)
|
||||
if (filter?.currentFilter === undefined) {
|
||||
continue
|
||||
}
|
||||
if (!filter.currentFilter.matchesProperties(feature.properties)) {
|
||||
continue perfeature
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const cleaned = {
|
||||
type: feature.type,
|
||||
geometry: { ...feature.geometry },
|
||||
properties: { ...feature.properties },
|
||||
}
|
||||
|
||||
if (!includeMetaData) {
|
||||
for (const key in cleaned.properties) {
|
||||
if (key === "_lon" || key === "_lat") {
|
||||
continue
|
||||
}
|
||||
if (key.startsWith("_")) {
|
||||
delete feature.properties[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const datedKeys = [].concat(
|
||||
SimpleMetaTagger.metatags
|
||||
.filter((tagging) => tagging.includesDates)
|
||||
.map((tagging) => tagging.keys)
|
||||
)
|
||||
for (const key of datedKeys) {
|
||||
delete feature.properties[key]
|
||||
}
|
||||
|
||||
featureList.push(cleaned)
|
||||
}
|
||||
/**
|
||||
* Returns a new feature of which all the metatags are deleted
|
||||
*/
|
||||
private static cleanFeature(f: Feature): Feature {
|
||||
f = {
|
||||
type: f.type,
|
||||
geometry: { ...f.geometry },
|
||||
properties: { ...f.properties },
|
||||
}
|
||||
|
||||
return perLayer
|
||||
for (const key in f.properties) {
|
||||
if (key === "_lon" || key === "_lat") {
|
||||
continue
|
||||
}
|
||||
if (key.startsWith("_")) {
|
||||
delete f.properties[key]
|
||||
}
|
||||
}
|
||||
const datedKeys = [].concat(
|
||||
SimpleMetaTagger.metatags
|
||||
.filter((tagging) => tagging.includesDates)
|
||||
.map((tagging) => tagging.keys)
|
||||
)
|
||||
for (const key of datedKeys) {
|
||||
delete f.properties[key]
|
||||
}
|
||||
return f
|
||||
}
|
||||
|
||||
private static getCleanGeoJsonPerLayer(
|
||||
state: {
|
||||
layout: LayoutConfig
|
||||
mapProperties: { bounds: Store<BBox> }
|
||||
perLayer: ReadonlyMap<string, GeoIndexedStoreForLayer>
|
||||
layerState: LayerState
|
||||
},
|
||||
includeMetaData: boolean
|
||||
): Map<string, Feature[]> {
|
||||
const featuresPerLayer = new Map<string, any[]>()
|
||||
const neededLayers = state.layout.layers.filter((l) => l.source !== null).map((l) => l.id)
|
||||
const bbox = state.mapProperties.bounds.data
|
||||
|
||||
for (const neededLayer of neededLayers) {
|
||||
const indexedFeatureSource = state.perLayer.get(neededLayer)
|
||||
let features = indexedFeatureSource.GetFeaturesWithin(bbox, true)
|
||||
// The 'indexedFeatureSources' contains _all_ features, they are not filtered yet
|
||||
const filter = state.layerState.filteredLayers.get(neededLayer)
|
||||
features = features.filter((f) =>
|
||||
filter.isShown(f.properties, state.layerState.globalFilters.data)
|
||||
)
|
||||
if (!includeMetaData) {
|
||||
features = features.map((f) => DownloadPanel.cleanFeature(f))
|
||||
}
|
||||
featuresPerLayer.set(neededLayer, features)
|
||||
}
|
||||
|
||||
return featuresPerLayer
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,8 @@
|
|||
import UserRelatedState from "../Logic/State/UserRelatedState";
|
||||
import LoginToggle from "./Base/LoginToggle.svelte";
|
||||
import LoginButton from "./Base/LoginButton.svelte";
|
||||
import CopyrightPanel from "./BigComponents/CopyrightPanel.js";
|
||||
import CopyrightPanel from "./BigComponents/CopyrightPanel";
|
||||
import { DownloadPanel } from "./BigComponents/DownloadPanel";
|
||||
|
||||
export let state: ThemeViewState;
|
||||
let layout = state.layout;
|
||||
|
|
@ -150,12 +151,21 @@
|
|||
<RasterLayerPicker {availableLayers} value={mapproperties.rasterLayer}></RasterLayerPicker>
|
||||
</If>
|
||||
</div>
|
||||
<div slot="title2" class="flex">
|
||||
<img src="./assets/svg/download.svg" class="w-4 h-4"/>
|
||||
<Tr t={Translations.t.general.download.title}/>
|
||||
</div>
|
||||
<div slot="content2">
|
||||
<ToSvelte construct={() => new DownloadPanel(state)}/>
|
||||
</div>
|
||||
|
||||
<div slot="title2">
|
||||
<div slot="title3">
|
||||
<Tr t={Translations.t.general.attribution.title}/>
|
||||
</div>
|
||||
|
||||
<ToSvelte slot="content2" construct={() => new CopyrightPanel(state)}></ToSvelte>
|
||||
<ToSvelte slot="content3" construct={() => new CopyrightPanel(state)}></ToSvelte>
|
||||
|
||||
|
||||
</TabbedGroup>
|
||||
</FloatOver>
|
||||
</If>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue