vue echarts 中国地图处理南海诸岛为简图

1.下载中国地图的json文件

中国地图json文件      <=访问这个网址,进入下图页面,选择图中标记的按钮,下载成功后的json文件为中文名称,将其改名为china.json

2.将json文件引入项目,展示效果如图

问题:

南海诸岛多占区域较长,视觉效果不好,期望在右下角出现南海诸岛的缩略图

解决方法:

1.显示南海诸岛缩略图

        问题原因在于地图注册的时候,China的首字母大写,改成小写,就会出现缩略图

        修改之后的效果图:

2.隐藏边界线

        json文件中,删掉下面所示代码

        删除之后的效果如下:

3.隐藏南洋诸岛

        这些岛屿都属于“海南省”,所以找到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]
          ]
        ]
      ]

最终修改后的效果

  • 20
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
如果你想在 Vue 中使用 ECharts 制作全国地图并实现切换,可以按照以下步骤进行: 1. 安装 ECharts 使用 npm 安装 ECharts: ``` npm install echarts --save ``` 2. 导入 ECharts 在需要使用地图的组件中导入 ECharts: ```javascript import echarts from 'echarts' ``` 3. 引入中国地图 在组件中引入中国地图: ```javascript import chinaMapData from 'echarts/map/json/china.json' ``` 4. 在模板中添加地图容器 在模板中添加一个 div 容器,用于放置地图: ```html <div id="map-container"></div> ``` 5. 初始化地图 在组件的 mounted 钩子函数中,初始化地图: ```javascript mounted() { // 初始化地图 this.initMap() }, methods: { initMap() { // 获取地图容器 const container = document.getElementById('map-container') // 初始化 echarts 实例 const chart = echarts.init(container) // 注册地图数据 echarts.registerMap('china', chinaMapData) // 绘制地图 chart.setOption({ series: [ { type: 'map', map: 'china' } ] }) } } ``` 6. 切换地图 你可以使用 Vue 的数据绑定功能来实现切换地图。例如,你可以添加一个按钮,点击按钮后切换到世界地图: ```html <button @click="switchMap">切换地图</button> ``` 然后在组件中添加 switchMap 方法: ```javascript switchMap() { // 获取地图容器 const container = document.getElementById('map-container') // 初始化 echarts 实例 const chart = echarts.init(container) // 注册地图数据 echarts.registerMap('world', worldMapData) // 绘制地图 chart.setOption({ series: [ { type: 'map', map: 'world' } ] }) } ``` 注意,这里的 worldMapData 指的是世界地图的数据,需要事先在组件中引入。
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值