geo

22 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

map property - register and use GeoJSON maps

The map property specifies a map name registered in echarts.registerMap(). Maps can be defined using GeoJSON format by passing an object with a geoJSON property to registerMap(). Example: echarts.registerMap('china', {geoJSON: geoJson}), then reference it with map: 'china' in series or geo component configuration. Third-party GeoJSON data can be used (such as from echarts-maps GitHub repository).

map property - SVG format support

Maps can also be registered using SVG format by passing an object with an svg property to echarts.registerMap(). Example: echarts.registerMap('topo', {svg: svg}), then reference it with map: 'topo'. SVG-based maps work with both map series and geo component.

projection object - custom map projections

Custom map projections are specified via a projection object with required methods: project (transforms [lng, lat] to projected coordinates) and unproject (transforms projected coordinates back to [lng, lat]). Optional stream method adapts the d3-geo stream interface for advanced algorithms like Antimeridian Clipping and Adaptive Sampling. Custom projections only work with GeoJSON data sources. Available since version 5.3.0.

projection.project function signature

Function signature: (coord: [number, number]) => [number, number]. Transforms latitude and longitude coordinates to other coordinate systems (typically screen/pixel coordinates).

projection.unproject function signature

Function signature: (point: [number, number]) => [number, number]. Transforms projected coordinates back to raw latitude and longitude coordinates.

projection.stream function - d3-geo interface adapter

Optional method that adapts the stream interface used in d3-geo library. Enables Antimeridian Clipping and Adaptive Sampling algorithms from d3-geo. When stream is provided, project and unproject methods are still required. Example: stream: projection.stream where projection is a d3-geo projection object.

Mercator projection example

Example custom Mercator projection: projection: { project: (point) => [point[0] / 180 * Math.PI, -Math.log(Math.tan((Math.PI / 2 + point[1] / 180 * Math.PI) / 2))], unproject: (point) => [point[0] * 180 / Math.PI, 2 * 180 / Math.PI * Math.atan(Math.exp(point[1])) - 90] }

d3-geo projection integration example

Example using d3-geo projection library: const projection = d3.geoConicEqualArea(); series: { type: 'map', projection: { project: (point) => projection(point), unproject: (point) => projection.invert(point) } }

aspectScale property default value and behavior

aspectScale has a default value of 0.75 and is used to scale aspect ratio of geo. It is ignored if a custom projection is set. The calculated map dimensions satisfy: pixelWidth / pixelHeight = lngSpan / latSpan * aspectScale. This compensates for distortion caused by longitude spacing shrinking at higher latitudes. Can be roughly calculated as aspectScale = Math.cos(center_latitude * Math.PI / 180).

boundingCoords property - define map coordinate bounds

boundingCoords is a two-dimensional array that defines the coordinate bounds of the map layout box. Format: [[left-top-lng, left-top-lat], [right-bottom-lng, right-bottom-lat]]. Default is null. Example for world map: boundingCoords: [[-180, 90], [180, -90]]

nameMap property - customize area names

nameMap is an object that provides name mapping for customized areas. Maps GeoJSON feature names to display names. Example: {' China': '中国'}

nameProperty - customize GeoJSON feature identifier

nameProperty specifies the custom property key in GeoJSON features used as the primary identifier. Default value is 'name'. Available since version 4.8.0. Example: nameProperty: 'NAME' connects data points to GeoJSON features via the NAME property instead of the default 'name' property.

selectedMode property - area selection behavior

selectedMode controls whether areas can be selected. Default is false (no selection). Can be set to 'single' for single area selection or 'multiple' for multiple area selection. Type: boolean | string.

itemStyle property - map area styling

The itemStyle property configures the appearance of map area borders and fills, including areaColor which sets the area fill color.

itemStyle.areaColor default - map area fill color

areaColor property has a default value of '#eee' (light gray) and specifies the fill color of map areas.

emphasis state - highlighted map area styling

The emphasis property configures the style of map areas in highlighted/hover state. Includes label and itemStyle sub-properties similar to the default state.

select state - selected map area styling

The select property configures the style of map areas in selected state. Includes label and itemStyle sub-properties with areaColor to specify the color of selected areas.

blur state - blurred map area styling (geo component only)

The blur property (available since version 5.1.0) configures the style of map areas in blurred state. Only applicable to geo component, not map series. Includes label and itemStyle sub-properties.

layoutCenter property - position geo/map component

layoutCenter specifies the center position of the rectangular area allocated to the geo or map component as an array [x, y] where values can be percentages or pixel values. Default is null. When set together with layoutSize, the left/right/top/bottom/width/height properties become invalid.

layoutSize property - size geo/map component

layoutSize specifies the size of the geo or map component. Can be a number or string representing pixel values or percentages of container dimensions. When layoutSize is larger than the aspect ratio of 1, width is set to 100; otherwise height is set to 100 to prevent exceeding a 100x100 area. Works with layoutCenter to position the component.

preserveAspect property - maintain map aspect ratio

The preserveAspect property controls whether the aspect ratio of the map is preserved when scaling. When true (default), the final calculated pixelWidth and pixelHeight satisfy pixelWidth / pixelHeight = lngSpan / latSpan * aspectScale (when no custom projection is applied).

clip property - hide map content outside allocated rect

The clip property (default false, available since version 6.0.0) controls whether to hide the outside part of the map with respect to the allocated rectangle. Type: boolean.

Give your agent this brain