arcgis总结——绘制区域和路径

小灰灰 2022-09-25 12:21 515阅读 0赞

通过arcgis的jsapi实现区域和路径的绘制。

原理是这样的，map对象里面有一个graphics的集合，我们只要把创建的graphic类放到这个集合就可以了。在arcgis中，graphic的构造依赖于symbol，arcgis提供了非常丰富的symbol，我们可以选择自己需要的。

所需要加载的包如下：

dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");
    dojo.require("esri.map");
    dojo.require("esri.toolbars.draw");
    dojo.require("esri.symbols.SimpleLineSymbol");
    dojo.require("esri.graphic");

这里用到工具栏进行交互：

dojo.connect(map,'onLoad',function(theMap){
        ...
        initToolbar(map);
        ...
    });

dojo.connect(dojo.byId("info"),"onclick",function(evt){
        if(evt.target.id.toLowerCase()=="info"){        
          return;
        }
        if(evt.target.id.toLowerCase()=="clear"){
          map.graphics.clear(); 
          return;
        }
        map.disableMapNavigation();
        toolbar.activate(evt.target.id.toLowerCase());
    });

initToolbar的代码如下：

如果要保存，也很容易，通过回调的evt对象，可以取得路线或者区域的端点坐标、不同类型的evt，存储坐标的属性不一样，可以通过debug去获得，这里就不说了。

如果要加载保存的路线和区域，我们只需要调用合适的graphic类的构造器，然后再把它放到map的graphics集合就可以了

加载路线的例子如下：

showLine([
    [116.3894.516041973,39.92069932378777],
    ...
    [116.399.64640487678],[39.92082452309436]
    ]);
    
    function showLine(path){
       var polyLine=new esri.geometry.Polyline([path]);
       var simpleLineSymbol=new esri.symbol.SimpleLineSymbol();
       var graphic=new esri.Graphic(polyLine,simpleLineSymbol);
       map.graphics.add(graphic);
    }

加载区域的例子如下：

showPolygon([
    [116.39719607559066,39.920323725868],
     ...
    <pre name="code" class="javascript">[116.39719607559066,39.920323725868]
    ]);

function showPolygon(ring){
       var polygon=new esri.geometry.Polygon([ring]);
       var polygonSymbol=new esri.symbol.SimpleFillSymbol(
           esri.symbol.SimpleFillSymbol.Style_SOLID;
           new esri.symbol.SimpleLineSymbol([ring]);
           new esri.Color([255,123,123,0,35]);
       );
       var graphic=new esri.Graphic(polygon,ploygonSymbol);
       map.graphics.add(graphic);
    }