ArcGIS for js 缓冲（vue项目）

示例：

一、页面布局

<template>
    
    <div id="viewDiv">

        <div class="content">
          <el-button-group class="btnGroup">
            <el-button type="button" @click="toolClick('point')" title="缓冲点">缓冲点</el-button>
            <el-button type="button" @click="toolClick('polygon')" title="缓冲面">缓冲面</el-button>
            <el-button type="button" @click="toolClick('rectangle')" title="缓冲矩形">缓冲矩形</el-button>
          </el-button-group>
        </div>

   </div>


</template>
<script setup>
    ***
    ***
</script>
<style lang="less" scoped>
 .map ::v-deep .esri-view-surface.esri-view-surface--touch-none:focus::after {
		outline: none !important;
	}
	.map {
		width: 100%;
		/* height: 185vw; */
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

#viewDiv {
        padding: 0;
        margin: 0;
        height: 100vh;
        width: 100%;
    }

    .content{
        width:20%;
        left: 40%;
        right:40%;
        position: absolute;
        margin: 10;
       
    }
   
</style>

二、引入依赖
 

import {onMounted, ref} from 'vue';
import Map from "@arcgis/core/Map";
import Color from "@arcgis/core/Color";
import Graphic from "@arcgis/core/Graphic.js";
import MapView from "@arcgis/core/views/MapView";
import "@arcgis/core/assets/esri/themes/light/main.css";
import WebTileLayer from "@arcgis/core/layers/WebTileLayer";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";
import Point from "@arcgis/core/geometry/Point.js";
import SimpleFillSymbol from "@arcgis/core/symbols/SimpleFillSymbol";
import SimpleLineSymbol from "@arcgis/core/symbols/SimpleLineSymbol";
import * as geometryService from "@arcgis/core/rest/geometryService.js";
import * as geometryEngine from "@arcgis/core/geometry/geometryEngine.js";
import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel.js";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js";
import BufferParameters from "@arcgis/core/rest/support/BufferParameters.js";

三、实现代码

<script setup>
***
***

let sketchViewModel = null;
let graphicsLayer = null;
let graphicsLayerId = "graphicsLayer";
let engineGraphicGeometry = null;


onMounted(()=>{
  view.container = "viewDiv";

  createGraphicsLayer();

  createSketchViewModel();

  bufferMethod();
});


function toolClick(type){

  switch(type){
    case "point":
      graphicsLayer.removeAll();//清除绘制图层
      // 绘制点 
      sketchViewModel.create("point", { "mode": "click" });
    break;
    case "polygon":
    graphicsLayer.removeAll();//清除绘制图层
      // 绘制面
      sketchViewModel.create("polygon", { mode: "click" });
    break;
    case "rectangle":
    graphicsLayer.removeAll();//清除绘制图层
      // 绘制矩形
      sketchViewModel.create("rectangle", { mode: "click" });
    break;
  }

}

// 地图
const dzLayer = new WebTileLayer({
        urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=7b79e37115f10c512f76cdecda599902",
        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
    });


    // 标注
    const dzbzLayer = new WebTileLayer({
        urlTemplate: "https://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=7b79e37115f10c512f76cdecda599902",
        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
    });


   const featureLayer = new FeatureLayer({
		url:"http://116.141.0.114:48080/geoscene/rest/services/%E8%80%95%E4%BF%9D/%E5%8F%8C%E9%98%B3%E5%8C%BA%E5%9B%BE%E6%96%91/FeatureServer/0",
		outFields: ["*"], //加载所有要素字段
		opacity:0.5,//透明度
		//popupTemplate: TuCeng03TC, //加载模板,
		//definitionExpression: "",// 筛查
		// 渲染
		renderer: {
			type: "simple",
			symbol: {
				type: "simple-fill",//simple-line(线)、simple-fill（面）
				style: "solid",// solid 全部填充、cross十字交错、diamond菱形、square矩形、triangle三角形
				color: [255,20,60, 0.4],
				outline: {
					color: [255, 0, 0, 1],
					width: 2,
				},
			},
		}
	});

    const map = new Map({
        basemap: {
            baseLayers: [dzLayer,featureLayer],
            referenceLayers:[dzbzLayer]
        }
    });


    const  view = new MapView({
        // 长春坐标系
        center:[125.331345,43.8328],
        // 初始层级
        zoom:10,
        //container:"viewDiv",
        map:map,
        constraints: {
            minZoom: 10,// 最小层级
            maxZoom: 19 // 最大层级
        }
    });


// 创建绘制图层
function createGraphicsLayer(){
  graphicsLayer = map.findLayerById(graphicsLayerId)
	if (graphicsLayer === null || graphicsLayer === undefined) {
		graphicsLayer = new GraphicsLayer({id: graphicsLayerId})
		map.add(graphicsLayer)
	}
  //清空上次绘制图形
	graphicsLayer.removeAll();
}

// 创建绘制图层模板
function createSketchViewModel(){
  if (sketchViewModel == null || sketchViewModel == undefined) {
		sketchViewModel = new SketchViewModel({
			view: view,
			layer: graphicsLayer, //view不可编辑，map的可编辑
		});
	}
}

function bufferMethod(){
  sketchViewModel.on("create",function(event){
    if(event.state === "complete"){
      if(event.graphic.geometry.type == "point"){
        let point = new Point({
          x:event.graphic.geometry.x,
          y: event.graphic.geometry.y,
					spatialReference: event.graphic.geometry.spatialReference,
        });

        // 点
        const centerPoint = new Graphic({
					geometry: point,
          symbol:{
            type:"simple-marker",
            color:[255,0,0],
            outline:{
              color:[255,255,255],
              width:1
            },
            size:7
          }
          // 图片
					// symbol: {
					// 	type: "picture-marker",
					// 	url: new URL(icons, import.meta.url).href,
					// 	width: "40px",
					// 	height: "40px",
					// },
				});
        // 点添加到绘制图层
        graphicsLayer.add(centerPoint);
        // 点赋值给engineGraphicGeometry
        engineGraphicGeometry=centerPoint.geometry;
      }else if(event.graphic.geometry.type == "polygon" || event.graphic.geometry.type == "rectangle"){
        // 矩形
        let symbol = new SimpleFillSymbol({
					style: "solid",
					outline: new SimpleLineSymbol({
						style: "solid",
						color: new Color([255, 0, 0]),
						width: 2,
					}),
					color: new Color([255, 255, 0, 0.25]),
				});
				let handgraphic = new Graphic({
					geometry: event.graphic.geometry,
					symbol: symbol,
				});
        // 添加矩形
				graphicsLayer.add(handgraphic);
        // 矩形赋值给engineGraphicGeometry
        engineGraphicGeometry = handgraphic.geometry;
      }

      /*
      // 使用geometryService生成缓冲区
      const url = "https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer";

      //创建缓冲区参数
      let params = new BufferParameters({
            geometries: [event.graphic.geometry],
            distances: [10],
            unit: "kilometers",//meters-米；kilometers-千米",
            outSpatialReference: view.spatialReference,
            bufferSpatialReference:view.spatialReference,
        });

        geometryService.buffer(url,params).then(function(results){
          let symbol = new SimpleFillSymbol({
						style: "solid",
						outline: new SimpleLineSymbol({
							style: "solid",
							color: new Color([160, 219, 211, 0.8]),
							width: 1,
						}),
						color: new Color([217, 236, 219, 0.4]),
					});
					let graphic = new Graphic({
						geometry: results[0],
						symbol: symbol,
					});
					graphicsLayer.add(graphic);
        });
        */

        //使用geometryEngine生成缓冲区
        const buffer = geometryEngine.geodesicBuffer(engineGraphicGeometry,10,"kilometers");
        // 缓冲区样式
        let symbol = new SimpleFillSymbol({
						style: "solid",
						outline: new SimpleLineSymbol({
							style: "solid",
							color: new Color([160, 219, 211, 0.8]),
							width: 1,
						}),
						color: new Color([217, 236, 219, 0.4]),
					});
        // 缓冲图形
        const bufferLayer = new Graphic({
          geometry:buffer,
          symbol:symbol,
        });

        graphicsLayer.add(bufferLayer);

    }
  });
}
    

</script>