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);