mcpField
A
arcgis-smart-mapping

arcgis-smart-mapping

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

arcgis-smart-mapping について

arcgis-smart-mappingは、ArcGIS JavaScript開発者向けのスマートマッピングスキルです。レイヤーデータからレンダラーや統計値を作成し、ラベル、ポップアップ、ラスターマッピングにも対応します。

主な機能

  1. 01色・サイズ・タイプ別レンダラーの作成
  2. 02ヒートマップ・ドット密度・関係性レンダラー
  3. 03統計値・ヒストグラム・クラス境界の計算
  4. 04配色スキームとカラ―ランプの取得
  5. 05クラスターとビンのラベル案を生成

活用シーン

  1. 01数値フィールドによる連続色マップの作成
  2. 022変数間の空間的な関係の表示
  3. 03レイヤーのヒートマップやドット密度図の作成
  4. 04フィールド分布の分析とクラス境界の設定

インストール

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

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

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

詳細

ArcGIS スマートマッピング

このスキルを使用すると、データに基づいてレンダラーを自動生成し、統計情報を計算して、インテリジェントなビジュアライゼーションを作成できます。

インポートパターン

ESM の直接インポート
import * as colorRendererCreator from "@arcgis/core/smartMapping/renderers/color.js";
import * as sizeRendererCreator from "@arcgis/core/smartMapping/renderers/size.js";
import * as typeRendererCreator from "@arcgis/core/smartMapping/renderers/type.js";
import summaryStatistics from "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
import histogram from "@arcgis/core/smartMapping/statistics/histogram.js";
CDN の動的インポート
const colorRendererCreator = await $arcgis.import(
  "@arcgis/core/smartMapping/renderers/color.js",
);
const summaryStatistics = await $arcgis.import(
  "@arcgis/core/smartMapping/statistics/summaryStatistics.js",
);

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

スマートマッピングモジュールの概要

モジュールインポートパス用途
renderers/color@arcgis/core/smartMapping/renderers/color.js色ベースのレンダラー
renderers/size@arcgis/core/smartMapping/renderers/size.jsサイズベースのレンダラー
renderers/type@arcgis/core/smartMapping/renderers/type.js個別値レンダラー
renderers/heatmap@arcgis/core/smartMapping/renderers/heatmap.jsヒートマップレンダラー
renderers/dotDensity@arcgis/core/smartMapping/renderers/dotDensity.jsドット密度レンダラー
renderers/opacity@arcgis/core/smartMapping/renderers/opacity.js不透明度レンダラー
renderers/relationship@arcgis/core/smartMapping/renderers/relationship.js二変量レンダラー
renderers/predominance@arcgis/core/smartMapping/renderers/predominance.js優勢度レンダラー
renderers/pieChart@arcgis/core/smartMapping/renderers/pieChart.js円グラフレンダラー
renderers/univariateColorSize@arcgis/core/smartMapping/renderers/univariateColorSize.js色とサイズの組み合わせ
renderers/location@arcgis/core/smartMapping/renderers/location.jsシンプルな位置レンダラー
statistics/classBreaks@arcgis/core/smartMapping/statistics/classBreaks.jsクラス境界値
statistics/histogram@arcgis/core/smartMapping/statistics/histogram.jsヒストグラムのビン
statistics/summaryStatistics@arcgis/core/smartMapping/statistics/summaryStatistics.js最小値／最大値／平均値／標準偏差
statistics/uniqueValues@arcgis/core/smartMapping/statistics/uniqueValues.jsフィールドの個別値
statistics/predominantCategories@arcgis/core/smartMapping/statistics/predominantCategories.js優勢なカテゴリ
statistics/heatmapStatistics@arcgis/core/smartMapping/statistics/heatmapStatistics.jsヒートマップ密度統計
statistics/summaryStatisticsForAge@arcgis/core/smartMapping/statistics/summaryStatisticsForAge.js日付フィールドから算出した年齢
symbology/color@arcgis/core/smartMapping/symbology/color.jsカラースキーム
symbology/support/colorRamps@arcgis/core/smartMapping/symbology/support/colorRamps.jsカラ―ランプライブラリ
heuristics/sizeRange@arcgis/core/smartMapping/heuristics/sizeRange.js最適なサイズ範囲
heuristics/scaleRange@arcgis/core/smartMapping/heuristics/scaleRange.js最適な縮尺範囲
labels/clusters@arcgis/core/smartMapping/labels/clusters.jsクラスターラベル
labels/bins@arcgis/core/smartMapping/labels/bins.jsビンラベル
popup/clusters@arcgis/core/smartMapping/popup/clusters.jsクラスターポップアップ
popup/templates@arcgis/core/smartMapping/popup/templates.jsポップアップテンプレート

レンダラーの作成関数

カラー レンダラー（連続）

数値に基づくカラー グラデーションを使ったレンダラーを作成します。

import * as colorRendererCreator from "@arcgis/core/smartMapping/renderers/color.js";

const { renderer, visualVariable, colorScheme } =
  await colorRendererCreator.createContinuousRenderer({
    layer: featureLayer,
    view: view,
    field: "population",
    theme: "high-to-low", // high-to-low, above, below, centered-on, extremes
  });

featureLayer.renderer = renderer;
カラー レンダラー（クラス分類）

異なる色のクラスを使ったレンダラーを作成します。

const { renderer, classBreakInfos } =
  await colorRendererCreator.createClassBreaksRenderer({
    layer: featureLayer,
    view: view,
    field: "income",
    classificationMethod: "natural-breaks", // equal-interval, quantile, standard-deviation
    numClasses: 5,
    colorScheme: {
      id: "esri-orange-9",
    },
  });

featureLayer.renderer = renderer;
サイズ レンダラー（連続）
import * as sizeRendererCreator from "@arcgis/core/smartMapping/renderers/size.js";

const { renderer, visualVariable } =
  await sizeRendererCreator.createContinuousRenderer({
    layer: featureLayer,
    view: view,
    field: "magnitude",
  });

featureLayer.renderer = renderer;
サイズ レンダラー（クラス分類）
const { renderer } = await sizeRendererCreator.createClassBreaksRenderer({
  layer: featureLayer,
  view: view,
  field: "sales",
  classificationMethod: "quantile",
  numClasses: 4,
});
タイプ（個別値）レンダラー
import * as typeRendererCreator from "@arcgis/core/smartMapping/renderers/type.js";

const { renderer, uniqueValueInfos } = await typeRendererCreator.createRenderer(
  {
    layer: featureLayer,
    view: view,
    field: "landuse",
    numTypes: 10, // Maximum categories before "Other"
    sortBy: "count", // value, count
  },
);

featureLayer.renderer = renderer;
ヒートマップ レンダラー
import * as heatmapRendererCreator from "@arcgis/core/smartMapping/renderers/heatmap.js";

const { renderer } = await heatmapRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  field: "magnitude", // Optional: weight by field
  radius: 18,
  minDensity: 0,
  maxDensity: 0.05,
});

featureLayer.renderer = renderer;
ドット密度レンダラー
import * as dotDensityRendererCreator from "@arcgis/core/smartMapping/renderers/dotDensity.js";

const { renderer } = await dotDensityRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  attributes: [
    { field: "dem_votes", color: "blue", label: "Democrat" },
    { field: "rep_votes", color: "red", label: "Republican" },
  ],
  dotValue: 1000,
  dotBlendingEnabled: true,
});

featureLayer.renderer = renderer;
関係性レンダラー

2 変量マップで 2 つの変数の関係を表示します。

import * as relationshipRendererCreator from "@arcgis/core/smartMapping/renderers/relationship.js";

const { renderer } = await relationshipRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  field1: { field: "population" },
  field2: { field: "income" },
  numClasses: 3, // 2, 3, or 4
  focus: "HH", // HH, HL, LH, LL
});
優勢度レンダラー

各フィーチャで最も高い値を持つカテゴリを表示します。

import * as predominanceRendererCreator from "@arcgis/core/smartMapping/renderers/predominance.js";

const { renderer } = await predominanceRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  fields: [
    { name: "dem_votes", label: "Democrat" },
    { name: "rep_votes", label: "Republican" },
    { name: "ind_votes", label: "Independent" },
  ],
  includeSizeVariable: true,
  includeOpacityVariable: true,
});
円グラフ レンダラー
import * as pieChartRendererCreator from "@arcgis/core/smartMapping/renderers/pieChart.js";

const { renderer } = await pieChartRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  attributes: [
    { field: "asian", label: "Asian" },
    { field: "black", label: "Black" },
    { field: "white", label: "White" },
    { field: "other", label: "Other" },
  ],
  sizeOptimizationEnabled: true,
});
単変量カラー・サイズ レンダラー

色とサイズを組み合わせて、1 つの変数を強調します。

import * as univariateRendererCreator from "@arcgis/core/smartMapping/renderers/univariateColorSize.js";

const { renderer } = await univariateRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  view: view,
  field: "population",
  theme: "above-and-below",
});
位置レンダラー

位置に基づくシンプルなビジュアライゼーションです（データ駆動のスタイル設定はありません）。

import * as locationRendererCreator from "@arcgis/core/smartMapping/renderers/location.js";

const { renderer } = await locationRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  color: [0, 112, 255],
});

統計関数

要約統計
import summaryStatistics from "@arcgis/core/smartMapping/statistics/summaryStatistics.js";

const result = await summaryStatistics({
  layer: featureLayer,
  field: "temperature",
});

console.log(result.avg); // Mean
console.log(result.count); // Feature count
console.log(result.max); // Maximum
console.log(result.min); // Minimum
console.log(result.stddev); // Standard deviation
console.log(result.sum); // Sum
console.log(result.variance); // Variance
クラス分類
import classBreaks from "@arcgis/core/smartMapping/statistics/classBreaks.js";

const result = await classBreaks({
  layer: featureLayer,
  field: "population",
  classificationMethod: "natural-breaks", // equal-interval, quantile, standard-deviation
  numClasses: 5,
  normalizationField: "area", // Optional
});

console.log(result.classBreakInfos);
// [{ minValue: 0, maxValue: 1000, count: 50 }, ...]
ヒストグラム
import histogram from "@arcgis/core/smartMapping/statistics/histogram.js";

const result = await histogram({
  layer: featureLayer,
  field: "income",
  numBins: 20,
  minValue: 0,
  maxValue: 200000,
});

console.log(result.bins);
// [{ minValue: 0, maxValue: 10000, count: 150 }, ...]
個別値
import uniqueValues from "@arcgis/core/smartMapping/statistics/uniqueValues.js";

const result = await uniqueValues({
  layer: featureLayer,
  field: "category",
});

console.log(result.uniqueValueInfos);
// [{ value: "Type A", count: 100 }, ...]
年齢の要約統計
import summaryStatisticsForAge from "@arcgis/core/smartMapping/statistics/summaryStatisticsForAge.js";

const result = await summaryStatisticsForAge({
  layer: featureLayer,
  field: "construction_date",
  unit: "years", // years, months, days, hours, minutes, seconds
});

console.log(result.avg); // Average age in years
優勢カテゴリ
import predominantCategories from "@arcgis/core/smartMapping/statistics/predominantCategories.js";

const result = await predominantCategories({
  layer: featureLayer,
  fields: ["typeA_count", "typeB_count", "typeC_count"],
});

console.log(result.predominantCategoryInfos);
ヒートマップ統計
import heatmapStatistics from "@arcgis/core/smartMapping/statistics/heatmapStatistics.js";

const result = await heatmapStatistics({
  layer: featureLayer,
  view: view,
  field: "magnitude",
});

console.log(result.maxDensity);
console.log(result.minDensity);

シンボル設定（カラースキーム）

カラースキームを取得
import * as symbologyColor from "@arcgis/core/smartMapping/symbology/color.js";

const schemes = symbologyColor.getSchemes({
  geometryType: "polygon",
  theme: "high-to-low",
});

console.log(schemes.primaryScheme); // Best match
console.log(schemes.secondarySchemes); // Alternatives
カラースキームのテーマ
テーマ説明
high-to-lowシーケンシャル（低い値から高い値）
above-and-below発散（中心点）
centered-on特定の値を中心とする
extremes高い値と低い値を強調する
カラー ランプを取得
import * as colorRamps from "@arcgis/core/smartMapping/symbology/support/colorRamps.js";

const allRamps = colorRamps.all();
const byName = colorRamps.byName("Green-Brown");

ヒューリスティック

サイズ範囲
import sizeRange from "@arcgis/core/smartMapping/heuristics/sizeRange.js";

const result = await sizeRange({
  layer: featureLayer,
  view: view,
  field: "population",
});

console.log(result.minSize); // Suggested minimum
console.log(result.maxSize); // Suggested maximum
縮尺範囲
import scaleRange from "@arcgis/core/smartMapping/heuristics/scaleRange.js";

const result = await scaleRange({
  layer: featureLayer,
  view: view,
});

console.log(result.minScale);
console.log(result.maxScale);

クラスターとビンのラベル

クラスター ラベル
import * as clusterLabels from "@arcgis/core/smartMapping/labels/clusters.js";

const { labelingInfo } = await clusterLabels.getLabelSchemes({
  layer: featureLayer,
  view: view,
});
ビン ラベル
import * as binLabels from "@arcgis/core/smartMapping/labels/bins.js";

const { labelingInfo } = await binLabels.getLabelSchemes({
  layer: featureLayer,
  view: view,
});

ラスターのスマート マッピング

クラス分類ラスター レンダラー
import * as rasterClassBreaks from "@arcgis/core/smartMapping/raster/renderers/classBreaks.js";

const { renderer } = await rasterClassBreaks.createRenderer({
  layer: imageryLayer,
  view: view,
  classificationMethod: "natural-breaks",
  numClasses: 5,
});

imageryLayer.renderer = renderer;
ストレッチ ラスター レンダラー
import * as rasterStretch from "@arcgis/core/smartMapping/raster/renderers/stretch.js";

const { renderer } = await rasterStretch.createRenderer({
  layer: imageryLayer,
  view: view,
  stretchType: "standard-deviation", // min-max, standard-deviation, histogram-equalization
  numberOfStandardDeviations: 2,
});
RGB ラスター レンダラー
import * as rasterRGB from "@arcgis/core/smartMapping/raster/renderers/rgb.js";

const { renderer } = await rasterRGB.createRenderer({
  layer: imageryLayer,
  view: view,
  bandIds: [4, 3, 2], // NIR, Red, Green (false color)
});
フロー レンダラー
import * as rasterFlow from "@arcgis/core/smartMapping/raster/renderers/flow.js";

const { renderer } = await rasterFlow.createRenderer({
  layer: imageryLayer,
  view: view,
});

一般的なパターン

スマート マッピングの完全なワークフロー
// 1. Create renderer
const { renderer } = await colorRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  view: view,
  field: "population",
});

// 2. Get histogram for slider widget
const histogramResult = await histogram({
  layer: featureLayer,
  field: "population",
  numBins: 50,
});

// 3. Apply renderer
featureLayer.renderer = renderer;

// 4. Create histogram range slider
const slider = new HistogramRangeSlider({
  bins: histogramResult.bins,
  min: histogramResult.minValue,
  max: histogramResult.maxValue,
  values: [histogramResult.minValue, histogramResult.maxValue],
});
複数変数のビジュアライゼーション
// Color by one variable, size by another
const colorResult = await colorRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  view: view,
  field: "income",
});

const sizeResult = await sizeRendererCreator.createVisualVariables({
  layer: featureLayer,
  view: view,
  field: "population",
});

colorResult.renderer.visualVariables.push(sizeResult.visualVariable);
featureLayer.renderer = colorResult.renderer;
ビジュアル変数のみを作成
const { visualVariable } = await colorRendererCreator.createVisualVariable({
  layer: featureLayer,
  view: view,
  field: "temperature",
  theme: "high-to-low",
});

// Add to existing renderer
renderer.visualVariables = [visualVariable];

参照サンプル

  • visualization-sm-color - カラー レンダラーを使ったスマート マッピング
  • visualization-sm-size - サイズ レンダラーを使ったスマート マッピング
  • visualization-sm-types - 個別値タイプのスマート マッピング
  • visualization-sm-relationship - 関係性のスマート マッピング
  • visualization-sm-predominance - 優勢度のビジュアライゼーション
  • visualization-sm-dotdensity - ドット密度のスマート マッピング
  • visualization-sm-uni-colorsize - 単変量カラー・サイズ
  • visualization-sm-multivariate - 複数変数のスマート マッピング
  • visualization-sm-classbreaks - クラス分類のスマート マッピング
  • visualization-histogram-color - ヒストグラム駆動のカラー ビジュアライゼーション

よくある落とし穴

  1. ビューが必要：ほとんどのスマート マッピング関数では、縮尺依存の計算に view パラメーターが必要です。

    // Anti-pattern: missing view
const { renderer } = await colorRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  field: "population",
});

    // Correct: include view
const { renderer } = await colorRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  view: view,
  field: "population",
});

  2. 非同期処理：すべてのスマート マッピング関数は Promise を返します。結果には必ず await を使用してください。

  3. フィールドタイプの不一致：連続値のカラー／サイズ レンダラーには数値フィールドを使用します。タイプ／個別値レンダラーには文字列／コード値フィールドを使用します。

  4. レイヤーの読み込みが必要：レイヤーが読み込まれ、指定したフィールドが存在している必要があります。

    await featureLayer.load();
const { renderer } = await colorRendererCreator.createContinuousRenderer({...});

  5. カラースキームのジオメトリ：カラースキームはジオメトリタイプごとに異なります。

    const schemes = symbologyColor.getSchemes({
  geometryType: featureLayer.geometryType, // point, polyline, polygon
  theme: "high-to-low",
});

関連スキル

  • arcgis-visualization - レンダラーとシンボルの手動設定
  • arcgis-feature-effects - ビジュアル効果とフィルター
  • arcgis-layers - レイヤーのタイプと設定
  • arcgis-core-maps - マップとビューのセットアップ

コメント

Markdown 対応