ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #8881 from fredj/dnd_style

Browse Source 
Remove custom styles in drag-and-drop examples
This commit is contained in:
Tim Schaub
2018-11-05 10:06:33 -07:00
committed by GitHub
parent 10b56a4543 dc988cba60
commit 65bbee4c8b
3 changed files with 3 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/drag-and-drop-image-vector.html
View File

@@ -3,7 +3,7 @@ layout: example.html
title: Drag-and-Drop Image Vector
shortdesc: Example of using the drag-and-drop interaction with image vector rendering.
docs: >
Example of using the drag-and-drop interaction with an `ol/layer/Vector` with `renderMode: 'image'``. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
Example of using the drag-and-drop interaction with an `ol/layer/Vector` with `renderMode: 'image'`. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image"
cloak:
- key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5

71
examples/drag-and-drop-image-vector.js
View File

@@ -4,74 +4,6 @@ import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js';
import {defaults as defaultInteractions, DragAndDrop} from '../src/ol/interaction.js';
import {Vector as VectorLayer, Tile as TileLayer} from '../src/ol/layer.js';
import {BingMaps, Vector as VectorSource} from '../src/ol/source.js';
import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
const defaultStyle = {
'Point': new Style({
image: new CircleStyle({
fill: new Fill({
color: 'rgba(255,255,0,0.5)'
}),
radius: 5,
stroke: new Stroke({
color: '#ff0',
width: 1
})
})
}),
'LineString': new Style({
stroke: new Stroke({
color: '#f00',
width: 3
})
}),
'Polygon': new Style({
fill: new Fill({
color: 'rgba(0,255,255,0.5)'
}),
stroke: new Stroke({
color: '#0ff',
width: 1
})
}),
'MultiPoint': new Style({
image: new CircleStyle({
fill: new Fill({
color: 'rgba(255,0,255,0.5)'
}),
radius: 5,
stroke: new Stroke({
color: '#f0f',
width: 1
})
})
}),
'MultiLineString': new Style({
stroke: new Stroke({
color: '#0f0',
width: 3
})
}),
'MultiPolygon': new Style({
fill: new Fill({
color: 'rgba(0,0,255,0.5)'
}),
stroke: new Stroke({
color: '#00f',
width: 1
})
})
};
const styleFunction = function(feature, resolution) {
const featureStyleFunction = feature.getStyleFunction();
if (featureStyleFunction) {
return featureStyleFunction.call(feature, resolution);
} else {
return defaultStyle[feature.getGeometry().getType()];
}
};
const dragAndDropInteraction = new DragAndDrop({
formatConstructors: [
@@ -106,8 +38,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
});
map.addLayer(new VectorLayer({
renderMode: 'image',
source: vectorSource,
style: styleFunction
source: vectorSource
}));
map.getView().fit(vectorSource.getExtent());
});

71
examples/drag-and-drop.js
View File

@@ -4,74 +4,6 @@ import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js';
import {defaults as defaultInteractions, DragAndDrop} from '../src/ol/interaction.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
import {BingMaps, Vector as VectorSource} from '../src/ol/source.js';
import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
const defaultStyle = {
'Point': new Style({
image: new CircleStyle({
fill: new Fill({
color: 'rgba(255,255,0,0.5)'
}),
radius: 5,
stroke: new Stroke({
color: '#ff0',
width: 1
})
})
}),
'LineString': new Style({
stroke: new Stroke({
color: '#f00',
width: 3
})
}),
'Polygon': new Style({
fill: new Fill({
color: 'rgba(0,255,255,0.5)'
}),
stroke: new Stroke({
color: '#0ff',
width: 1
})
}),
'MultiPoint': new Style({
image: new CircleStyle({
fill: new Fill({
color: 'rgba(255,0,255,0.5)'
}),
radius: 5,
stroke: new Stroke({
color: '#f0f',
width: 1
})
})
}),
'MultiLineString': new Style({
stroke: new Stroke({
color: '#0f0',
width: 3
})
}),
'MultiPolygon': new Style({
fill: new Fill({
color: 'rgba(0,0,255,0.5)'
}),
stroke: new Stroke({
color: '#00f',
width: 1
})
})
};
const styleFunction = function(feature, resolution) {
const featureStyleFunction = feature.getStyleFunction();
if (featureStyleFunction) {
return featureStyleFunction.call(feature, resolution);
} else {
return defaultStyle[feature.getGeometry().getType()];
}
};
const dragAndDropInteraction = new DragAndDrop({
formatConstructors: [
@@ -105,8 +37,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
features: event.features
});
map.addLayer(new VectorLayer({
source: vectorSource,
style: styleFunction
source: vectorSource
}));
map.getView().fit(vectorSource.getExtent());
});