示例：
一、页面布局
<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>
