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); // 将图层添加到地图上
}
4、总结: 可以根据修改symbol参数自定义绘制更多图层样式