2017-05-26 1 views
0

ArcGISのDrawing toolを発見しました。ArcGISの描画ツールを使用

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width,user-scalable=no"> 

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> 
    <title>Maps Toolbar</title> 

    <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/nihilo/nihilo.css"> 
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css"> 
    <style> 
     html, body, #mainWindow { 
     font-family: sans-serif; 
     height: 100%; 
     width: 100%; 
     } 
     html, body { 
     margin: 0; 
     padding: 0; 
     } 
     #header { 
     height: 80px; 
     overflow: auto; 
     padding: 0.5em; 
     } 
    </style> 

    <script src="https://js.arcgis.com/3.20/"></script> 
    <script> 
     var map, toolbar, symbol, geomTask; 

     require([ 
     "esri/map", 
     "esri/toolbars/draw", 
     "esri/graphic", 

     "esri/symbols/SimpleMarkerSymbol", 
     "esri/symbols/SimpleLineSymbol", 
     "esri/symbols/SimpleFillSymbol", 

     "dojo/parser", "dijit/registry", 

     "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
     "dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!" 
     ], function(
     Map, Draw, Graphic, 
     SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, 
     parser, registry 
    ) { 
     parser.parse(); 

     map = new Map("map", { 
      basemap: "streets", 
      center: [-15.469, 36.428], 
      zoom: 3 
     }); 

     map.on("load", createToolbar); 

     // loop through all dijits, connect onClick event 
     // listeners for buttons to activate drawing tools 
     registry.forEach(function(d) { 
      // d is a reference to a dijit 
      // could be a layout container or a button 
      if (d.declaredClass === "dijit.form.Button") { 
      d.on("click", activateTool); 
      } 
     }); 

     function activateTool() { 
      var tool = this.label.toUpperCase().replace(/ /g, "_"); 
      toolbar.activate(Draw[tool]); 
      map.hideZoomSlider(); 
     } 

     function createToolbar(themap) { 
      toolbar = new Draw(map); 
      toolbar.on("draw-end", addToMap); 
     } 

     function addToMap(evt) { 
      var symbol; 
      toolbar.deactivate(); 
      map.showZoomSlider(); 
      switch (evt.geometry.type) { 
      case "point": 
      case "multipoint": 
       symbol = new SimpleMarkerSymbol(); 
       break; 
      case "polyline": 
       symbol = new SimpleLineSymbol(); 
       break; 
      default: 
       symbol = new SimpleFillSymbol(); 
       break; 
      } 
      var graphic = new Graphic(evt.geometry, symbol); 
      map.graphics.add(graphic); 
     } 
     }); 
    </script> 
    </head> 
    <body class="nihilo"> 

    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"> 
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"> 
     <span>Draw:<br /></span> 
     <button data-dojo-type="dijit/form/Button">Point</button> 
     <button data-dojo-type="dijit/form/Button">Multi Point</button> 
     <button data-dojo-type="dijit/form/Button">Line</button> 
     <button data-dojo-type="dijit/form/Button">Polyline</button> 
     <button data-dojo-type="dijit/form/Button">Polygon</button> 
     <button data-dojo-type="dijit/form/Button">Freehand Polyline</button> 
     <button data-dojo-type="dijit/form/Button">Freehand Polygon</button> 

     <button data-dojo-type="dijit/form/Button">Arrow</button> 
     <button data-dojo-type="dijit/form/Button">Triangle</button> 
     <button data-dojo-type="dijit/form/Button">Circle</button> 
     <button data-dojo-type="dijit/form/Button">Ellipse</button> 
    </div> 
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div> 
    </div> 

    </body> 
</html> 

私はので、私の質問は簡単かもしれないが、ArcGISの非常に新しいです:次のようにウィジェットのコードが見えます。背景の地図を、建物の床を表すレイヤーなどの別の画像で置き換えることは可能でしょうか?私はJPEG形式で利用可能なこの画像を持っており、グローバル座標が割り当てられています。だから、私はこの画像で地図をどのように置き換えることができますか?これらのコード行を更新する必要がありますか?

map = new Map("map", { 
     basemap: "streets", 
     center: [-15.469, 36.428], 
     zoom: 3 
    }); 

答えて

1
これらの背景画像は、GIS用語ではベースマップとして知られています。 ARCGIS js apiは、トポ、ストリート、イメージなどの複数のベースマップを提供します。

背景/ベースマップを変更するには、ベースマップキーワードを変更する必要があります。

例 -

変更 "街" "トポ" へ。ベースマップ/バックグラウンドが変更されます。

注 - arcgis apiで利用可能なさまざまな種類のベースマップを試すことができます。

EDITED [30 /月/ 2017] -

ここで私はあなたがその背景/ベースマップとして独自のイメージを表示したいただしならば、あなたは公開する必要があり、ESRIが提供する既存のベースマップを使用するためにあなたを提案しています/ベースマップを再発行する。

これを参考にしてください。

+1

異なる画像(例えば、建物の床)に対して予め作成されたベースマップをEsriから置き換えると、タイル画像サービスを公開する必要があります。 – Erica

+0

言葉では行かない...質問を理解しよう。しかし、私はまた、ベースマップ/タイル型サービスのパブリッシュ/アップデートのプロセスを認識しています。 downvotingする前に私はあなたが答えで追加したメモを読む必要があると思う。その人が新しい画像データを使って新しいベースマップを公開するにはどうすればいいかと本当に考えていますか?この質問には客観的にしか言及されていませんでした。 (y):) –

+0

btw指摘していただきありがとうございます。私もこの1つを回答に追加しています... –

関連する問題