kopia lustrzana https://github.com/OpenDroneMap/WebODM
Merge pull request #576 from saricicekibrahim/templatelayer
added shapefile & geojson temporary layer supportpull/582/head
commit
7ef6e9dfae
|
@ -0,0 +1,99 @@
|
||||||
|
import shp from 'shpjs';
|
||||||
|
import Spinner from 'spin';
|
||||||
|
|
||||||
|
export function addTempLayer(file, _this) {
|
||||||
|
let maxSize = 5242880;
|
||||||
|
|
||||||
|
//random color for each feature
|
||||||
|
let getColor = () => {
|
||||||
|
return 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
|
||||||
|
}
|
||||||
|
|
||||||
|
//notifications on top
|
||||||
|
let writeMessage = (_err) => {
|
||||||
|
_this.setState({ error: _err.message || JSON.stringify(_err) });
|
||||||
|
spinner.stop();
|
||||||
|
}
|
||||||
|
|
||||||
|
//show wait spinner
|
||||||
|
var spinner = new Spinner({ color: '#fff', lines: 12 }).spin(_this.map._container);
|
||||||
|
|
||||||
|
if (file && file.size > maxSize) {
|
||||||
|
let err = {};
|
||||||
|
err.message = file.name + " is bigger than 5 MB.";
|
||||||
|
writeMessage(err);
|
||||||
|
} else {
|
||||||
|
//get just the first file
|
||||||
|
//file = file[0];
|
||||||
|
let reader = new FileReader();
|
||||||
|
let isZipFile = file.name.slice(-3) === 'zip';
|
||||||
|
if (isZipFile) {
|
||||||
|
//zipped shapefile
|
||||||
|
reader.onload = function () {
|
||||||
|
if (reader.readyState != 2 || reader.error) {
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
shp(reader.result).then(function (geojson) {
|
||||||
|
addLayer(geojson);
|
||||||
|
}).catch(function (err) {
|
||||||
|
err.message = "Not a proper zipped shapefile " + file.name;
|
||||||
|
writeMessage(err);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
reader.readAsArrayBuffer(file);
|
||||||
|
} else {
|
||||||
|
//geojson file
|
||||||
|
reader.onload = function () {
|
||||||
|
try {
|
||||||
|
let geojson = JSON.parse(reader.result);
|
||||||
|
addLayer(geojson);
|
||||||
|
} catch (err) {
|
||||||
|
err.message = "Not a proper json file " + file.name;
|
||||||
|
writeMessage(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
reader.readAsText(file);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let addLayer = (_geojson) => {
|
||||||
|
let tempLayer =
|
||||||
|
L.geoJson(_geojson, {
|
||||||
|
style: function (feature) {
|
||||||
|
return {
|
||||||
|
opacity: 1,
|
||||||
|
fillOpacity: 0.7,
|
||||||
|
color: getColor()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//for point layers
|
||||||
|
pointToLayer: function (feature, latlng) {
|
||||||
|
return L.circleMarker(latlng, {
|
||||||
|
radius: 6,
|
||||||
|
color: getColor(),
|
||||||
|
opacity: 1,
|
||||||
|
fillOpacity: 0.7
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//
|
||||||
|
onEachFeature: function (feature, layer) {
|
||||||
|
if (feature.properties) {
|
||||||
|
if (feature.properties) {
|
||||||
|
layer.bindPopup(Object.keys(feature.properties).map(function (k) {
|
||||||
|
return k + ": " + feature.properties[k];
|
||||||
|
}).join("<br />"), {
|
||||||
|
maxHeight: 200
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
tempLayer.addTo(_this.map);
|
||||||
|
//add layer to layer switcher with file name
|
||||||
|
_this.autolayers.addOverlay(tempLayer, file.name);
|
||||||
|
//zoom to all features
|
||||||
|
_this.map.fitBounds(tempLayer.getBounds());
|
||||||
|
spinner.stop();
|
||||||
|
}
|
||||||
|
}
|
|
@ -7,11 +7,13 @@ import '../vendor/leaflet/L.Control.MousePosition.css';
|
||||||
import '../vendor/leaflet/L.Control.MousePosition';
|
import '../vendor/leaflet/L.Control.MousePosition';
|
||||||
import '../vendor/leaflet/Leaflet.Autolayers/css/leaflet.auto-layers.css';
|
import '../vendor/leaflet/Leaflet.Autolayers/css/leaflet.auto-layers.css';
|
||||||
import '../vendor/leaflet/Leaflet.Autolayers/leaflet-autolayers';
|
import '../vendor/leaflet/Leaflet.Autolayers/leaflet-autolayers';
|
||||||
|
import Dropzone from '../vendor/dropzone';
|
||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import ErrorMessage from './ErrorMessage';
|
import ErrorMessage from './ErrorMessage';
|
||||||
import SwitchModeButton from './SwitchModeButton';
|
import SwitchModeButton from './SwitchModeButton';
|
||||||
import ShareButton from './ShareButton';
|
import ShareButton from './ShareButton';
|
||||||
import AssetDownloads from '../classes/AssetDownloads';
|
import AssetDownloads from '../classes/AssetDownloads';
|
||||||
|
import {addTempLayer} from '../classes/TempLayer';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import PluginsAPI from '../classes/plugins/API';
|
import PluginsAPI from '../classes/plugins/API';
|
||||||
import Basemaps from '../classes/Basemaps';
|
import Basemaps from '../classes/Basemaps';
|
||||||
|
@ -172,6 +174,15 @@ class Map extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
var thisComponent = this;
|
||||||
|
var mapTempLayerDrop = new Dropzone(this.container, {url : "/", clickable : false});
|
||||||
|
mapTempLayerDrop.on("addedfile", function(file) {
|
||||||
|
addTempLayer(file, thisComponent);
|
||||||
|
});
|
||||||
|
mapTempLayerDrop.on("error", function(file) {
|
||||||
|
mapTempLayerDrop.removeFile(file);
|
||||||
|
});
|
||||||
|
|
||||||
const { showBackground, tiles } = this.props;
|
const { showBackground, tiles } = this.props;
|
||||||
|
|
||||||
this.map = Leaflet.map(this.container, {
|
this.map = Leaflet.map(this.container, {
|
||||||
|
|
|
@ -56,7 +56,9 @@
|
||||||
"react-test-renderer": "^15.6.1",
|
"react-test-renderer": "^15.6.1",
|
||||||
"regenerator-runtime": "^0.11.0",
|
"regenerator-runtime": "^0.11.0",
|
||||||
"sass-loader": "^7.0.3",
|
"sass-loader": "^7.0.3",
|
||||||
|
"shpjs": "^3.4.2",
|
||||||
"sinon": "^4.0.0",
|
"sinon": "^4.0.0",
|
||||||
|
"spin": "0.0.1",
|
||||||
"statuses": "^1.3.1",
|
"statuses": "^1.3.1",
|
||||||
"style-loader": "^0.13.1",
|
"style-loader": "^0.13.1",
|
||||||
"tween.js": "^16.6.0",
|
"tween.js": "^16.6.0",
|
||||||
|
|
Ładowanie…
Reference in New Issue