2017-05-26 132 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上可用的各種類型的底圖。

編輯了[30 /月/ 2017年 -

在這裏,我建議你使用由ESRI提供的現有底圖,但是,如果你想顯示自己的圖像爲研究背景/底圖,那麼你需要發佈/重新發布底圖。

希望這會對你有幫助。

+1

將來自Esri的預先製作的底圖替換爲不同的圖像(例如建築物的地板)將需要發佈平鋪的圖像服務。 – Erica

+0

不要一字不差......試着理解這個問題。不過,我也知道發佈/更新底圖/平鋪服務的過程。在投票之前,我想你只需要閱讀我在答案中添加的註釋。你真的認爲這個人在問我如何使用新的圖像數據發佈一個新的底圖。只有客觀的提到在這個問題上,我該如何改變背景。這就是爲什麼我明確提到,我要求你嘗試現有的弧形底圖..(Y):) –

+0

順便說一句,謝謝你指出我也添加這個答案... –