Arcgis jsapi GraphicLayer Graphic 图元绘图相关内容汇总

 

ArcGIS JavaScript API 添加点

function ShowStationOnMap(stations) {
     // 清除图中的元素    
map.graphics.clear();
      // 设置显示中心点及坐标
var location = new esri.geometry.Point(stations[0].longtitude, stations[0].latitude, map.spatialReference)    
map.centerAndZoom(location, 8);
      // 逐个添加元素
      for (var s = 0; s < stations.length; s++) {        
     var symbol = new esri.symbol.PictureMarkerSymbol(stations[s].imageUrl, 18, 18);        
     var pt = new esri.geometry.Point(stations[s].longtitude, stations[s].latitude, map.spatialReference)
           // 每个元素的属性值     
     var attr = { "stationName": stations[s].stationName, "sId": stations[s].sId, "countryName": stations[s].countryName, "projectName": stations[s].projectName, 　            　　       "buildYear": stations[s].buildYear };   
           // 点击该元素时的信息窗  
     var infoTemplate = new esri.InfoTemplate("${stationName}", "站点编号: ${sId}<br/>所属项目: ${projectName}  <br/>所属区县: ${countryName}
                          <br/>建成年份:${buildYear}<div><a href='javascript:ShowDetailStationPanel(" + stations[s].sId + ")'>查看详情</a> </div>");        
           var graphic = new esri.Graphic(pt, symbol, attr, infoTemplate);        
           map.graphics.add(graphic);    
     }
}
当在外部点击一个点时在地图上显示该数据的信息窗 这里用的是 map.infoWindow 和 infoTemplate 有点区别
 var pt = new esri.geometry.Point(data.record.longtitude, data.record.latitude, map.spatialReference)        
 var attr = { "stationName": data.record.stationName, "sId": data.record.sId, "countryName": data.record.countryName, "projectName": data.record.projectName,
                   "buildYear": data.record.buildYear };
 var infoTemplate = new esri.InfoTemplate("${stationName}", "站点编号: ${sId}<br/>所属项目: ${projectName}  <br/>所属区县: ${projectName} <br/>建成年份:
                   ${buildYear}<div><a href='javascript:ShowDetailStationPanel(" + data.record.sId + ")'>查看详情</a> </div>");        
 var symbol = new esri.symbol.PictureMarkerSymbol(data.record.imageUrl, 18, 18);        
 var graphic = new esri.Graphic(pt, symbol, attr, infoTemplate);        
 map.infoWindow.setContent(graphic.getContent()); 
 map.infoWindow.setTitle(data.record.stationName);        
 map.infoWindow.show(pt, map.getInfoWindowAnchor(pt));
 

 

 

 

arcgis jsapi移动图元顺序

graphic.getShape().moveToFront();
graphic.getDojoShape().moveToBack();
ArcGIS API for JavaScript 绘制点线面（三十）
  (2011-09-22 13:54:41)
0
转载▼
标签： 
javascript
分类： JsAPI
   此示例演示如何您可以使用一个在地图上绘制多种几何图形的绘制工具栏。此工具栏包含与ArcGIS的JavaScript API。
   没有工具栏，你会自动在页面上看到一个用户界面组件。相反，它是一个辅助类，可以使用，让人们在地图上素描几何形状。这样可以节省你的素描每一种几何类型的代码编写的努力。您只需启动你想让人们勾勒的几何类型。在这个例子中，每个按键激活不同的绘制类型：
   当你点击这个按钮，工具栏激活点的几何形状。或者你也可以让人们选择从下拉列表中，一组单选按钮的设置，或其他一些控制的几何类型。
   工具栏上的“onDrawEnd”事件，确保您看到在地图上绘制一个功能，当您完成的东西：
     dojo.connect(tb, "onDrawEnd", addGraphic);
  addGraphic功能设置适当的符号，几何类型。在这个例子中，符号是从下拉列表中。列表中的每个项目是在同一行中定义的符号，是这样的：
Square
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>Maps Toolbar</title>
    <link rel="stylesheet" type="text/css" 
    href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/
    tundra/tundra.css">
    <script type="text/javascript">djConfig = { parseOnLoad:true }</script>
    <script type="text/javascript"
    src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.toolbars.draw");

      var map, toolbar, symbol, geomTask;

      function init() {
        map = new esri.Map("map");
        dojo.connect(map, "onLoad", createToolbar);
        var imageryPrime = new esri.layers.ArcGISTiledMapServiceLayer
               ("http://server.arcgisonline.com/ArcGIS/rest/services/
               ESRI_StreetMap_World_2D/MapServer");
        map.addLayer(imageryPrime);
      }

      function createToolbar(map) {
        toolbar = new esri.toolbars.Draw(map);
        dojo.connect(toolbar, "onDrawEnd", addToMap);
      }

      function addToMap(geometry) {
       switch (geometry.type) {
          case "point":
            var symbol = new esri.symbol.SimpleMarkerSymbol
      (esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10,
      new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
      new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]));
            break;
          case "polyline":
            var symbol = new esri.symbol.SimpleLineSymbol
                         (esri.symbol.SimpleLineSymbol.STYLE_DASH,
                          new dojo.Color([255,0,0]), 1);
            break;
          case "polygon":
            var symbol = new esri.symbol.SimpleFillSymbol
    (esri.symbol.SimpleFillSymbol.STYLE_NONE,
    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,
    new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));
            break;
          case "extent":
            var symbol = new esri.symbol.SimpleFillSymbol
    (esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol
    (esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2),
     new dojo.Color([255,255,0,0.25]));
            break;
          case "multipoint":
            var symbol = new esri.symbol.SimpleMarkerSymbol
    (esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 20,
    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
    new dojo.Color([0,0,0]), 1), new dojo.Color([255,255,0,0.5]));
            break;
        }
        var graphic = new esri.Graphic(geometry, symbol);
        map.graphics.add(graphic);
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="tundra">
    Draw :
    <button dojoType="dijit.form.Button" onClick="toolbar.activate
(esri.toolbars.Draw.POINT);map.hideZoomSlider();">Point</button>
    <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.MULTI_POINT);map.hideZoomSlider();">Multipoint</button>
    <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.LINE);map.hideZoomSlider();">Line</button>
    <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.POLYLINE);map.hideZoomSlider();">Polyline</button>
    <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.POLYGON);map.hideZoomSlider();">Polygon</button>
    <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);map.hideZoomSlider();">Freehand Polyline</button>
    <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.FREEHAND_POLYGON);map.hideZoomSlider();">Freehand Polygon</button>
    <button dojoType="dijit.form.Button" onClick="toolbar.deactivate();map.showZoomSlider();">Deactivate</button>
    <div id="map" style="width:900px; height:600px; border:1px solid #000;"></div>
  </body>
</html>

 

posted @ 2022-08-03 10:06  devgis  阅读(308)  评论(0)  编辑  收藏  举报