dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-30 23:13:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

export map to file

Browse Source
This commit is contained in:
Jan Prochazka
2022-06-11 18:34:57 +02:00
parent 6e1a1edac0
commit ffe82a82fa
3 changed files with 125 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/api/src/controllers/files.js
View File

@@ -8,6 +8,7 @@ const socket = require('../utility/socket');
const scheduler = require('./scheduler'); const scheduler = require('./scheduler');
const getDiagramExport = require('../utility/getDiagramExport'); const getDiagramExport = require('../utility/getDiagramExport');
const apps = require('./apps'); const apps = require('./apps');
const getMapExport = require('../utility/getMapExport');
function serialize(format, data) { function serialize(format, data) {
if (format == 'text') return data; if (format == 'text') return data;
@@ -187,6 +188,12 @@ module.exports = {
return true; return true;
}, },
exportMap_meta: true,
async exportMap({ filePath, geoJson }) {
await fs.writeFile(filePath, getMapExport(geoJson));
return true;
},
exportDiagram_meta: true, exportDiagram_meta: true,
async exportDiagram({ filePath, html, css, themeType, themeClassName }) { async exportDiagram({ filePath, html, css, themeType, themeClassName }) {
await fs.writeFile(filePath, getDiagramExport(html, css, themeType, themeClassName)); await fs.writeFile(filePath, getDiagramExport(html, css, themeType, themeClassName));

76
packages/api/src/utility/getMapExport.js Normal file
View File

@@ -0,0 +1,76 @@
const getMapExport = (geoJson) => {
return `<html>
<meta charset='utf-8'>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<script>
function createMap() {
map = leaflet.map('map').setView([50, 15], 13);
leaflet
.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap',
})
.addTo(map);
const geoJsonObj = leaflet
.geoJSON(${JSON.stringify(geoJson)}, {
style: function () {
return {
weight: 2,
fillColor: '#ff7800',
color: '#ff7800',
opacity: 0.8,
fillOpacity: 0.4,
};
},
pointToLayer: (feature, latlng) => {
return leaflet.circleMarker(latlng, {
radius: 7,
weight: 2,
fillColor: '#ff0000',
color: '#ff0000',
opacity: 0.9,
fillOpacity: 0.9,
});
},
onEachFeature: (feature, layer) => {
// does this feature have a property named popupContent?
if (feature.properties && feature.properties.popupContent) {
layer.bindPopup(feature.properties.popupContent);
}
},
})
.addTo(map);
map.fitBounds(geoJsonObj.getBounds());
}
</script>
<style>
#map {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body onload='createMap()'>
<div id='map'></div>
</body>
</html>`;
};
module.exports = getMapExport;

48
packages/web/src/elements/MapView.svelte
View File

@@ -22,8 +22,13 @@
import 'leaflet/dist/leaflet.css'; import 'leaflet/dist/leaflet.css';
import leaflet from 'leaflet'; import leaflet from 'leaflet';
import wellknown from 'wellknown'; import wellknown from 'wellknown';
import { isWktGeometry } from 'dbgate-tools'; import { isWktGeometry, ScriptWriter, ScriptWriterJson } from 'dbgate-tools';
import resizeObserver from '../utility/resizeObserver'; import resizeObserver from '../utility/resizeObserver';
import openNewTab from '../utility/openNewTab';
import contextMenu from '../utility/contextMenu';
import { saveExportedFile, saveFileToDisk } from '../utility/exportFileTools';
import { getCurrentConfig } from '../stores';
import { apiCall } from '../utility/api';
export let selection; export let selection;
@@ -31,6 +36,7 @@
let map; let map;
let selectionLayers = []; let selectionLayers = [];
let geoJson;
function createColumnsTable(cells) { function createColumnsTable(cells) {
return `<table>${cells.map(cell => `<tr><td>${cell.column}</td><td>${cell.value}</td></tr>`).join('\n')}</table>`; return `<table>${cells.map(cell => `<tr><td>${cell.column}</td><td>${cell.value}</td></tr>`).join('\n')}</table>`;
@@ -87,7 +93,7 @@
return; return;
} }
const geoJson = { geoJson = {
type: 'FeatureCollection', type: 'FeatureCollection',
features, features,
}; };
@@ -107,10 +113,10 @@
return leaflet.circleMarker(latlng, { return leaflet.circleMarker(latlng, {
radius: 7, radius: 7,
weight: 2, weight: 2,
fillColor: '#ff7800', fillColor: '#ff0000',
color: '#ff7800', color: '#ff0000',
opacity: 0.8, opacity: 0.9,
fillOpacity: 0.4, fillOpacity: 0.9,
}); });
}, },
onEachFeature: (feature, layer) => { onEachFeature: (feature, layer) => {
@@ -151,10 +157,40 @@
selection; selection;
addSelectionToMap(); addSelectionToMap();
} }
function createMenu() {
return [
{
text: 'Open on new tab',
onClick: () => {
openNewTab({
title: 'Map',
icon: 'img map',
tabComponent: 'MapTab',
props: {
selection,
},
});
},
},
{
text: 'Save to file',
onClick: () => {
saveFileToDisk(async filePath => {
await apiCall('files/export-map', {
geoJson,
filePath,
});
});
},
},
];
}
</script> </script>
<div <div
bind:this={refContainer} bind:this={refContainer}
use:contextMenu={createMenu}
class="flex1" class="flex1"
use:resizeObserver={true} use:resizeObserver={true}
on:resize={async e => { on:resize={async e => {