|
1.select the type from Geometry to add a feature. select 'None' to stop line edition or shape edition. 2.click 'Gnerate Shapefile' button. When it completed, download button for ecah type will show up. 3.click 'Save result' button to download shapefile. 1.從Geometry選擇你要畫的類別。 要停止畫請選擇'None'。 2.點擊 'Gnerate Shapefile' 。 當shapefile產生完成，下面會出現下載的按鍵. 3.點擊 'Save result' 下載 shapefile. |
var drawsource = new ol.source.Vector({wrapX: false});
var drawvector = new ol.layer.Vector({source: drawsource});
var typeSelect = document.getElementById('type');
var draw; // global so we can remove it later
function initMap(){
var source = new ol.source.OSM();
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}), drawvector
],
view: new ol.View({
center: ol.proj.fromLonLat([121.3662924,25.0174719]),
zoom: 12
}),
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
})
});
return map;
}
var map =initMap();
function addInteraction() {
var value = typeSelect.value;
if (value !== 'None') {
draw = new ol.interaction.Draw({
source: drawsource,
type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
});
map.addInteraction(draw);
}
}
/**
* Handle change event.
*/
typeSelect.onchange = function() {
map.removeInteraction(draw);
addInteraction();
};
function exportShapefiles() {
var shapewriter = new Shapefile();
var _source = drawvector.getSource();
var features = _source.getFeatures();
shapewriter.addOLGraphics(features);
/*
* When u call getShapefile file, you already get binary shape file.
*/
var pointfile = shapewriter.getShapefile("POINT");
var linefile = shapewriter.getShapefile("POLYLINE");
var polygonfile = shapewriter.getShapefile("POLYGON");
/*
* If it is successful, download button will show up.
*
*/
if (polygonfile.successful){
console.log("YES");
var saver = new BinaryHelper();
for (var actualfile in polygonfile['shapefile']){
if (polygonfile['shapefile'].hasOwnProperty(actualfile)){
saver.addData({
filename: "polygons_from_openlayers",
extension: actualfile,
datablob: polygonfile['shapefile'][actualfile]
});
}
}
var div = document.createElement("div");
div.id = "polygonButtonDiv";
div.innerHTML = "Polygons:";
document.getElementById("saveButtons").appendChild(div);
saver.createSaveControl("polygonButtonDiv",true);
}else{
console.log("NO");
}
if (linefile.successful){
var saver = new BinaryHelper();
for (var actualfile in linefile['shapefile']){
if (linefile['shapefile'].hasOwnProperty(actualfile)){
saver.addData({
filename: "lines_from_openlayers",
extension: actualfile,
datablob: linefile['shapefile'][actualfile]
});
}
}
var div = document.createElement("div");
div.id = "lineButtonDiv";
div.innerHTML = "Lines:";
document.getElementById("saveButtons").appendChild(div);
saver.createSaveControl("lineButtonDiv",true);
}
if (polygonfile.successful){
var saver = new BinaryHelper();
for (var actualfile in polygonfile['shapefile']){
if (polygonfile['shapefile'].hasOwnProperty(actualfile)){
saver.addData({
filename: "polygons_from_openlayers",
extension: actualfile,
datablob: polygonfile['shapefile'][actualfile]
});
}
}
var div = document.createElement("div");
div.id = "polygonButtonDiv";
div.innerHTML = "Polygons:";
document.getElementById("saveButtons").appendChild(div);
saver.createSaveControl("polygonButtonDiv",true);
}
if (pointfile.successful){
var saver = new BinaryHelper();
for (var actualfile in pointfile['shapefile']){
if (pointfile['shapefile'].hasOwnProperty(actualfile)){
saver.addData({
filename: "points_from_gmaps",
extension: actualfile,
datablob: pointfile['shapefile'][actualfile]
});
}
}
var div = document.createElement("div");
div.id = "pointButtonDiv";
div.innerHTML = "Points:";
document.getElementById("saveButtons").appendChild(div);
saver.createSaveControl("pointButtonDiv",true);
}
}
addInteraction();