ArcGIS for js 标记（vue代码）

一、引入依赖

import Graphic from "@arcgis/core/Graphic";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
import Color from "@arcgis/core/Color";
import TextSymbol from "@arcgis/core/symbols/TextSymbol.js";
import SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol";
import PictureMarkerSymbol from "@arcgis/core/symbols/PictureMarkerSymbol.js";
import Point from "@arcgis/core/geometry/Point.js";
// 引入本地图片作为标记图片
import pngImg from "../assets/vue.svg";

二、定义对象

// 文字标注属性
let textSymbol  = null;
let textGraphicLayer = null;
let textLayerId = "textSymbolLayer";
// 标记点属性
let markerSymbol = null;
let markerGraphicLayer = null;
let markerLayerId = "markerSymbolLayer";
// 图片标记属性
let picMarkerSymbol = null;
let picMarkerGraphicLayer = null;
let picMarkerLayerId = "picMarkerSymbolLayer";

三、方法

1、初始化

// 标注初始化
export const initMarker = ((view,map) =>{// 文字图层初始化textGraphicLayer = map.findLayerById(textLayerId)if (textGraphicLayer === null || textGraphicLayer === undefined) {textGraphicLayer = new GraphicsLayer({id: textLayerId})map.add(textGraphicLayer)}textGraphicLayer.removeAll() //清空上次绘制的线// 标记点图层初始化markerGraphicLayer = map.findLayerById(markerLayerId)if (markerGraphicLayer === null || markerGraphicLayer === undefined) {markerGraphicLayer = new GraphicsLayer({id: markerLayerId})map.add(markerGraphicLayer)}markerGraphicLayer.removeAll() //清空上次绘制的线// 图片标记图层初始化picMarkerGraphicLayer = map.findLayerById(picMarkerLayerId)if (picMarkerGraphicLayer === null || picMarkerGraphicLayer === undefined) {picMarkerGraphicLayer = new GraphicsLayer({id: picMarkerLayerId})map.add(picMarkerGraphicLayer)}picMarkerGraphicLayer.removeAll() //清空上次绘制的线});

2、文字标注方法

// 文字标注方法
export const initWordsMarker = ((view,map) => {initMarker(view,map);// 初始化if(map.layers.includes(markerGraphicLayer)||map.layers.includes(picMarkerGraphicLayer)){map.remove(markerGraphicLayer);// 移除标记点图层map.remove(picMarkerGraphicLayer);// 移除图片标记图层}// 文字textSymbol = new TextSymbol({text: "文字标注",font: "12px sans-serif",color: "blue",haloColor: new Color([255, 255, 0, 0.25]),haloSize: "1",xoffset: 0,yoffset: 10});// 获取焦点view.focus();// 文字位置点let wordPoint = null;// 点击地图事件view.on("click",function(event){wordPoint = {type: "point",// x: event.mapPoint.longitude,// y: event.mapPoint.latitude,x: event.mapPoint.x,y: event.mapPoint.y,spatialReference: view.spatialReference}// 创建图形对象，并添加文本let textGraphic = new Graphic({geometry: wordPoint,symbol: textSymbol,attributes: {name: "属性字段"}});// 添加textGraphicLayer.add(textGraphic);});});

3、标记点标注方法

// 标记点方法
export const initGraphMarker = ((view,map)=>{initMarker(view,map);// 初始化if(map.layers.includes(textGraphicLayer)||map.layers.includes(picMarkerGraphicLayer)){map.remove(textGraphicLayer);// 移除文字标注图层map.remove(picMarkerGraphicLayer);// 移除图片标记图层}// 标记点markerSymbol = new SimpleMarkerSymbol({color: "red",// 标记点颜色size: 12,// 标记x点大小style: "circle",// 标记点类型 - circle(圆点), cross(十字), diamond(菱形), path(正方形), square(矩形), triangle(三角形), x(x形)angle:0,// 选择角outline:{// 边框color: [0, 255, 0],width: 1},xoffset:0,// 正值向右yoffset:0// 正值向上});// 标记点位置点let markerPoint = null;// 点击地图事件view.on("click",function(event){markerPoint = {type: "point",// x: event.mapPoint.longitude,// y: event.mapPoint.latitude,x: event.mapPoint.x,y: event.mapPoint.y,spatialReference: view.spatialReference}// 创建标记点对象，并添加属性let markerGraphic = new Graphic({geometry: markerPoint,symbol: markerSymbol,attributes: {name: "属性字段"}});// 添加markerGraphicLayer.add(markerGraphic);});});

4、图片标记方法

// 图片标记方法
export const initPictureMarker = ((view,map) =>{initMarker(view,map);// 初始化if(map.layers.includes(textGraphicLayer)||map.layers.includes(markerGraphicLayer)){map.remove(textGraphicLayer);// 移除文字标注图层map.remove(markerGraphicLayer);// 移除标记点图层}// 图片标记点picMarkerSymbol = new PictureMarkerSymbol({// 网络图片//url:"https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",// 本地图片// url:pngImg,// 上面引入url:getImgUrl("star.png"),// 下面方法获取 width:"30px",height:"30px",angle:0,// 选择角xoffset:0,// 正值向右yoffset:0// 正值向上});// 标记点位置点let picMarkerPoint = null;// 点击地图事件view.on("click",function(event){picMarkerPoint = {type: "point",// x: event.mapPoint.longitude,// y: event.mapPoint.latitude,x: event.mapPoint.x,y: event.mapPoint.y,spatialReference: view.spatialReference}// 创建标记点对象，并添加属性let picMarkerGraphic = new Graphic({geometry: picMarkerPoint,symbol: picMarkerSymbol,attributes: {name: "属性字段"}});// 添加picMarkerGraphicLayer.add(picMarkerGraphic);});});// 引入本地图片方法
const getImgUrl = file => {return new URL(`../assets/${file}`, import.meta.url).href;};

5、清除方法

//清除
export const clearMarker = (() => {textGraphicLayer.removeAll();//清空上次绘制的文字markerGraphicLayer.removeAll() //清空上次绘制的标记点picMarkerGraphicLayer.removeAll();// 清空上次绘制的图片标记点
});

四、使用

// 引入依赖
import { initWordsMarker,initGraphMarker,initPictureMarker } from "@/map/drawBar.js"// 文字标注调用
initWordsMarker(ToolsConfig.view,ToolsConfig.map);
// 标记点标注调用
initGraphMarker(ToolsConfig.view,ToolsConfig.map);
// 图片标记调用
initPictureMarker(ToolsConfig.view,ToolsConfig.map);