ArcGISjsapi4+版本drawmeasurelegend扩展资源-CSDN文库

共4个文件

js：4个

5星 · 超过95%的资源需积分: 34 15 浏览量 2017-02-21 17:11:27 上传评论 1 收藏 8KB RAR 举报

在ArcGIS JavaScript API 4+版本中，开发者可以利用丰富的功能来创建交互式的地图应用，包括绘图、测量和图例扩展。这些功能极大地增强了用户对地图数据的探索和理解能力。下面将详细阐述这三个核心知识点。一、绘图（Draw）绘图工具允许用户在地图上动态绘制各种几何形状，如点、线、多边形等。在ArcGIS JS API 4.x中，`esri/views/MapView`和`esri/views/SceneView`提供了`draw`模块，通过`Draw`类来实现这一功能。开发者可以设置不同的绘图模式，如`simple-marker`（简单标记）、`simple-line`（简单线条）和`simple-polygon`（简单多边形）。同时，`Draw`对象还提供了事件监听，例如`on('draw-complete')`，用于捕获用户完成绘制后的几何图形，并进行进一步的操作，如保存到服务端或者进行地理分析。二、测量（Measure）测量工具是地图应用中非常实用的功能，允许用户在地图上进行距离、面积或角度的测量。在ArcGIS JS API 4.x中，`esri/widgets/Measure`提供了这一功能。通过创建`Measure`实例，用户可以选择测量类型（长度、面积或角度），并在地图上选择测量点。测量结果会实时显示在界面上，同时提供单位切换。此外，`Measure`还支持自定义样式和事件处理，如`on('measure-end')`，以便在测量完成后执行特定操作。三、图例（Legend）图例是地图的重要组成部分，它解释了地图上颜色、符号和图案的含义。在ArcGIS JS API 4.x中，`esri/widgets/Legend`类负责创建图例组件。开发者可以通过传入`MapView`或`SceneView`对象，自动获取与视图中图层相关的图例信息。此外，`Legend`还支持自定义显示方式，如折叠或展开图例，以及控制图例项的顺序。通过`Legend`的属性和方法，如`items`和`toggle`，可以实现对图例内容的动态更新。在实际开发中，我们通常会结合这三个功能来创建一个功能完备的地图应用。例如，用户可以使用绘图工具添加自定义地理特征，然后用测量工具进行空间分析，最后通过图例清晰地理解地图上的各种信息。为了实现这些功能，我们需要引入相应的模块，创建并配置相关对象，以及监听和响应用户的交互事件。在压缩包中的`custom`文件可能是实现这些功能的示例代码或者自定义扩展。分析这个文件可以帮助我们更深入地理解和应用ArcGIS JS API 4+版本的绘图、测量和图例功能，从而创建出满足需求的个性化地图应用。开发者应该根据实际项目需求，灵活运用API提供的方法和属性，结合自身的业务逻辑，打造出高效且用户体验良好的地图应用。

资源推荐

资源详情

资源评论

收起资源包目录

custom.rar （4个子文件）

custom

RemoteLegend.js 5KB

Measure.js 12KB

Custom.js 1KB

Draw.js 15KB

define([ "./Custom", "../layers/GraphicsLayer", "../geometry/Point", "../geometry/Polyline", "../geometry/Polygon", "../geometry/Extent", "../geometry/Circle", "../Graphic", "../symbols/SimpleMarkerSymbol", "../symbols/SimpleLineSymbol", "../symbols/SimpleFillSymbol", "dojo/dom"], function (Custom, GraphicsLayer, Point, Polyline, Polygon, Extent, Circle, Graphic, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, dom) { var types = { POLYGON: 'polygon', POLYLINE: 'polyline', POINT: 'point', CIRCLE: 'circle', FREE_POLYGON: 'free_polygon', FREE_POLYLINE: 'free_polyline', FREE_EXTENT: 'free_extent' }; var Draw = Custom.createSubclass({ declaredClass: "esri.custom._Draw", normalizeCtorArgs: function (view, options) { options || (options = {}); this._mapView = view; this._clickPoints = []; // 点击绘制时的点集合 this._tempGraphicLayer = new GraphicsLayer(); // 绘制过程中的要素图层 this._drawGraphicLayer = new GraphicsLayer(); // 绘制完成的要素图层 this._mapView.map.add(this._drawGraphicLayer); this._mapView.map.add(this._tempGraphicLayer); this._defaultSymbol = dojo.mixin({ // 默认样式 polygon: new SimpleFillSymbol({ // 默认绘制polygon的样式 color: [127, 127, 127, 0.9], style: "solid", outline: { color: [0, 124, 247, 1], width: 2 } }), tempPolygon: new SimpleFillSymbol({ // 绘制过程中的polygon样式 color: [0, 0, 0, 0], style: "solid", outline: { color: [0, 124, 247, 1], width: 2 } }), polyline: new SimpleLineSymbol({ color: [0, 124, 247, 1], width: 2, style: "solid" }), tempPolyline: new SimpleLineSymbol({ color: [0, 124, 247, 1], width: 2, style: "solid" }) }, options.defaultSymbol); dojo.query(view.container).addContent('<div id="fn-tooltip-div" style="position:absolute;border: 1px solid #999;padding: 4px;background:#fff0bb;"></div>'); this.tooltipMsg = dojo.mixin({ click: '点击开始绘制', doubleClick: '双击结束绘制', drag: '按下鼠标左键开始绘制', dragStart: '移动鼠标进行绘制', dragEnd: '松开鼠标左键结束绘制' }, options.tooltipMsg); this._tooltipNode = dom.byId('fn-tooltip-div'); }, _clickGeometryTypes: [types.POLYGON, types.POLYLINE, types.POINT, types.POINT], // 点击绘制的几何类型 _dragGeometryTypes: [types.FREE_POLYGON, types.FREE_POLYLINE, types.FREE_EXTENT], // 拖拽绘制的几何类型 properties: { start: false, end: null, pointermove: null, drag: null, click: null }, _setTooltipMsg: function (msg) { if (msg) { this._tooltipNode.style.display = "block"; } else { this._tooltipNode.style.display = "none"; } this._tooltipNode.innerHTML = msg; }, registerEvents: function () { var me = this; this._handlers = [this._mapView.on('click', function (event) { // if (dojo.indexOf(me._clickGeometryTypes, me._geometryType) > -1) { if (!me.get('start')) { me.set('start', true); if (me._geometryType !== types.POINT) me._setTooltipMsg(me.tooltipMsg.doubleClick); } //me._drawPoint(event.mapPoint); me._clickPoints.push(event.mapPoint); me._tempGraphicLayer.removeAll(); me._drawGraphicLayer.removeAll(); event.stopPropagation(); var graphic; switch (me._geometryType) { case types.POLYGON: graphic = me._drawPolygon(me._clickPoints); break; case types.POLYLINE: graphic = me._drawPolyline(me._clickPoints); break; case types.POINT: graphic = me._drawPoint(event.mapPoint); me._endDraw(graphic); case types.CIRCLE: graphic = me._drawCircle(me._clickPoints); if (me._clickPoints.length === 2) { me._endDraw(graphic); } } if (graphic) { graphic.mapPoint = event.mapPoint; me.set('click', graphic); } else { me.set('click', { mapPoint: event.mapPoint }); } } }), this._mapView.on('pointer-move', this.debounce(function (event) { var graphic = me._dragOrMoveHandler(event); if (graphic) { me.set('pointermove', graphic); } }, 0)), this._mapView.on('double-click', function (event) { if (me.get('start')) { event.stopPropagation(); me._clickPoints.push(event.mapPoint); me._tempGraphicLayer.removeAll(); var graphic = me._generateGraphic(); graphic.mapPoint = event.mapPoint; me._endDraw(graphic); } }), this._mapView.on('pointer-down', function (event) { if (dojo.indexOf(me._dragGeometryTypes, me._geometryType) > -1) { if (!me.get('start')) { me.set('start', true); me._setTooltipMsg(me.tooltipMsg.dragStart); } } }), this._mapView.on('pointer-up', function (event) { if (dojo.indexOf(me._dragGeometryTypes, me._geometryType) > -1) { var graphic = me._generateGraphic(); me._endDraw(graphic); } }), this._mapView.on('drag', function (event) { var graphic = me._dragOrMoveHandler(event); if (graphic) { me.set('drag', graphic); } })]; }, _generateGraphic: function () { switch (this._geometryType) { case types.POLYGON: return this._drawPolygon(this._clickPoints); case types.POLYLINE:

评论收藏

内容反馈