当前位置：首页 > news >正文

ArcGIS for js 缓冲（vue项目）

news 来源：原创 2024/9/20 6:01:30

示例：

一、页面布局

<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);// 点赋值给engineGraphicGeometryengineGraphicGeometry=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);// 矩形赋值给engineGraphicGeometryengineGraphicGeometry = 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>