echarts地图显示的名字修改显示位置

3,371 阅读3分钟

image.png

全部修改

在Echarts中,地图标注(包括省份、城市等地级行政区划名称)的显示位置可以通过以下两种方式修改:

1. 修改地图标注偏移量

可以通过在geo(或map)组件中设置label标签的offset属性来控制标注的偏移量,从而实现自定义标注位置。

示例代码:

option = {
    geo: {
        map: 'china',
        label: {
            show: true,
            offset: [-10, 0], // 控制标注偏移量,左偏10,上下不变
        },
        itemStyle: {
            ...
        },
        ...
    },
    ...
};

2. 使用富文本标签

Echarts中可以使用富文本标签来对标注进行样式、格式等自定义。通过设置formatter属性中的html标签,并通过css样式控制标注位置,可以实现更加灵活的位置控制。

示例代码:

option = {
    geo: {
        map: 'china',
        label: {
            show: true,
            formatter: function(param) {
                return '<div style="text-align:center">' + param.name + '</div><div style="margin-top:-20px">' + param.value + '</div>';
            },
            textStyle: {
                color: '#333',
            },
        },
        itemStyle: {
            ...
        },
        ...
    },
    ...
};

在上述代码中,通过将标注文本和数值分别放在两个div中,并设置margin-top:-20px的样式,控制标注位置上移。

这些方法可以根据实际使用场景和需求进行调整和扩展,以实现更好的地图标注体验。

部分修改

1、修改data的方式

如果只是想修改某个地名的位置,可以通过geo(或map)组件中data属性中的对应项进行修改。例如,将“北京市”标注位置偏移10个像素向右:

option = {
    geo: {
        map: 'china',
        label: {
            show: true,
        },
        data: [
            {
                name: '北京市',
                value: [116.397969, 39.908172],
                label: {
                    offset: [10, 0], // 将北京市的标注偏移10个像素向右
                },
            },
            ...
        ],
        ...
    },
    ...
};

在上述代码中,通过在北京市的data项中设置label标签的offset属性,将标注位置偏移10个像素向右。

当然,如果需要对多个地名的位置进行修改,也可以在data属性中逐个进行设置,以达到定制化的目的。

2、直接修改geojson的cp

在GeoJSON中,"cp"通常指的是"Center Point",表示GeoJSON对象包围盒(bounding box)的中心点坐标值

包围盒中心点坐标可以通过以下公式计算得出:

center_point = [(min_x + max_x) / 2, (min_y + max_y) / 2]

其中,min_x、max_x、min_y、max_y分别表示GeoJSON对象边界框的最小横坐标、最大横坐标、最小纵坐标、最大纵坐标。

对于不同类型的GeoJSON对象,包围盒和中心点的计算方式可能有所不同。例如,对于"Point"类型的对象,包围盒即为一个点,可以直接将中心点设置为该点的坐标值。对于"MultiPolygon"类型的对象,包围盒可能由多个坐标点表示,并且可能存在多个内环,需要通过遍历多个坐标集合来计算中心点坐标。

通过使用中心点坐标,可以缩放到该区域,并将对象居中于地图视图。

列子:

"properties": {
   "adcode": 440400,
   "name": "珠海市",
   "center": [113.553986, 22.224979],
   "centroid": [113.337286, 22.160135],
   "childrenNum": 3,
   "level": "city",
   "parent": {
      "adcode": 440000
   },
   "subFeatureIndex": 3,
   "acroutes": [100000, 440000]
},

这个珠海市就会显示在中心

image.png

"properties": {
   "adcode": 440400,
   "name": "珠海市",
   "center": [113.553986, 22.224979],
   "centroid": [113.337286, 22.160135],
   "cp": [113.349141,22.155844],
   "childrenNum": 3,
   "level": "city",
   "parent": {
      "adcode": 440000
   },
   "subFeatureIndex": 3,
   "acroutes": [100000, 440000]
},

这个珠海市就会显示在我们给的坐标位置

image.png