ECharts地理坐标系属性介绍

向右看齐 2022-11-11 05:49 302阅读 0赞

在 ECharts 地理坐标系的属性设置中，如果您要将地理坐标系组件显示出来，那么，请使用 geo 组件的 show 属性。在 geo 组件中提供了两种类型的地图数据：javascript 文件与 JSON 文件。通过 geo 组件，您可以自定义地区的名称映射。更多关于地理坐标系组件的属性设置，我们将在下文中详细介绍。

## geo.**show**   |   boolean ##

\[ default: true \]

是否显示 ECharts 地理坐标系组件。

## geo.**map**   |   string ##

\[ default: ‘’ \]

地理坐标系组件的地图类型。

ECharts 3 中因为地图精度的提高，不再内置地图数据增大代码体积。由于 ECharts 之前提供下载的矢量地图的部分数据不符合国家《测绘法》规定，目前暂时无法下载地图。但是大家可以使用以百度地图为底图的形式。

ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。

下面是两种类型的使用示例：

JavaScript 引入示例

JSON 引入示例：

$.get('map/json/china.json', function (chinaJson) {
        echarts.registerMap('china', chinaJson);
        var chart = echarts.init(document.getElementById('main'));
        chart.setOption({
            series: [{
                type: 'map',
                map: 'china'
            }]
        });
    });

ECharts 使用 [geoJSON][] 格式的数据作为地图的轮廓，除了上述数据，你也可以通过其它手段获取地图的 [geoJSON][] 数据注册到 ECharts 中。参见示例 [USA Population Estimates][]

## geo.**roam**   |   boolean ##

\[ default: false \]

是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 ‘scale’ 或者 ‘move’。设置成 true 为都开启

## geo.**center**   |   Array ##

当前视角的中心点，用经纬度表示

例如：

center: [115.97, 29.71]

## geo.**aspectScale**   |   number ##

\[ default: 0.75 \]

这个参数用于 scale 地图的长宽比。

最终的 aspect 的计算方式是：geoBoundingRect.width / geoBoundingRect.height \* aspectScale

## geo.**boundingCoords**   |   Array ##

\[ default: null \]

二维数组，定义定位的左上角以及右下角分别所对应的经纬度。例如：

// 设置为一张完整经纬度的世界地图
    map: 'world',
    left: 0, top: 0, right: 0, bottom: 0,
    boundingCoords: [
        // 定位左上角经纬度
        [-180, 90],
        // 定位右下角经纬度
        [180, -90]
    ],

## geo.**zoom**   |   number ##

\[ default: 1 \]

当前视角的缩放比例。

## geo.**scaleLimit**   |   Object ##

滚轮缩放的极限控制，通过 min, max 最小和最大的缩放值，默认的缩放为1。

### geo.scaleLimit.**min**   |   number ###

最小的滚轮缩放值。

### geo.scaleLimit.**max**   |   number ###

最大的滚轮缩放值。

## geo.**nameMap**   |   Object ##

自定义地区的名称映射，如：

{
        'China' : '中国'
    }

## geo.**selectedMode**   |   boolean, string ##

\[ default: false \]

选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选’single’表示单选，或者’multiple’表示多选。

## geo.**zlevel**   |   number ##

\[ default: 0 \]

所有图形的 zlevel 值。

zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

## geo.**z**   |   number ##

\[ default: 2 \]

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低，而且不会创建新的 Canvas。

## geo.**left**   |   string, number ##

\[ default: ‘auto’ \]

组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。

如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐。

## geo.**top**   |   string, number ##

\[ default: ‘auto’ \]