2024年Web前端最全vue+echarts 区域地图绘制（街道）_echarts地图分块(2)，2024年最新逆袭面经分享

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

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

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

• 1、以下是本人参考别的博主的链接
• 2、需要用到的资源
• 3、获取地图JSON
• • [（1）阿里云获取–只精准到市区（–这里以深圳市为例）](#1httpdatavaliyuncomportalschoolatlasarea_selectorlat30332329214580188lng10672278672066881zoom35_10)
    • [（2）北斗卫星软件获取–精准到街道（以深圳罗湖区示例）](#2httpwwwbigemapcom_20)
• 4、vue中echarts 编写地图
• 5、效果

1、以下是本人参考别的博主的链接

参考链接1：vue中使用echarts 制作某市各个街道镇的地图
获取省市区getJson

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"));


### 结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

![html5](https://img-blog.csdnimg.cn/img_convert/7aedcab11878812e75ea06d98d493780.webp?x-oss-process=image/format,png)

题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-XbRH3pKa-1715378586179)]