arcgis for js 如何自定义绘制仿高德导航线（自定义轨迹路线）

1、arcgis for js + vue3

绘制效果图

实现

1、实现上图路线的自定义线条，先拆分线条为三个部分：较宽的暗绿色背景+浅绿色背景+白色箭头
2、自定义线条的symbol，使用CIMSymbol

import CIMSymbol from "@arcgis/core/symbols/CIMSymbol";// 背景箭头轨迹样式
export const arrowsLineSymbol = new CIMSymbol({data: {type: "CIMSymbolReference",symbol: {type: "CIMLineSymbol",symbolLayers: [{// 路线白色箭头type: "CIMVectorMarker",enable: true,size: 4,markerPlacement: {type: "CIMMarkerPlacementAlongLineSameSize", // 在这条线上放置相同大小的标记endings: "WithMarkers",placementTemplate: [19.5], // 箭头间距angleToLine: true, // 符号保持其与直线的角度},frame: {xmin: -5,ymin: -5,xmax: 5,ymax: 5,},markerGraphics: [{type: "CIMMarkerGraphic",geometry: {rings: [// 箭头-自定义绘制路线上面的连续出现的图标[[-5, -5.47],[1.96, -0.03],[-6, 5.6],[1.96, -0.03],[-5, -5.47],],],},symbol: {// 符号样式type: "CIMPolygonSymbol",symbolLayers: [{type: "CIMSolidStroke", // 闭合的enable: true,color: [255, 255, 255, 255],width: 1,},],},},],},{// 路线浅绿色背景type: "CIMSolidStroke",enable: true,capStyle: "Butt",joinStyle: "Round",width: 5,color: [48, 211, 102, 255],},{// 路线暗绿色边框type: "CIMSolidStroke",enable: true,capStyle: "Butt",joinStyle: "Round",width: 8,color: [0, 115, 76, 255],},],},},
});

3、结合上面的symbol，绘制自定义线条的图层

import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
import Polyline from "@arcgis/core/geometry/Polyline";
import Graphic from "@arcgis/core/Graphic";
// 引入自定义symbol
import { arrowsLineSymbol } from "./symbol";function createLine(map: Map | undefined, // 项目地图mapwktJson: any // 路线坐标集、坐标系对象
) {if (!map) return;const graphicsLayer = new GraphicsLayer(); // 创建一个图层对象const polyline = new Polyline({...wktJson, // paths:[[x1, y1], [x2, y2], ...], spatialReference: new SpatialReference({wkid: xxxx})});// 图层const lineGraphic = new Graphic({geometry: polyline,symbol: arrowsLineSymbol,});// 图层添加到图层组对象graphicsLayer.add(lineGraphic);map.add(graphicsLayer); // 将图层添加到地图上
}

4、总结： 可以根据修改symbol参数自定义绘制更多图层样式