<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Add Shapefile</title> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css"> <script>var dojoConfig = { parseOnLoad: true };</script> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script> <script> dojo.require("esri.map"); dojo.require("esri.layers.FeatureLayer"); dojo.require("esri.dijit.Popup"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.ready(init); var map; var portalUrl = "http://www.arcgis.com"; function init() { esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx"; esri.config.defaults.io.alwaysUseProxy = false; dojo.connect(dojo.byId("uploadForm").data, "onchange", function (evt) { var fileName = evt.target.value; //filename is full path in IE so extract the file name var arr = fileName.split("\\"); fileName = arr[arr.length - 1]; if (fileName.indexOf(".zip") !== -1) {//is file a zip - if not notify user generateFeatureCollection(fileName); }else{ dojo.byId('upload-status').innerHTML = '<p style="color:red">Add shapefile as .zip file</p>'; } }); //create a popup to replace the map's info window // var popup = new esri.dijit.Popup(null, dojo.create("div")); var extent = new esri.geometry.Extent({"xmin": -82.982664376928,"ymin":36.9701097164086,"xmax":-77.3635190912301, "ymax":40.8546687287403,"spatialReference":{"wkid":4326}}); //map = new esri.Map("mapDiv", { extent: esri.geometry.geographicToWebMercator(extent)}); map = new esri.Map("mapDiv", { basemap: "streets", extent:extent }); } function generateFeatureCollection(fileName) { var name = fileName; //Chrome and IE add c:\fakepath to the value - we need to remove it //See this link for more info: http://davidwalsh.name/fakepath //name = name[0].replace("C:\\fakepath\\",""); dojo.byId('upload-status').innerHTML = '<b>Loading </b>' + name; //Define the input params for generate see the rest doc for details //http://www.arcgis.com/apidocs/rest/index.html?generate.html var params = { 'name': name, 'targetSR': map.spatialReference, 'maxRecordCount': 1000, 'enforceInputFileSizeLimit': true, 'enforceOutputJsonSizeLimit': true }; //generalize features for display Here we generalize at 1:40,000 which is approx 10 meters //This should work well when using web mercator. var mapextent = esri.geometry.getExtentForScale(map,40000); var resolution = mapextent.getWidth() / map.width; params.generalize = true; params.maxAllowableOffset = resolution; params.reducePrecision = true; params.numberOfDigitsAfterDecimal = 0; var myContent = { 'filetype': 'shapefile', 'publishParameters': dojo.toJson(params), 'f': 'json', 'callback.html': 'textarea' }; console.log(myContent); //use the rest generate operation to generate a feature collection from the zipped shapefile esri.request({ url: portalUrl + '/sharing/rest/content/features/generate', content: myContent, form: dojo.byId('uploadForm'), handleAs: 'json', load: dojo.hitch(this, function (response) { if (response.error) { errorHandler(response.error); return; } dojo.byId('upload-status').innerHTML = '<b>Loaded: </b>' + response.featureCollection.layers[0].layerDefinition.name; addShapefileToMap(response.featureCollection); }), error: dojo.hitch(this, errorHandler) }); } function errorHandler(error) { dojo.byId('upload-status').innerHTML = "<p style='color:red'>" + error.message + "</p>"; } function addShapefileToMap(featureCollection) { //add the shapefile to the map and zoom to the feature collection extent //If you want to persist the feature collection when you reload browser you could store the collection in //local storage by serializing the layer using featureLayer.toJson() see the 'Feature Collection in Local Storage' sample //for an example of how to work with local storage. var fullExtent; var layers = []; dojo.forEach(featureCollection.layers, function (layer) { var infoTemplate = new esri.InfoTemplate("Details", "${*}"); var layer = new esri.layers.FeatureLayer(layer, { infoTemplate: infoTemplate }); //associate the feature with the popup on click to enable highlight and zoomto dojo.connect(layer,'onClick',function(evt){ map.infoWindow.setFeatures([evt.graphic]); }); //change default symbol if desired. Comment this out and the layer will draw with the default symbology changeRenderer(layer); fullExtent = fullExtent ? fullExtent.union(layer.fullExtent) : layer.fullExtent; layers.push(layer); }); map.addLayers(layers); map.setExtent(fullExtent.expand(1.25), true); dojo.byId('upload-status').innerHTML = ""; } function changeRenderer(layer) { //change the default symbol for the feature collection for polygons and points var symbol = null; switch (layer.geometryType) { case 'esriGeometryPoint': symbol = new esri.symbol.PictureMarkerSymbol({ 'angle':0, 'xoffset':0, 'yoffset':0, 'type':'esriPMS', 'url':'http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png', 'contentType':'image/png', 'width':20, 'height':20 }); break; case 'esriGeometryPolygon': symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([112, 112, 112]), 1), new dojo.Color([136, 136, 136, 0.25])); break; } if (symbol) { layer.setRenderer(new esri.renderer.SimpleRenderer(symbol)); } } </script> </head> <body class="claro"> <div id="mainWindow" dojotype="dijit.layout.BorderContainer" style="width:100%; height:100%;"> <div dojotype="dijit.layout.ContentPane" id="rightPane"> <div style='padding-left:4px;'> <p> Add a zipped shapefile to the map.</p><p>Visit the <a target='_blank' href="http://help.arcgis.com/en/arcgisonline/help/#/About_shapefiles/010q000000m2000000"/>About Shapefiles</a> help topic for information and limitations.</p> <form enctype="multipart/form-data" method="post" id="uploadForm"> <div class="field"> <label class="file-upload"> <span><strong>Add File</strong></span> <input type="file" name="file" id="inFile" /> </label> </div> </form> <span class="file-upload-status" style="opacity:1;" id="upload-status"></span> <div id="fileInfo"> </div> </div> </div> <div id="mapDiv" style="height:500px; width:500px; border:1px solid black"></div> </div> </body> </html>
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
