vue+echarts 区域地图绘制（街道）_echarts地图分块

2、需要用到的资源

geojson.io
阿里云地图API
北斗卫星软件下载

3、获取地图JSON

（1）阿里云获取–只精准到市区（–这里以深圳市为例）

下载到文件后，打开geojson.io，将上面下载的Json文件导入

导入后能看到深圳市的各个区，直接再存为kml文件

将kml文件再次导入，这时候右边生成的就是我们需要的数据，复制右边代码，保存到项目的json文件中
注意看这里选中的跟上面只导入json是不一样的

（2）北斗卫星软件获取–精准到街道（以深圳罗湖区示例）

下载后打开软件，直接搜索，这里是详细到街道的

将每个街道下载下来

拿到所有的街道后，打开geojson.io，将下载好的十个文件一个个导入，最后右侧生成的代码复制到一个json就完成了

4、vue中echarts 编写地图

这里直接上代码
首先是安装echarts引入到这个页面中，刚才上面保存下来的json文件也引入

import \* as echarts from "echarts";
import JSON from "../../node\_modules/echarts/map/json/szluohu.json";

初始化并定义地图
echarts 有一个**registerMap(mapName,geoJson,specialAreas)**方法，此方法有3个参数：
mapName：地图名称，这里的名称要与地图配置中 option–series–mapType 的值保持一致。
geoJson：geoJson 格式的数据
specialAreas：可选参数，具体参考官方文档。

let myChart = echarts.init(document.getElementById("id"));
echarts.registerMap("罗湖区", JSON, {}); 

完整代码

<template>
  <div>
    <h1>罗湖区地图</h1>
    <div
      class="left\_center\_map"
      id="id"
      style="width: 1000px; height: 600px"
    ></div>
  </div>
</template>
<script>
import \* as echarts from "echarts";
import JSON from "../../node\_modules/echarts/map/json/szluohu.json";
export default {
  data() {
    return {};
  },

  methods: {
    leftCenterMap() {
      let myChart = echarts.init(document.getElementById("id"));
      echarts.registerMap("罗湖区", JSON, {}); 
      // console.log(JSON)
      let option = {
        //工具箱
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          // 辅助线标志,分别是启用，删除上一条，删除全部,可设置更多属性
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        series: [
          {
            name: "罗湖区地图",
            type: "map",
            mapType: "罗湖区", // 自定义扩展图表类型
            label: {
              show: true,
            },
            data: [
              { name: "桂元街道", value: 50 },
              { name: "黄贝街道", value: 100 },


### 最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。



![css源码pdf](https://img-blog.csdnimg.cn/img_convert/cbf70c1fccd6d46440281abbf22798f4.webp?x-oss-process=image/format,png)

![JavaScript知识点](https://img-blog.csdnimg.cn/img_convert/115bf8ae912f94885b7a33ad78688041.webp?x-oss-process=image/format,png)
学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。



[外链图片转存中...(img-cOxegMiD-1719227879848)]

[外链图片转存中...(img-ma4qZqQU-1719227879849)]