echarts 中国地图点击进入相应省份 海南省里的南海诸岛换成诸岛简图

本文介绍了如何使用DataV.GeoAtlas工具修改中国地图JSON数据,以去除海南区域内的岛屿,并为海南省添加一个简化的南海诸岛图形。通过编辑`China.json`文件移除特定坐标,然后在`hainan.json`中删除三沙市数据,同时插入简化的南海诸岛多边形,实现了地图展示的调整。
摘要由CSDN通过智能技术生成

DataV.GeoAtlas地理小工具系列  在这里下载了中国以及各省的json文件,但是下面海南那块国家海岸线里有很多岛我不想要,明明已经有个南海诸岛的框了,在那占位置不好看,这时就要改变下China.json里的数据了,因为那些岛是属于海南的,所以在China.json数据里找到海南省

 然后,把"coordinates"替换成如下代码:

"coordinates": [
  [
    [
      [110.106396, 20.026812],
      [110.042339, 19.991384],
      [109.997375, 19.980136],
      [109.965346, 19.993634],
      [109.898825, 19.994196],
      [109.855093, 19.984073],
      [109.814441, 19.993072],
      [109.76147, 19.981261],
      [109.712195, 20.017253],
      [109.657993, 20.01163],
      [109.585312, 19.98801],
      [109.526797, 19.943573],
      [109.498464, 19.873236],
      [109.411001, 19.895184],
      [109.349407, 19.898561],
      [109.300748, 19.917693],
      [109.25948, 19.898561],
      [109.255784, 19.867045],
      [109.231147, 19.863105],
      [109.159082, 19.79048],
      [109.169553, 19.736411],
      [109.147379, 19.704863],
      [109.093792, 19.68965],
      [109.048829, 19.619764],
      [108.993394, 19.587065],
      [108.92872, 19.524468],
      [108.855424, 19.469182],
      [108.806148, 19.450561],
      [108.765496, 19.400894],
      [108.694047, 19.387346],
      [108.644772, 19.349518],
      [108.609048, 19.276661],
      [108.591186, 19.141592],
      [108.598577, 19.055633],
      [108.630606, 19.003017],
      [108.637997, 18.924346],
      [108.595497, 18.872256],
      [108.593033, 18.809386],
      [108.65278, 18.740258],
      [108.663866, 18.67337],
      [108.641077, 18.565614],
      [108.644772, 18.486738],
      [108.68912, 18.447571],
      [108.776583, 18.441894],
      [108.881293, 18.416344],
      [108.905315, 18.389087],
      [108.944735, 18.314107],
      [109.006329, 18.323198],
      [109.108575, 18.323766],
      [109.138756, 18.268081],
      [109.17448, 18.260125],
      [109.287813, 18.264671],
      [109.355566, 18.215221],
      [109.441182, 18.199303],
      [109.467051, 18.173718],
      [109.527413, 18.169169],
      [109.584696, 18.143579],
      [109.661688, 18.175424],
      [109.726362, 18.177698],
      [109.749767, 18.193618],
      [109.785492, 18.339672],
      [109.919767, 18.375457],
      [110.022629, 18.360121],
      [110.070672, 18.376025],
      [110.090382, 18.399309],
      [110.116867, 18.506602],
      [110.214186, 18.578662],
      [110.246215, 18.609859],
      [110.329366, 18.642185],
      [110.367555, 18.631977],
      [110.499366, 18.651824],
      [110.499366, 18.751592],
      [110.578206, 18.784458],
      [110.590525, 18.838841],
      [110.585597, 18.88075],
      [110.619474, 19.152334],
      [110.676756, 19.286264],
      [110.706321, 19.320153],
      [110.729727, 19.378878],
      [110.787009, 19.399765],
      [110.844292, 19.449996],
      [110.888023, 19.518827],
      [110.920668, 19.552668],
      [111.008747, 19.60398],
      [111.061718, 19.612436],
      [111.071573, 19.628784],
      [111.043856, 19.763448],
      [111.013675, 19.850159],
      [110.966248, 20.018377],
      [110.940994, 20.028499],
      [110.871393, 20.01163],
      [110.808567, 20.035808],
      [110.778386, 20.068415],
      [110.744509, 20.074036],
      [110.717408, 20.148778],
      [110.687843, 20.163947],
      [110.655814, 20.134169],
      [110.562191, 20.110006],
      [110.526467, 20.07516],
      [110.495054, 20.077408],
      [110.387265, 20.113378],
      [110.318279, 20.108882],
      [110.28933, 20.056047],
      [110.243135, 20.077408],
      [110.144585, 20.074598],
      [110.106396, 20.026812]
    ]
  ]
]

这样中国地图南海诸岛部分就改好了

在点击海南省进入后发现它的展示是这样的,海南省只占据了一小块,其他都是南海诸岛,现在我需要把诸岛改成简图形式

 

 首先我们需要在hainan.json里找到三沙市,然后把它整个删掉(红框圈出来的部分)

这样点击进入海南省它就变成了这样:

但是不能在海南省里把南海诸岛丢了,这时可以给海南省加个南海诸岛的简图

{
    "type": "Feature",
    "properties": {
    "cp": [111.5, 18.3],
    "name": "南海诸岛",
    "childNum": 1
    },
    "geometry": {
    "type": "Polygon",
    "coordinates": [
        [
        [111.2001953125, 18.7744140625],
        [111.2705078125, 18.716796875],
        [111.3505859375, 18.7109375],
        [111.6, 18.8310546875],
        [111.2001953125, 18.8310546875],
        [111.2001953125, 18.7744140625]
        ],
        [
        [111.330078125, 18.6796875],
        [111.390625, 18.6904296875],
        [111.3603515625, 18.6376953125],
        [111.310546875, 18.626953125],
        [111.330078125, 18.6796875]
        ],
        [
        [111.3203125, 18.55859375],
        [111.3408203125, 18.568359375],
        [111.3408203125, 18.5478515625],
        [111.3251953125, 18.5380859375],
        [111.3251953125, 18.5380859375],
        [111.3203125, 18.55859375]
        ],
        [
        [111.3603515625, 18.443359375],
        [111.3701171875, 18.443359375],
        [111.4208984375, 18.4228515625],
        [111.4208984375, 18.4228515625],
        [111.3603515625, 18.443359375]
        ],
        [
        [111.2607421875, 18.3173828125],
        [111.2802734375, 18.3271484375],
        [111.2802734375, 18.3173828125],
        [111.2607421875, 18.3173828125]
        ],
        [
        [111.4306640625, 18.1806640625],
        [111.490234375, 18.2021484375],
        [111.5, 18.2021484375],
        [111.4501953125, 18.1806640625],
        [111.4306640625, 18.1806640625]
        ],
        [
        [111.5703125, 18.2705078125],
        [111.630859375, 18.3330078125],
        [111.640625, 18.3330078125],
        [111.5908203125, 18.2705078125],
        [111.5703125, 18.2705078125]
        ],
        [
        [111.6806640625, 18.4169921875],
        [111.7109375, 18.4365234375],
        [111.7109375, 18.40625],
        [111.69140625, 18.40625],
        [111.6806640625, 18.4169921875]
        ],
        [
        [111.7109375, 18.5380859375],
        [111.7109375, 18.5224609375],
        [111.73046875, 18.5224609375],
        [111.73046875, 18.5029296875],
        [111.73046875, 18.5029296875],
        [111.7109375, 18.5380859375]
        ],
        [
        [111.720703125, 18.6328125],
        [111.75, 18.6435546875],
        [111.75, 18.61328125],
        [111.740234375, 18.61328125],
        [111.720703125, 18.6328125]
        ],
        [
        [111.7802734375, 18.7060546875],
        [111.7900390625, 18.7060546875],
        [111.7607421875, 18.685546875],
        [111.7607421875, 18.685546875],
        [111.7802734375, 18.7060546875]
        ],
        [
        [111.6844775390625, 18.82571662050116],
        [111.71821044921875, 18.767616176328035],
        [111.75155639648438, 18.827016441626743],
        [111.6844775390625, 18.82571662050116]
        ],
        [
        [111.2001953125, 18.7744140625],
        [111.2109375, 18.7744140625],
        [111.2109375, 18.107421875],
        [111.830078125, 18.107421875],
        [111.830078125, 18.825078125],
        [111.5908203125, 18.8250546875],
        [111.5908203125, 18.8310546875],
        [111.8408203125, 18.8310546875],
        [111.8408203125, 18.1025390625],
        [111.2001953125, 18.1025390625],
        [111.2001953125, 18.7744140625]
        ]
    ]
    }
}

 

 这样就ok了

  • 11
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
ECharts 是一个强大的 JavaScript 数据可视化库,它提供了丰富的地图组件,包括中国地图。如果你在使用 ECharts 地图展示数据时去掉海南省的岛屿部分,你可以通过设置地图的系列配置来实现。 首先,确保你已经包含了 ECharts 地图的文件,例如 `echarts-gl.js` 或者 `world.js`,这些文件包含了中国地图的地理信息。然后,在配置地图时,可以通过 `visualMap` 和 `series` 的属性来控制显示的内容。 以下是一个示例配置,说明如何移除海南岛屿: ```javascript var myChart = echarts.init(document.getElementById('main')); // 假设你已经有了一个地理编码数据或者颜色映射数据 var option = { map: 'china', // 使用 'china' 作为中国地图的标识 visualMap: { show: false, // 关闭默认的视觉映射,防止自动填充颜色 pieces: [ { piecewise: [{ max: 1.0, color: 'white' }] } // 设置所有颜色为白色,模拟没有颜色区分的效果 ] }, series: [{ name: '地图', type: 'map', data: [], // 这填写你的省份数据,不包含海南 mapType: 'china', // 保持和地图标识一致 roam: true, // 保持地图可缩放和平移 label: { normal: { show: false // 隐藏默认标签 } } }] }; myChart.setOption(option); ``` 在这个配置中,`visualMap` 的 `pieces` 属性设置了所有的颜色为白色,模拟了地图上区域颜色的缺失效果。同时,`series.data` 中只包含不包括海南省份数据。 如果你有具体的数据源或者更复杂的自定义需求,你可能需要根据实际情况调整代码。有关于 ECharts 的其他问题或者需要进一步的帮助,请随时提问:
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值