2017-06-08 19 views
0

私はアークサーバー上の適合マップを公開しました。私の地図は表示されません、私はarcgis JavaスクリプトのAPIの例に従っています。希望のエリアの適合マップを表示したい。地図ポップウィンドウ上のユーザーのクリックは、ここでは、分析結果を表示したときに私のコードはカスタムマップは表示されません

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> 
 
    <title>Create web map from id</title> 
 

 
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css"> 
 
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css"> 
 
    <link rel="stylesheet" href="css/layout.css"> 
 

 
    <script src="https://js.arcgis.com/3.20/"></script> 
 
    <script> 
 
     require([ 
 
     "dojo/parser", 
 
     "dojo/ready", 
 
     "dijit/layout/BorderContainer", 
 
     "dijit/layout/ContentPane", 
 
     "dojo/dom", 
 
     "esri/map", 
 
     "esri/urlUtils", 
 
     "esri/arcgis/utils", 
 
     "esri/dijit/Legend", 
 
     "esri/dijit/Scalebar", 
 
     "dojo/domReady!" 
 
     ], function(
 
     parser, 
 
     ready, 
 
     BorderContainer, 
 
     ContentPane, 
 
     dom, 
 
     Map, 
 
     urlUtils, 
 
     arcgisUtils, 
 
     Legend, 
 
     Scalebar 
 
    ) { 
 
     ready(function(){ 
 

 
     parser.parse(); 
 

 
//if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL 
 
     arcgisUtils.arcgisUrl = "http://localhost:6080/arcgis/rest/services/Soil_Maps/changa_manga_soil_map/MapServer/0"; 
 
     arcgisUtils.createMap("map").then(
 
     function(response){ 
 
      //update the app 
 
      dom.byId("title").innerHTML = response.itemInfo.item.title; 
 
      dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet; 
 

 
      var map = response.map; 
 

 

 

 
      //add the scalebar 
 
      var scalebar = new Scalebar({ 
 
      map: map, 
 
      scalebarUnit: "english" 
 
      }); 
 

 
      //add the legend. Note that we use the utility method getLegendLayers to get 
 
      //the layers to display in the legend from the createMap response. 
 
      var legendLayers = arcgisUtils.getLegendLayers(response); 
 
      var legendDijit = new Legend({ 
 
      map: map, 
 
      layerInfos: legendLayers 
 
      },"legend"); 
 
      legendDijit.startup(); 
 

 

 
     }); 
 

 

 
     }); 
 

 
     }); 
 
    </script>
</head> 
 

 
    <body class="claro"> 
 
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;"> 
 
     <div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"> 
 
     <div id="title"></div> 
 
     <div id="subtitle"></div> 
 
     </div> 
 
     <div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div> 
 
     <div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" > 
 
     <div id="legend"></div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

答えて

0

ですさて、あなたは明らかにこのサンプル適応:私は、これはあなたが望むものであるかどうかわからないのです https://developers.arcgis.com/javascript/3/jssamples/ags_createwebmapid.html をウェブマップを使うにはライセンスが必要だと思います。いずれにせよ、あなたの例ではいくつかの行を変更する必要があります。代わりに

<link rel="stylesheet" href="css/layout.css"> 

のあなたは、元のCSSファイルをロードするために

<link rel="stylesheet" href="https://developers.arcgis.com/javascript/3/samples/ags_createwebmapid/css/layout.css"> 

を持つ必要があります。独自のコピーを作成し、サーバーからロードする必要があります。

arcgisUtils.arcgisUrl = "http://localhost:6080/arcgis/rest/services/Soil_Maps/changa_manga_soil_map/MapServer/0"; 

する必要があります:もっと重要な は、この行を変更することです

arcgisUtils.arcgisUrl = "https://www.arcgis.com/sharing/rest/content/items/"; 

または、サンプルが示唆するように、ポータルのURLとパス。 そして、最後ではなく、少なくとも、次の行のようなものでなければなりません:私はあなたが以下の上に追加の質問およびコードを見ることができるよう、

arcgisUtils.createMap("ef9c7fbda731474d98647bebb4b33c20","map").then(
+0

それは私がドンは、オンラインのArcGISのライセンスを持っている場合はどうなりますか?地図や表示ポップアップを表示するための他の方法があるWebマップを使用することはできませんか? –

+1

誰もがWebマップを使用することができます。あなたはあなたのウェブマップを "みんなと共有"する必要があります...あなたのウェブマップを試用アカウントで作成して共有してください。あなたはこれを使うことができます,,, –

1

私は場合は、(達成したい、この事が私を修正しています間違った) -

  1. マップ
  2. を作成するには、マップ上で公開されたGIS層のクリックで
  3. ショーのポップアップを公表層(arcgis layer url)を追加します。

あなたの例では、ウェブマップIDを持っていないので、それを心配する必要はありません。以下

は、その中のコメントの通り更新サンプルコードノート・that-

require([ 
 
     "dojo/dom", 
 
     "dojo/dom-construct", 
 
     "esri/map", 
 
     "esri/dijit/InfoWindow", 
 
     "esri/layers/FeatureLayer", 
 
     "esri/InfoTemplate", 
 
     "dojo/string", 
 
     "dojo/domReady!" 
 
    ], function(
 
     dom, 
 
     domConstruct, 
 
     Map, 
 
     InfoWindow, 
 
     FeatureLayer, 
 
     InfoTemplate, 
 
     string 
 
    ) { 
 
    
 
     var infoWindow = new InfoWindow({}, domConstruct.create("div")); 
 
    infoWindow.startup(); 
 
     
 

 
     // **** update center according to your feature layer url 
 
     var map = new Map("mapDiv", { 
 
     center: [-122.41, 37.78], 
 
     zoom: 17, 
 
     basemap: "topo", 
 
     infoWindow: infoWindow 
 
     }); 
 

 
     
 
     var template = new InfoTemplate(); 
 
     //*** update the title field name according to your feature layer url 
 
     template.setTitle("<b>${qAddress}</b>"); 
 
     template.setContent("${*}"); 
 
     
 
     // ****** replace with your Feature layer url "http://localhost:6080/arcgis/rest/services/Soil_Maps/changa_manga_soil_map/MapServer/0" 
 
     
 
     var featureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Street_Trees/FeatureServer/0",{ 
 
     infoTemplate: template, 
 
     outFields: ["*"] 
 
     }); 
 
     map.addLayer(featureLayer); 
 

 
     map.infoWindow.resize(180, 175); 
 
    });
html, body { 
 
     height: 100%; 
 
     width: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     body { 
 
     background-color:#fff; 
 
     overflow:hidden;  
 
     } 
 
     #header{ 
 
     border:solid 2px #AAc4c4; 
 
     background:#fff; 
 
     color:#749749; 
 
     border-radius: 4px; 
 
     font-size:14px; 
 
     padding-left:20px; 
 
     font-weight:700; 
 
     } 
 
     #map{ 
 
     padding:1px; 
 
     border:solid 2px #AAc4c4; 
 
     border-radius: 4px; 
 
     }
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css"> 
 
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css"> 
 
     <script>var dojoConfig = { 
 
     parseOnLoad: true 
 
     }; 
 
    </script> 
 
    <script src="https://js.arcgis.com/3.20/"></script> 
 
    <body> 
 
    <div id="mapDiv"></div> 
 
    </body>

ための実施例です。

さらに詳しい情報が必要な場合は、私がそれに応じて回答を更新することをお知らせください。このことを期待して

がお手伝いします:)

関連する問題