關於ArcGIS api for JavaScript的一些內容

時間  2019-12-18
標籤 關於 arcgis api javascript 一些 內容 欄目 JavaScript 简体版
原文   原文鏈接

2018-3-19java

 

ArcGIS api for JavaScript 在3.4以後就已經拋棄了過期的寫法，採用了AMD的寫法，AMD規範即異步模塊加載機制，這種規範讓JS就像其它面嚮對象語言（好比Java）同樣，經過模塊去管理代碼。dojo的模塊有點像java的包，而咱們所須要的類就是在不一樣的模塊中。git

我如今有點糾結了，公司GIS模塊的代碼使用的是過期的寫法，同時還本身寫了不少類，看起來很是複雜，而公司部署的api版本是3.2的，注意不是3.2x版本哈，這個版本是很老的了；如今官網的Demo全是用的AMD規範寫的，我真還不曉得該怎麼辦了。api

可是無非就是兩種：1將公司的代碼使用AMD規範重寫一遍（工做量很是之大，還容易出錯）；dom

2在官方學到的內容，在本身本上用AMD規範寫，以後轉換成過期寫法，若是公司有須要將轉換事後的內容添加上去（表面上要簡單些，實際上不清楚，重點是對於公司的代碼該怎麼加上去是個問題）；異步

今天就第二種先在本地實際操做了一下發現的坑：ide

先附上代碼ui

 1 　　　　//AMD規範寫法
 2 　　　 var map;
 3       require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/FeatureLayer",
 4       "esri/symbols/SimpleFillSymbol","esri/symbols/SimpleLineSymbol","esri/renderers/SimpleRenderer","esri/InfoTemplate","esri/graphic","dojo/on","dojo/_base/Color", "dojo/domReady!"], function(Map,ArcGISDynamicMapServiceLayer,FeatureLayer,SimpleFillSymbol,SimpleLineSymbol,SimpleRenderer,InfoTemplate,Graphic,on,Color) {
 5         map = new Map("map", {
 6           //basemap: "streets",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
 7           //center: [-96.45, 39.75], // longitude, latitude
 8           zoom: 4,
 9           sliderStyle:"small",
10           logo:false
11         });
12         
13         var dynamicMapLayer1 = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/V1/CityFeature/MapServer");
14         
15         map.addLayer(dynamicMapLayer1);
16         
17         //map加載事件，鼠標移除清空繪製的圖形（高亮）和信息框
18         map.on("load",function(){
19           map.graphics.on("mouse-out",function(evt){
20             map.graphics.clear();
21             map.infoWindow.hide();
22           });
23         });
24         
25         //建立一個特徵圖層並選出符合條件的要素
26         var olderStates = new FeatureLayer("http://localhost:6080/arcgis/rest/services/V1/CityFeature/MapServer/6",{
27           mode:FeatureLayer.Mode_SNAPSHOT,
28           outFields:["OBJECTID","name","floors","BianHao"]
29         });
30         //olderStates.setDefinitionExpression("floors<=20");
31         //建立一個符號，用來渲染符合條件的要素
32         var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,255,255,0.35]),1),new Color([125,125,125,0.35]));
33         olderStates.setRenderer(new SimpleRenderer(symbol));
34         //將特徵圖層加載到地圖中
35         map.addLayer(olderStates);
36         
37         //建立一個信息框
38         var infoTemplate = new InfoTemplate();
39         infoTemplate.setTitle("${OBJECTID}");
40         infoTemplate.setContent("<b>名稱:</b>${name}<br/>"+"<b>樓層數:</b>${floors}<br/>"+"<b>編號:</b>${BianHao}");
41         //設置信息框的大小
42         map.infoWindow.resize(245,125);
43         
44         //建立一個高亮符號
45         var highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
46         new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), new Color([125,125,125,0.35])));
47         
48         //鼠標通過事件，將目標圖形（evt對象中）高亮渲染並顯示信息框信息
49         olderStates.on("mouse-over",function(evt){
50           map.graphics.clear();
51           evt.graphic.setInfoTemplate(infoTemplate);
52           var content = evt.graphic.getContent();
53           map.infoWindow.setContent(content);
54           var title =  evt.graphic.getTitle();
55           map.infoWindow.setTitle(title);
56           var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol);
57           map.graphics.add(highlightGraphic);
58           map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoit)); //evt的中心點
59             
60         });
61         
62       });

而後是spa

           //過期的寫法
      dojo.require("esri/map");
      dojo.require("esri/layers/ArcGISDynamicMapServiceLayer");
      dojo.require("esri/layers/FeatureLayer");
      dojo.require("esri/symbols/SimpleFillSymbol");
      dojo.require("esri/symbols/SimpleLineSymbol");
      dojo.require("esri/renderers/SimpleRenderer");
      dojo.require("esri/InfoTemplate");
      dojo.require("esri/graphic");
      dojo.require("dojo/on");
      dojo.require("dojo/_base/Color");
      dojo.require("dojo/domReady!");
      
      var map;
      
      function init(){
        map = new esri.Map("map",{
        zoom:4,
        logo:false
        });
        
        var dynamicMapLayer1 = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/V1/CityFeature/MapServer");
        
        map.addLayer(dynamicMapLayer1);
        
        //map加載事件，鼠標移除清空繪製的圖形（高亮）和信息框
        map.on("load",function(){
          map.graphics.on("mouse-out",function(evt){
            map.graphics.clear();
            map.infoWindow.hide();
          });
        });
        
        //建立一個特徵圖層並選出符合條件的要素
        var olderStates = new esri.layers.FeatureLayer("http://localhost:6080/arcgis/rest/services/V1/CityFeature/MapServer/6",{
          mode:esri.layers.FeatureLayer.Mode_SNAPSHOT,
          outFields:["OBJECTID","name","floors","BianHao"]
        });
        
        //建立一個符號，用來渲染符合條件的要素
        var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
        new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
        new dojo.Color([255,255,255,0.35]),1),new dojo.Color([125,125,125,0.35]));
        olderStates.setRenderer(new esri.renderer.SimpleRenderer(symbol));
        //將特徵圖層加載到地圖中
        map.addLayer(olderStates);
        
        //建立一個信息框
        var infoTemplate = new esri.InfoTemplate();
        infoTemplate.setTitle("${OBJECTID}");
        infoTemplate.setContent("<b>名稱:</b>${name}<br/>"+"<b>樓層數:</b>${floors}<br/>"+"<b>編號:</b>${BianHao}");
        //設置信息框的大小
        map.infoWindow.resize(245,125);
        
        //建立一個高亮符號
        var highlightSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
        new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), new dojo.Color([125,125,125,0.35])));
        
        //鼠標通過事件，將目標圖形（evt對象中）高亮渲染並顯示信息框信息
        olderStates.on("mouse-over",function(evt){
          map.graphics.clear();
          evt.graphic.setInfoTemplate(infoTemplate);
          var content = evt.graphic.getContent();
          map.infoWindow.setContent(content);
          var title =  evt.graphic.getTitle();
          map.infoWindow.setTitle(title);
          var highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightSymbol);
          map.graphics.add(highlightGraphic);
          map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoit)); //evt的中心點
            
        });
        
      }
      dojo.addOnLoad(init);

我將不一樣的地方用紅色標出來了，能夠發現，過期的寫法大致上和AMD規範沒得什麼區別，須要注意的是require的引用，還有以後調用esri資源中的對象時要加上些東西；rest

坑在有些和引用的不太同樣，好比說FeatureLayer 和SimpleFillSymbol 的調用就是有區別，一個是esri.layers.  一個是esri.symbol. 還有color : dojo.Color 沒有資源上的_base；code

這些之後還有，得注意一下。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程