mcpField
A
arcgis-cim-symbols

arcgis-cim-symbols

github.com/saschabrunnerchデザイン・UI2363 回インストール29 週間前に更新
リポジトリ

arcgis-cim-symbols について

arcgis-cim-symbolsは、ArcGIS Maps SDK for JavaScriptでCIMを使った高度な地図記号を作成するための開発者向けリファレンススキルです。点・線・面記号、アニメーション、データ連動プロパティ、記号変換の例を扱います。

主な機能

  1. 01多層の点・線・面記号
  2. 02カスタムベクターマーカーと線パターン
  3. 03アニメーション記号とマーカー配置
  4. 04Arcadeによる記号プロパティ制御
  5. 05記号ユーティリティと変換

活用シーン

  1. 01矢印や破線を含む線記号の作成
  2. 02ポリゴンフィーチャへの網掛け塗り
  3. 03属性に基づく色、サイズ、テキストの制御
  4. 04アニメーションや多層構成の地図記号作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/saschabrunnerch/arcgis-maps-sdk-js-ai-context --skill arcgis-cim-symbols

インストール後、Claude Code で/arcgis-cim-symbolsを入力して読み込まれたか確認します。

詳細

ArcGIS CIM シンボル

CIM（Cartographic Information Model）を使用した高度なカートグラフィック シンボルの作成には、このスキルを使用します。

インポートパターン

ESM の直接インポート
import CIMSymbol from "@arcgis/core/symbols/CIMSymbol.js";
import * as cimSymbolUtils from "@arcgis/core/symbols/support/cimSymbolUtils.js";
import * as cimConversionUtils from "@arcgis/core/symbols/support/cimConversionUtils.js";
CDN の動的インポート
const CIMSymbol = await $arcgis.import("@arcgis/core/symbols/CIMSymbol.js");
const cimSymbolUtils = await $arcgis.import(
  "@arcgis/core/symbols/support/cimSymbolUtils.js",
);
const cimConversionUtils = await $arcgis.import(
  "@arcgis/core/symbols/support/cimConversionUtils.js",
);

注： 以下の例ではオートキャストを使用しています。CDN を使用する場合は、import X from "path" を const X = await $arcgis.import("path") に置き換えてください。

CIM シンボルの概要

CIM シンボルは、標準シンボルを超える高度なカートグラフィック機能を提供します。

  • 複数レイヤーのシンボル（マーカー、塗りつぶし、ストロークのレイヤーを重ねたもの）
  • 複雑なカスタム マーカー グラフィック（ベクターベースの図形）
  • カスタムのライン パターンと矢印ヘッド
  • 再生時間やループを制御できるアニメーション シンボル
  • プリミティブ オーバーライド（Arcade 式）によるデータ駆動型のシンボル プロパティ

CIM シンボルの構造

CIMSymbol (type: "cim")
  └── data (CIMSymbolReference)
        ├── symbol (CIMPointSymbol | CIMLineSymbol | CIMPolygonSymbol)
        │     └── symbolLayers[] (CIMVectorMarker | CIMSolidFill | CIMSolidStroke | CIMHatchFill | ...)
        │           └── markerGraphics[] (CIMMarkerGraphic - for vector markers)
        │                 ├── geometry (point, polyline, polygon rings)
        │                 └── symbol (nested CIM symbol for the graphic)
        └── primitiveOverrides[] (CIMPrimitiveOverride - data-driven)

CIM ポイント シンボル

基本的な CIM ポイント
const graphic = new Graphic({
  geometry: point,
  symbol: {
    type: "cim",
    data: {
      type: "CIMSymbolReference",
      symbol: {
        type: "CIMPointSymbol",
        symbolLayers: [
          {
            type: "CIMVectorMarker",
            enable: true,
            size: 20,
            frame: { xmin: 0, ymin: 0, xmax: 10, ymax: 10 },
            markerGraphics: [
              {
                type: "CIMMarkerGraphic",
                geometry: {
                  rings: [
                    [
                      [0, 0],
                      [10, 0],
                      [10, 10],
                      [0, 10],
                      [0, 0],
                    ],
                  ],
                },
                symbol: {
                  type: "CIMPolygonSymbol",
                  symbolLayers: [
                    {
                      type: "CIMSolidFill",
                      enable: true,
                      color: [255, 0, 0, 255],
                    },
                  ],
                },
              },
            ],
          },
        ],
      },
    },
  },
});
番号付きマーカー（複数レイヤー）
function getNumberedMarkerCIM(number) {
  return {
    type: "CIMSymbolReference",
    primitiveOverrides: [
      {
        type: "CIMPrimitiveOverride",
        primitiveName: "textGraphic",
        propertyName: "TextString",
        valueExpressionInfo: {
          type: "CIMExpressionInfo",
          expression: "$feature.text",
          returnType: "Default",
        },
      },
    ],
    symbol: {
      type: "CIMPointSymbol",
      symbolLayers: [
        // Text layer (on top)
        {
          type: "CIMVectorMarker",
          enable: true,
          size: 32,
          frame: { xmin: -5, ymin: -5, xmax: 5, ymax: 5 },
          markerGraphics: [
            {
              type: "CIMMarkerGraphic",
              primitiveName: "textGraphic",
              geometry: { x: 0, y: 0 },
              symbol: {
                type: "CIMTextSymbol",
                fontFamilyName: "Arial",
                fontStyleName: "Bold",
                height: 4,
                horizontalAlignment: "Center",
                verticalAlignment: "Center",
                symbol: {
                  type: "CIMPolygonSymbol",
                  symbolLayers: [
                    {
                      type: "CIMSolidFill",
                      enable: true,
                      color: [255, 255, 255, 255],
                    },
                  ],
                },
              },
              textString: String(number),
            },
          ],
        },
        // Circle background
        {
          type: "CIMVectorMarker",
          enable: true,
          size: 24,
          frame: { xmin: 0, ymin: 0, xmax: 10, ymax: 10 },
          markerGraphics: [
            {
              type: "CIMMarkerGraphic",
              geometry: {
                rings: [
                  /* circle coordinates */
                ],
              },
              symbol: {
                type: "CIMPolygonSymbol",
                symbolLayers: [
                  {
                    type: "CIMSolidFill",
                    enable: true,
                    color: [0, 100, 200, 255],
                  },
                ],
              },
            },
          ],
        },
      ],
    },
  };
}
ピン マーカー
const pinMarkerCIM = {
  type: "CIMSymbolReference",
  symbol: {
    type: "CIMPointSymbol",
    symbolLayers: [
      {
        type: "CIMVectorMarker",
        enable: true,
        anchorPoint: { x: 0, y: -0.5 },
        anchorPointUnits: "Relative",
        size: 40,
        frame: { xmin: 0, ymin: 0, xmax: 20, ymax: 30 },
        markerGraphics: [
          {
            type: "CIMMarkerGraphic",
            geometry: {
              rings: [
                [
                  [10, 30],
                  [0, 15],
                  [0, 10],
                  [10, 0],
                  [20, 10],
                  [20, 15],
                  [10, 30],
                ],
              ],
            },
            symbol: {
              type: "CIMPolygonSymbol",
              symbolLayers: [
                {
                  type: "CIMSolidStroke",
                  enable: true,
                  width: 1,
                  color: [50, 50, 50, 255],
                },
                {
                  type: "CIMSolidFill",
                  enable: true,
                  color: [255, 100, 100, 255],
                },
              ],
            },
          },
        ],
      },
    ],
  },
};

CIM ライン シンボル

矢印付きライン
const arrowLineCIM = {
  type: "CIMSymbolReference",
  symbol: {
    type: "CIMLineSymbol",
    symbolLayers: [
      // Arrow head at end
      {
        type: "CIMVectorMarker",
        enable: true,
        size: 12,
        markerPlacement: {
          type: "CIMMarkerPlacementAtExtremities",
          extremityPlacement: "JustEnd",
          angleToLine: true,
        },
        frame: { xmin: 0, ymin: 0, xmax: 10, ymax: 10 },
        markerGraphics: [
          {
            type: "CIMMarkerGraphic",
            geometry: {
              rings: [
                [
                  [0, 0],
                  [10, 5],
                  [0, 10],
                  [3, 5],
                  [0, 0],
                ],
              ],
            },
            symbol: {
              type: "CIMPolygonSymbol",
              symbolLayers: [
                {
                  type: "CIMSolidFill",
                  enable: true,
                  color: [0, 0, 0, 255],
                },
              ],
            },
          },
        ],
      },
      // Line stroke
      {
        type: "CIMSolidStroke",
        enable: true,
        width: 2,
        color: [0, 0, 0, 255],
      },
    ],
  },
};
パターン付き破線
const dashedLineCIM = {
  type: "CIMSymbolReference",
  symbol: {
    type: "CIMLineSymbol",
    symbolLayers: [
      {
        type: "CIMSolidStroke",
        enable: true,
        width: 3,
        color: [0, 100, 200, 255],
        effects: [
          {
            type: "CIMGeometricEffectDashes",
            dashTemplate: [8, 4, 2, 4], // dash, gap, dash, gap
            lineDashEnding: "NoConstraint",
          },
        ],
      },
    ],
  },
};

CIM ポリゴン シンボル

ハッチ塗りつぶし
const hatchedFillCIM = {
  type: "CIMSymbolReference",
  symbol: {
    type: "CIMPolygonSymbol",
    symbolLayers: [
      // Hatch pattern
      {
        type: "CIMHatchFill",
        enable: true,
        lineSymbol: {
          type: "CIMLineSymbol",
          symbolLayers: [
            {
              type: "CIMSolidStroke",
              enable: true,
              width: 1,
              color: [0, 0, 0, 255],
            },
          ],
        },
        rotation: 45,
        separation: 5,
      },
      // Background fill
      {
        type: "CIMSolidFill",
        enable: true,
        color: [255, 255, 200, 255],
      },
      // Outline
      {
        type: "CIMSolidStroke",
        enable: true,
        width: 2,
        color: [0, 0, 0, 255],
      },
    ],
  },
};

マーカー配置タイプ

配置タイプ使用例
CIMMarkerPlacementAtExtremitiesラインの始点／終点に矢印ヘッドを配置
CIMMarkerPlacementAlongLineSameSizeラインに沿ってマーカーを繰り返し配置
CIMMarkerPlacementAtRatioPositions特定の位置（0～1）にマーカーを配置
CIMMarkerPlacementInsidePolygonポリゴンの内部をマーカーで塗りつぶす
ラインに沿って配置
const markerAlongLine = {
  type: "CIMVectorMarker",
  enable: true,
  size: 10,
  markerPlacement: {
    type: "CIMMarkerPlacementAlongLineSameSize",
    placementTemplate: [20], // Every 20 points
    angleToLine: true,
  },
  // ... marker graphics
};
比率位置に配置
const markerAtPositions = {
  type: "CIMVectorMarker",
  enable: true,
  size: 8,
  markerPlacement: {
    type: "CIMMarkerPlacementAtRatioPositions",
    positionArray: [0, 0.5, 1], // Start, middle, end
    angleToLine: true,
  },
  // ... marker graphics
};

アニメーション CIM シンボル

const animatedCIM = {
  type: "CIMSymbolReference",
  symbol: {
    type: "CIMPointSymbol",
    symbolLayers: [
      {
        type: "CIMVectorMarker",
        enable: true,
        size: 20,
        animatedSymbolProperties: {
          type: "CIMAnimatedSymbolProperties",
          playAnimation: true,
          reverseAnimation: false,
          randomizeStartTime: true,
          startTimeOffset: 0,
          duration: 3, // Seconds
          repeatType: "Loop", // Loop, Oscillate, None
        },
        // ... marker graphics
      },
    ],
  },
};

データ駆動型プロパティ（プリミティブ オーバーライド）

プリミティブ オーバーライドを使うと、Arcade 式によってフィーチャ属性から任意の CIM プロパティを制御できます。

属性による色の設定
const dataDrivenCIM = {
  type: "CIMSymbolReference",
  primitiveOverrides: [
    {
      type: "CIMPrimitiveOverride",
      primitiveName: "fillLayer",
      propertyName: "Color",
      valueExpressionInfo: {
        type: "CIMExpressionInfo",
        expression: `
        var val = $feature.value;
        if (val < 50) return [255, 0, 0, 255];
        if (val < 100) return [255, 255, 0, 255];
        return [0, 255, 0, 255];
      `,
        returnType: "Default",
      },
    },
  ],
  symbol: {
    type: "CIMPointSymbol",
    symbolLayers: [
      {
        type: "CIMVectorMarker",
        markerGraphics: [
          {
            type: "CIMMarkerGraphic",
            symbol: {
              type: "CIMPolygonSymbol",
              symbolLayers: [
                {
                  type: "CIMSolidFill",
                  primitiveName: "fillLayer",
                  enable: true,
                  color: [128, 128, 128, 255], // Default
                },
              ],
            },
          },
        ],
      },
    ],
  },
};
属性によるサイズの設定
primitiveOverrides: [
  {
    type: "CIMPrimitiveOverride",
    primitiveName: "mainMarker",
    propertyName: "Size",
    valueExpressionInfo: {
      type: "CIMExpressionInfo",
      expression: "Sqrt($feature.population) * 0.01",
      returnType: "Default",
    },
  },
];
一般的なオーバーライド プロパティ
propertyName対象式の戻り値
"Color"塗りつぶし／ストロークの色[R, G, B, A] 配列
"Size"マーカー サイズ数値
"TextString"テキスト コンテンツ文字列
"Rotation"マーカーの角度数値（度）

CIM ユーティリティ関数

cimSymbolUtils
import * as cimSymbolUtils from "@arcgis/core/symbols/support/cimSymbolUtils.js";

// Get CIM color for a symbol layer
const color = cimSymbolUtils.getCIMSymbolColor(cimSymbol);

// Set color on CIM symbol
cimSymbolUtils.applyCIMSymbolColor(cimSymbol, [255, 0, 0, 255]);

// Get/set rotation
const rotation = cimSymbolUtils.getCIMSymbolRotation(cimSymbol);
cimSymbolUtils.applyCIMSymbolRotation(cimSymbol, 45);

// Get/set size
const size = cimSymbolUtils.getCIMSymbolSize(cimSymbol);
cimSymbolUtils.applyCIMSymbolSize(cimSymbol, 24);
cimConversionUtils
import * as cimConversionUtils from "@arcgis/core/symbols/support/cimConversionUtils.js";

// Convert simple symbol to CIM equivalent
const cimData = cimConversionUtils.fromSimpleMarkerSymbol(simpleMarkerSymbol);
const cimData = cimConversionUtils.fromSimpleLineSymbol(simpleLineSymbol);
const cimData = cimConversionUtils.fromSimpleFillSymbol(simpleFillSymbol);

CIM の色とストロークのリファレンス

色
// RGBA array [R, G, B, A] - each value 0-255
color: [255, 0, 0, 255]; // Red, fully opaque
color: [0, 0, 255, 128]; // Blue, 50% transparent
ストローク プロパティ
{
  type: "CIMSolidStroke",
  enable: true,
  width: 2,
  color: [0, 0, 0, 255],
  capStyle: "Round",    // Butt, Round, Square
  joinStyle: "Round",   // Bevel, Miter, Round
  miterLimit: 10
}
アンカー ポイント
{
  anchorPoint: { x: 0, y: 0 },      // Center
  anchorPoint: { x: 0, y: -0.5 },   // Bottom center
  anchorPointUnits: "Relative"       // Relative or Absolute
}

CIM をレンダラーで使用する

layer.renderer = {
  type: "simple",
  symbol: {
    type: "cim",
    data: arrowLineCIM, // Any CIMSymbolReference object
  },
};

参考サンプル

  • cim-symbols - 基本的な CIM シンボルの作成
  • cim-animations - アニメーション CIM シンボル
  • cim-line-arrows - ライン フィーチャ用の矢印シンボル
  • cim-lines-and-polygons - CIM のラインおよびポリゴン パターン
  • cim-primitive-overrides - データ駆動型の CIM プロパティ
  • cim-marker-placement - ラインに沿ったマーカー配置

よくある問題

  1. フレーム座標：フレームはマーカー グラフィックの座標空間を定義します。ジオメトリの座標はフレームの範囲内に収める必要があります。

  2. レイヤーの順序：シンボル レイヤーは配列内で下から上へ描画されます。背景要素は前景要素より前に配置してください。

  3. プリミティブ名：オーバーライドを機能させるには、シンボル全体で一意である必要があります。各 primitiveName は、対応する primitiveOverrides エントリと照合されます。

  4. 色の形式：常に値が 0～255 の [R, G, B, A] を使用してください。標準シンボルとは異なり、CIM は名前付きの色や 16 進数文字列を受け付けません。

  5. ジオメトリのリング：ポリゴンのリングは閉じている必要があります（最初のポイント＝最後のポイント）。リングが閉じていないと、描画エラーが発生します。

  6. enable プロパティ：各シンボル レイヤーに enable: true を設定する必要があります。設定しないと描画されません。

関連スキル

  • arcgis-visualization - 標準レンダラーとシンボル
  • arcgis-smart-mapping - 自動生成レンダラー
  • arcgis-core-maps - マップとビューの設定

コメント

Markdown 対応