<!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"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title></title> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } body{ background-color:white; overflow:hidden; font-family: "Kimberley", sans-serif } #header { -moz-border-radius: 5px; border-radius:5px; margin:5px; padding-top: 4px; padding-right: 15px; background-color:#211E21; color:#FFC98C; font-size:16pt; text-align:right;font-weight:bold; border: solid 2px #2A2F30; height:55px; } #subheader { font-size:small; color: #cfcfcf; text-align:right; padding-right:20px; } #map { margin:5px; border:solid 4px #2A2F30; padding:0px; } .shadow{ -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 8px 6px -6px #999; -moz-box-shadow: 0 8px 6px -6px #999; box-shadow: 0 8px 6px -6px #999; } </style> <script>var dojoConfig = { parseOnLoad: true };</script> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script> <script> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); dojo.require("dojo.number"); dojo.require("esri.layers.FeatureLayer"); dojo.require("esri.dijit.InfoWindow"); var map, trailLayer; var template; var soeParams; var soeURL = "http://sampleserver4.arcgisonline.com/ArcGIS/rest/services/Elevation/ESRI_Elevation_World/MapServer/exts/ElevationsSOE/ElevationLayers/1/GetElevationProfile"; function init() { //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic //for details on setting up a proxy page. esri.config.defaults.io.proxyUrl = "../proxy/proxy.php"; map = new esri.Map("map", { basemap: "satellite", center: [-117.069, 36.215], zoom: 13 }); var infoWindow = new esri.esri.dijit.InfoWindow({}, dojo.create("div", null, map.root)); map.infoWindow.resize(625, 240); infoWindow.startup(); map.setInfoWindow(infoWindow); //setup SOE parameters soeParams = {}; soeParams.ImageWidth = 600; soeParams.ImageHeight= 200; soeParams.BackgroundColorHex="#ffffff"; soeParams.DisplaySegments=false; soeParams.f="json"; //add the trails feature layer to the map template = new esri.InfoTemplate(); template.setTitle("<b>${notes}</b>"); template.setContent(getTextContent); trailLayer = new esri.layers.FeatureLayer("http://sampleserver5.arcgisonline.com/ArcGIS/rest/services/LocalGovernment/Recreation/MapServer/1", { mode: esri.layers.FeatureLayer.MODE_ONDEMAND, infoTemplate:template, outFields: ["*"] }); //create a new renderer for the feature layer var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([0,255,0,.70]), 5); trailLayer.setRenderer(new esri.renderer.SimpleRenderer(lineSymbol)); map.addLayer(trailLayer); //add world place names to the map var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer"); map.addLayer(referenceLayer); } //Generate the content for the info window when the feature is clicked. function getTextContent(graphic) { var geometry = esri.geometry.webMercatorToGeographic(graphic.geometry); var deferred = new dojo.Deferred(); //generate elevation profile soeParams.InputPolyline = dojo.toJson(geometry.toJson()); esri.request({ url: soeURL, content: soeParams, callbackParamName: "callback", load: function(fset) { deferred.callback("<img src='" + fset.profileImageUrl + "'/>"); }, error: function(error) { deferred.errback("Error occurred while generating profile"); } }); return deferred; } dojo.ready(init); </script> </head> <body class="claro"> <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;"> <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'"> Click a trail to view the elevation profile </div> <div id="map" data-dojo-type="dijit.layout.ContentPane" class="shadow" data-dojo-props="region:'top'"></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.
