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

news2024/9/28 9:30:39

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, // 项目地图map
	wktJson: 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); // 将图层添加到地图上
}