Symbol 符号和Graphic 要素

1 Symbol 符号

1 点符号 MarkerSymbol

1 简单点（最常用）

import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'

const pointSymbol = new SimpleMarkerSymbol({
  type: 'simple-marker',
  style: 'circle',       // circle | square | cross | x | diamond
  color: '#ff4444',      // 填充色
  size: 12,              // 大小
  outline: {             // 边框
    color: '#fff',
    width: 2
  }
})

2 图片点（图标 / 自定义图片）

import PictureMarkerSymbol from '@arcgis/core/symbols/PictureMarkerSymbol'

const imgSymbol = new PictureMarkerSymbol({
  type: 'picture-marker',
  url: 'https://xxx.png',
  width: 24,
  height: 24
})

2 线符号（LineSymbol）

 import SimpleLineSymbol from '@arcgis/core/symbols/SimpleLineSymbol'

const lineSymbol = new SimpleLineSymbol({
  type: 'simple-line',
  style: 'solid',        // solid | dash | dot | dash-dot
  color: '#2684ff',
  width: 2
})

3 面符号（FillSymbol）

 import SimpleFillSymbol from '@arcgis/core/symbols/SimpleFillSymbol'

const fillSymbol = new SimpleFillSymbol({
  type: 'simple-fill',
  color: 'rgba(38, 132, 255, 0.2)', // 半透明填充
  outline: {                        // 边框线
    color: '#2684ff',
    width: 2
  }
})

4 文字符号（TextSymbol）

import TextSymbol from '@arcgis/core/symbols/TextSymbol'

const textSymbol = new TextSymbol({
  type: 'text',
  text: '我是文字',
  color: '#fff',
  font: {
    size: 14,
    family: 'Microsoft YaHei'
  },
  haloColor: '#000',   // 文字描边（醒目必备）
  haloSize: 1
})

1 Graphic 要素 = 位置 (geometry) + 样式 (symbol) + 属性 (attributes)

地图上看得见的「一个东西」 点 / 线 / 面 / 文字 全都靠它

1 创建

const graphic = new Graphic({
  geometry:   ,  // 位置：点 / 线 / 面
  symbol:     ,  // 样式：长什么样
  attributes: {}, // 数据：id、name、type...
  popupTemplate: {} // 弹窗模板（可选）
})

2 常用Graphic 属性

graphic.geometry      // 位置（点/线/面）
graphic.symbol        // 样式
graphic.attributes    // 数据 {id,name...}
graphic.popupTemplate // 弹窗
graphic.layer         // 属于哪个图层

3 4 种最常用 Graphic

1 点 Graphic

import Point from '@arcgis/core/geometry/Point'
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'

const graphic = new Graphic({
  geometry: new Point({ x: 116, y: 39 }),
  symbol: new SimpleMarkerSymbol({
    color: 'red',
    size: 14,
    outline: { color: 'white', width: 2 }
  }),
  attributes: { id: 1, name: '点位' }
})
 

2 线 Graphic

import Polyline from '@arcgis/core/geometry/Polyline'
import SimpleLineSymbol from '@arcgis/core/symbols/SimpleLineSymbol'

const graphic = new Graphic({
  geometry: new Polyline({
    paths: [[116,39], [117,40]]
  }),
  symbol: new SimpleLineSymbol({
    color: 'blue',
    width: 3
  })
})
 

3 面 Graphic

import Polygon from '@arcgis/core/geometry/Polygon'
import SimpleFillSymbol from '@arcgis/core/symbols/SimpleFillSymbol'

const graphic = new Graphic({
  geometry: new Polygon({
    rings: [[116,39], [117,39], [117,40], [116,39]]
  }),
  symbol: new SimpleFillSymbol({
    color: 'rgba(0,150,255,0.2)',
    outline: { color: 'blue', width: 2 }
  })
})
 

4 文字 Graphic（标注）

import Point from '@arcgis/core/geometry/Point'
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'

const graphic = new Graphic({
  geometry: new Point({ x: 116, y: 39 }),
  symbol: new SimpleMarkerSymbol({
    color: 'red',
    size: 14,
    outline: { color: 'white', width: 2 }
  }),
  attributes: { id: 1, name: '点位' }
})
 

4 Graphic 常用操作

// 1. 添加到图层
graphicsLayer.add(graphic)

// 2. 修改位置
graphic.geometry = new Point(...)

// 3. 修改样式
graphic.symbol = newSymbol

// 4. 修改属性
graphic.attributes.name = '新名称'

// 5. 打开弹窗
// 必须给 location，features 才会自动读 popupTemplate
view.popup.open({
  location: graphic.geometry, // 弹窗定位点
  features: [graphic]         // 要显示的要素（可以多个）
})