Arcgis Draw 绘制图形

记录一下draw的绘图方法 HTML+JS代码保存过程中格式化出现了问题，手动恢复格式后可能会出现不对的地方，切记不可直接复制粘贴。更多的是参考思路。 <pre class="ql-syntax" spellcheck="false">// 绑定面按钮绘制事件
 const;
 drawAreaButton = document.getElementById('query-area-button');
 drawAreaButton;
.
 onclick = () => {
 if (that.showPolyline) {
 that.stateService.map.remove(that.stateService.map.findLayerById('polygon'));
 that.showAreaDataTree = false;
 that.showPolyline = false;
 } else {
 this.stateService.activeTool$.next('query-area-button');
 that.enableCreateArea(draw, that.stateService.view);
 }
 };
// ==================绘图方法=========================== 
// /** * 开始监听画线 */ 
 enableCreateLine(draw, view): void {
 const action = draw.create('polyline', {mode: 'click'});
 let graphicsLayer = view.map.findLayerById('polyline') as GraphicsLayer;
 if (!graphicsLayer) {
 graphicsLayer = new GraphicsLayer({title: 'polyline', id: 'polyline', listMode: 'hide',});
 view.map.add(graphicsLayer);
 }
 // 获取焦点 view.focus(); 
 // 顶点添加事件 
 action.on('vertex-add', (event) => {
 this.createPolyline(event, graphicsLayer);
 });
 // 顶点移除事件
 action.on('vertex-remove', (event) => {
 this.createPolyline(event, graphicsLayer);
 });
 // 鼠标移动事件
 action.on('cursor-update', (event) => {
 this.createPolyline(event, graphicsLayer);
 });
 // 绘制完成事件 
 action.on('draw-complete', (event) => {
 this.createPolyline(event, graphicsLayer);
 });
 }

/** * 开始监听画面 绘制多边形 */ enableCreateArea(draw, view): void {
 const action = draw.create('polygon', {
 mode: 'click'// 点击方式加点
 });
 let graphicsLayer = view.map.findLayerById('polygon') as GraphicsLayer;
 if (!graphicsLayer) {
 graphicsLayer = new GraphicsLayer({title: '多边形区域查询', id: 'polygon', listMode: 'hide',});
 view.map.add(graphicsLayer);
 }
 // 获取焦点 
 view.focus(); // 顶点添加事件
 action.on('vertex-add', (event) => {
 this.createPolygon(event, graphicsLayer);
 });
 // 顶点移除事件 
 action.on('vertex-remove', (event) => {
 this.createPolygon(event, graphicsLayer);
 });
 // 鼠标移动事件 
 action.on('cursor-update', (event) => {
 this.createPolygon(event, graphicsLayer);
 });
 // 绘制完成事件 
 action.on('draw-complete', (event) => {
 this.showPolyline = true;
 this.createPolygon(event, graphicsLayer);
 console.log('区域绘图完成，准备查询。', this.AreaGeometry);
 this.handleIdentify(this.AreaGeometry);
 });
 }

/** * 开始监听画点 */ enableCreatePoint(draw, view): void {
 const action = draw.create('point', {
 mode: 'click'// 点击方式加点 
 });
 let graphicsLayer = view.map.findLayerById('Point') as GraphicsLayer;
 if (!graphicsLayer) {
 graphicsLayer = new GraphicsLayer({title: 'Point', id: 'Point', listMode: 'hide',});
 view.map.add(graphicsLayer);
 }
 // 获取焦点 
 view.focus();
 // 顶点添加事件
 action.on('vertex-add', (event) => {
 this.createPoint(event, graphicsLayer);
 });
 // 顶点移除事件 
 action.on('vertex-remove', (event) => {
 this.createPoint(event, graphicsLayer);
 });
 // 绘制完成事件 
 action.on('draw-complete', (event) => {
 this.createPoint(event, graphicsLayer);
 });
 }

/** * 开始监听画圆 */ enableCreateCircle(draw, view): void {
 const action = draw.create('circle', {
 mode: 'click'// 点击方式加点 
 });
 let graphicsLayer = view.map.findLayerById('Circle') as GraphicsLayer;
 if (!graphicsLayer) {
 graphicsLayer = new GraphicsLayer({title: '圆形选区查询', id: 'Circle', listMode: 'hide',});
 view.map.add(graphicsLayer);
 }
 // 获取焦点
 view.focus();
 // 顶点移除事件 
 action.on('vertex-remove', (event) => {
 this.createCircle(event, graphicsLayer);
 });
 // 鼠标移动事件 
 action.on('cursor-update', (event) => {
 this.createCircle(event, graphicsLayer);
 });
 // 绘制完成事件 
 action.on('draw-complete', (event) => {
 this.showCircle = true;
 this.createCircle(event, graphicsLayer);
 console.log('圆形绘图完成，准备查询。', this.CircleGeometry);
 this.handleIdentify(this.CircleGeometry);
 });
 }

/** * 开始监听画矩形 */ enableCreateRectangle(draw, view): void {
 const action = draw.create('rectangle', {
 mode: 'click'// 点击方式加点
 });
 let graphicsLayer = view.map.findLayerById('rectangle') as GraphicsLayer;
 if (!graphicsLayer) {
 graphicsLayer = new GraphicsLayer({title: '矩形选区查询', id: 'rectangle', listMode: 'hide',});
 view.map.add(graphicsLayer);
 }
 // 获取焦点 
 view.focus();
 //顶点移除事件 
 action.on('vertex-remove', (event) => {
 this.createRectangle(event, graphicsLayer);
 });
 // 鼠标移动事件 
 action.on('cursor-update', (event) => {
 this.createRectangle(event, graphicsLayer);
 });
 // 绘制完成事件 
 action.on('draw-complete', (event) => {
 this.showRectangle = true;
 this.createRectangle(event, graphicsLayer);
 console.log('长方形绘图完成，准备查询。', this.RectangleGeometry);
 this.handleIdentify(this.RectangleGeometry);
 });
 }

/** * 根据点坐标生成新的线 */ createPolyline(event, graphicsLayer): void {
 const that = this;
 // 获取所有顶点 
 const vertices = event.vertices;
 // 清除之前绘制 
 graphicsLayer.removeAll();
 // 生成绘制的图形
 const symbolData = {type: 'simple-line', color: [4, 90, 141], width: 4, cap: 'round', join: 'round'};
 const graphic = new Graphic({
 geometry: new Polyline({paths: vertices, spatialReference: that.stateService.view.spatialReference}),
 symbol: symbolData
 });
 // 将绘制的图形添加到
 view;
 graphicsLayer.add(graphic);
 }

/** * 根据点坐标生成新的线 */ createPolygon(event, graphicsLayer): void {
 const that = this;
 // 获取所有顶点
 const vertices = event.vertices;
 // 清除之前绘制 
 graphicsLayer.removeAll();
 const symbolData = {
 type: 'simple-fill',
 color: [0, 0, 0, 0.1], style: 'solid', outline: {color: 'black', width: 1, style: 'dash'}
 };
 // 生成绘制的图形 
 const graphic = new Graphic({
 geometry: new Polygon({
 hasZ: false,
 hasM: false,
 rings: [vertices],
 spatialReference: that.stateService.view.spatialReference
 }), symbol: symbolData
 });
 this.AreaGeometry = new Polygon({
 hasZ: false,
 hasM: false,
 rings: [vertices],
 spatialReference: that.stateService.view.spatialReference
 });
 // 将绘制的图形添加到view
 graphicsLayer.add(graphic);
 }

/** * 根据点坐标生成新的线 */
 createPoint(event, graphicsLayer): void {
 const that = this;
 // 获取所有顶点 
 const coordinates = event.coordinates;
 const symbolData = {
 type: 'simple-marker', // autocasts as new SimpleMarkerSymbol()
 style: 'square', color: 'blue', size: '8px',
 };

// 生成绘制的图形 
 const graphic = new Graphic({
 geometry: new Point({
 hasZ: false,
 hasM: false,
 x: coordinates[0],
 y: coordinates[1],
 spatialReference: that.stateService.view.spatialReference
 }), symbol: symbolData
 });
 // 将绘制的图形添加到
 view;
 graphicsLayer.add(graphic);
 }

/** * 根据点坐标生成新的线 */
 createCircle(event, graphicsLayer): void {
 // 获取所有顶点 
 const vertices = event.vertices;
 // 少于一个点无法展示圆 
 if (vertices.length < 2) {
 return;
 }
 // 清除之前绘制 
 graphicsLayer.removeAll();
 // 生成绘制的图形,两点画圆 
 const center = new Point({
 hasZ: false,
 hasM: false,
 x: vertices[0][0],
 y: vertices[0][1],
 spatialReference: this.stateService.view.spatialReference
 });
 const dis = center.distance(new Point({
 hasZ: false,
 hasM: false,
 x: vertices[1][0],
 y: vertices[1][1],
 spatialReference: this.stateService.view.spatialReference
 }));
 const symbolData = {
 type: 'simple-fill',
 color: [0, 0, 0, 0.1], style: 'solid',
 outline: {
 color: 'black', width: 1, style: 'dash'
 }
 };
 const graphic = new Graphic({
 geometry: new Circle({
 hasZ: false,
 hasM: false,
 center,
 radius: dis,
 spatialReference: this.stateService.view.spatialReference
 }), symbol: symbolData
 });
 this.CircleGeometry = new Circle({
 hasZ: false,
 hasM: false,
 center,
 radius: dis,
 spatialReference: this.stateService.view.spatialReference
 });
 // 将绘制的图形添加到
 view;
 graphicsLayer.add(graphic);
 }

createRectangle(event, graphicsLayer): void {
 // 获取所有顶点
 const vertices = event.vertices;
 // 两点画矩形
 if (vertices.length < 2) {
 return;
 }
 const rings = [vertices[0], [vertices[0][0], vertices[1][1]], vertices[1], [vertices[1][0], vertices[0][1]]];
 // 清除之前绘制 
 graphicsLayer.removeAll();
 const symbolData = {type: 'simple-fill', color: [0, 0, 0, 0.1], style: 'solid', outline: {color: 'black', width: 1, style: 'dash'}};
 // 生成绘制的图形 
 const graphic = new Graphic({
 geometry: new Polygon({
 hasZ: false,
 hasM: false,
 rings: [rings],
 spatialReference: this.stateService.view.spatialReference
 }), symbol: symbolData
 });
 // 保存geometry 用于查询数据 
 this.RectangleGeometry = new Polygon({
 hasZ: false,
 hasM: false,
 rings: [rings],
 spatialReference: this.stateService.view.spatialReference
 });
 // 将绘制的图形添加到view 
 graphicsLayer.add(graphic);
 }

close(): void {
 this.dataSource.data = [];
 this.showAreaDataTree = false;
 }

remove(): void {
 this.stateService.view.graphics.removeAll(); // 清楚之前的绘制 }
 };

</pre>

已有 2 条评论