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

1、以下是本人参考别的博主的链接
2、需要用到的资源
3、获取地图JSON
- （1）[阿里云](http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5)获取--只精准到市区（--这里以深圳市为例）
- （2）[北斗卫星软件](http://www.bigemap.com/)获取--精准到街道（以深圳罗湖区示例）
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><divclass="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: {桂元街道: "桂元街道",黄贝街道: "黄贝街道",东门街道: "东门街道",翠竹街道: "翠竹街道",南湖街道: "南湖街道",笋岗街道: "笋岗街道",东湖街道: "东湖街道",莲塘街道: "莲塘街道",东晓街道: "东晓街道",清水河街道: "清水河街道",},},],};myChart.setOption(option);},},mounted() {this.leftCenterMap();},
};
</script>
<style>
</style>

5、效果

vue+echarts 区域地图绘制（街道）相关推荐

【vue项目使用echarts实现区域地图绘制，且可点击单独区域】
vue项目使用echarts实现区域地图绘制,且可点击单独区域 - 菜鸟程序员的总结 - 博客园
Vue Echarts 显示地图且根据坐标设置标注点
Vue Echarts 显示地图且根据坐标设置标注点哎哟我去我就想用Echarts在页面上画一张地图,这张地图显示全国,然后我有几个坐标点的经纬度信息,需要在这个地图上根据经纬度标注在Echart ...
Vue+Echarts+百度地图小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...
vue+echarts中国地图+省市级地图（全程教学，你也可以）
echarts+vue中国地图,点击进入省级地图 VUE+Echarts+省市地图钻取(简洁版,超详细) 以上两篇来自站内,是本文的主要参考来源. 首先上才艺首先需要引入 echarts 包 npm ...
vue+ echarts实现地图（中国地图）
** vue+ echarts实现地图(中国地图) ** <div class="myChartMap" id="myChartMap" >< ...
Vue+Echarts+百度地图API
Vue+Echarts+百度地图API 不容易啊,又注册了一个地图账户使用npm安装方式去百度地图官网申请key,也就是地图API密钥AK 在vue项目的public文件夹中的index.html ...
vue echarts全国地图和区域地图 map
vue echart map 全国和地区数据此案例并不是全国省市区下钻只是展示全国或省或市的echarts地图如果想看全国省市区下钻,请看此连接链接: 全国省市区下钻. 效果图如下(可通过省市区 ...
vue使用谷歌地图绘制图形以及地图选点功能
因做加拿大配送项目得用到谷歌地图效果图: 第一步: 首先访问谷歌地图以及文档需要加速插件你得在谷歌浏览器扩展程序里添加一个加速插件(如图): 最好充值vip,不然免费的加速通道不稳定本人是在vu ...
vue:echarts自定义地图
前言 echarts有地图,但是echarts的地图只支持到三级(省市区),所以有的时候,我们就需要自己定制化地图准备我们绘制地图前,我们需要地图的点位置,这些有几种方式 1.我们进入http:/ ...

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

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

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

2、需要用到的资源

3、获取地图JSON

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

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

4、vue中echarts 编写地图

5、效果

vue+echarts 区域地图绘制（街道）相关推荐

最新文章

热门文章