我的ArcGIS API for Javascript 2

今天我给地图添加了绘制图形的ToolBar,看了好久的例子啊!

  一.首先我们需要设置各要素对象的样式(以最基本的Symbol为例):

var markerSymbol = new esri.symbol.SimpleMarkerSymbol();
markerSymbol.setColor(new esri.Color("#FF8F8F"));

var lineSymbol = new esri.symbol.SimpleLineSymbol();
lineSymbol.setColor(new esri.Color([255, 143, 143, 1]));
lineSymbol.setWidth(2);

var fillSymbol = new esri.symbol.PictureFillSymbol("img/fill.png",
new esri.symbol.SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color(‘#000‘), 1),42, 42);

  二.在地图加载后,初始化toolbar工具:

<div id="info">
  <div>Tool Bar</div>
  <button id="Point">Point</button>
  <button id="Multipoint">Multipoint</button>
  <button id="Line">Line</button>
  <button id="Polyline">Polyline</button>
  <button id="FreehandPolyline">Freehand Polyline</button>
  <button id="Triangle">Triangle</button>
  <button id="Extent">Rectangle</button>
  <button id="Circle">Circle</button>
  <button id="Ellipse">Ellipse</button>
  <button id="Polygon">Polygon</button>
  <button id="FreehandPolygon">Freehand Polygon</button>
</div>

  不知道为什么dojo提供的dojo.on注册事件的方法我无法使用,例子里是用on(dom.byId("info"), "click", function(evt) {}定义事件的。

var map,tb;
map.on("load", initToolbar);
...
function initToolbar() {
    tb = new esri.toolbars.Draw(map);
    tb.on("draw-end", addGraphic);

    document.getElementById("info").onclick = function (evt) {
    if (evt.target.id == "") {return;}
    var tool = evt.target.id.toLowerCase();
    map.disableMapNavigation();
    tb.activate(tool);
   }
}

  三.toolbar是根据它active方法中的参数决定绘制类型的,不仅包括point,line,mulitpoint,polyline,polygon等基本类型,

还有circle,trinangle,ellipse这样的特殊类型。

function addGraphic(evt) {
  tb.deactivate();
  map.enableMapNavigation();
  var symbol;
  if ( evt.geometry.type == "point" || evt.geometry.type == "multipoint")
  {
    symbol = markerSymbol;
  } else if ( evt.geometry.type == "line" || evt.geometry.type == "polyline")
  {
    symbol = lineSymbol;
  }
  else
  {
    symbol = fillSymbol;
  }
  map.graphics.add(new Graphic(evt.geometry, symbol));
}

效果:

实例链接:https://developers.arcgis.com/javascript/jssamples/graphics_add.html

我还发现了个错误,在回传按钮id时,点击 id = "info" 的<div>时,实例中仍然以 evt.target.id 作为判断依据是错误的,这时的返回值为"";

我的ArcGIS API for Javascript 2,布布扣,bubuko.com

时间: 2024-09-30 04:46:26

我的ArcGIS API for Javascript 2的相关文章

初学ArcGIS API for JavaScript

初学ArcGIS API for JavaScript 对于初学者来说,关于esri提供的一些样式和dojo自带的一些样式还是需要有一定的了解,这块在<WebGIS开发从基础到实践>讲解的特别详细,在这里以笔记的形式来帮助自己加以理解和记忆. esri.css样式主要用于ESRI提供的小部件与组件,比如地图.信息框等.此外,还可以引用Dojo提供的样式表,Dojo提供了4组样式,分别是claro\tundra\soria以及nihilo,每种是一组定义用户界面的字体.颜色与大小等设置.在Arc

arcgis api for javascript 3.16开发(一)

原来一直都在用Flex开发arcgis的地图接口,用的时间很长,用的习惯也顺手,可Flex这个开发工具已经基本要淘汰了,并且地图借助flash的方式加载在浏览器里已经不能适应webgis的快速开发需求,并且在多种客户端下支持度不是很好,所以转向了html5加arcgis api for javascript的开发,用了一段时间下来,感觉还挺好的,所以分享下经验.开发javasript的唯一不好的地方就是所有对象声明的时候都要看下开发文档,不像flex,AE开发都会有提示.我的开发环境是VS201

我的ArcGIS API for Javascript

为大家贴贴最基本的地图加载: 一. API 根据Dom树上节点的 ID 确定 Map 的显示位置; 二. setBasemap 方法可得到一些ArcGIS制作好的底图,例如: "streets" , "satellite" , "hybrid", "topo", "gray", "oceans", "national-geographic", "osm&qu

ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译

内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View,加载layers,使用弹出窗口,视觉化,与使用窗口小部件.(wtf居然没有分析你想搞事情啊web除了展示难道不应该有()&&*--@) [Mapping and Views] (点击进入我写的章节详细介绍) 最基础的,知道地图和视图的区别,能使用2D和3D地图,对地图的布局有一定的了解,对地图

ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. 什么是ArcGIS API for JS?这里就不多介绍了,最关键的一点是4.x版本与3.x版本的变化,按官方的意思是重新写了底层. 笔记中规定: ArcGIS API for JavaScript简称AJS 使用CDN(即不配置本地环境)进行测试开发 其余根据需要进行修改.增删. 要将地图显示在h

ArcGIS API for JavaScript

好几个月没用ArcGIS API for JavaScript,去官网看了一下,最新api已经是4.0了,也开始支持3D了,先运行看看吧. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-

创建ArcGIS API for JavaScript的第一个示例程序

原文:创建ArcGIS API for JavaScript的第一个示例程序 在上一篇博客中已经介绍了如何搭建ArcGIS API for JavaScript开发环境,如果您还没有搭建好开发环境的话,参考博客:http://blog.csdn.net/zdw_wym/article/details/48678913. 如果开发环境搭建好了的话,那么今天我们继续来搭建我们的第一个ArcGIS API for JavaScript应用程序. 下面首先将代码贴出来,复制到VS2012中新建的html

ArcGIS API for JavaScript开发环境搭建及第一个实例demo

原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3.9,它提供了更为丰富而又强大的功能.     一.安装前准备 1.ArcGIS Server for JavaScript API各版本下载地址:http://support.esrichina-bj.cn/2011/0223/960.html,我们选择下载最新的"ArcGIS API for Ja

ArcGIS API for JavaScript 学习笔记 (一) --第一个WebGIS应用程序

说明:本地部署后续我会尝试. 简单介绍: 开发环境是Visual Studio 2012,因为它为所有的.aspx文件..htm文件以及外部的.js文件提供了IntelliSense(智能提示),相当于其他软件的代码自动补全功能,非常方便.接下来是我的第一个Javascript API 应用程序.ESRI在其arcgis online中提供了在线的ArcGIS API for JavaScript,在web应用中直接引用即可,无需下载安装:当然也可以下载API,然后部署到自己的web服务器,在这