Web前端最全vue+echarts 区域地图绘制（街道）_echarts地图分块，计算机专业必看

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。

下载到文件后，打开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 },
              { name: "东门街道", value: 150 },
              { name: "翠竹街道", value: 200 },
              { name: "南湖街道", value: 250 },
              { name: "笋岗街道", value: 300 },
              { name: "东湖街道", value: 350 },
              { name: "莲塘街道", value: 400 },
              { name: "东晓街道", value: 450 },
              { name: "清水河街道", value: 500 },
            ],
            nameMap: {
              桂元街道: "桂元街道",
              黄贝街道: "黄贝街道",
#### 总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/topics/618166371)**

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础



![](https://img-blog.csdnimg.cn/img_convert/3e0d5b0f6a97b823cc1ef22ff1a18191.png)

第二阶段:移动端开发技术



![](https://img-blog.csdnimg.cn/img_convert/fc21db0a800494796dc6408ce1486031.png)



第三阶段:前端常用框架



![](https://img-blog.csdnimg.cn/img_convert/644efd4ddd0f8d43535f1982ec0da6e4.png)



*   推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。



*   大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。