在Vue里使用G2地图制作省级地图展示各市级数据

制作效果

一、相关依赖
1、npm安装G2

npm install @antv/g2 --save

2、npm安装data-set

npm install @antv/data-set --save

3、npm安装jquery

npm install jquery --save

4、npm安装lodash

npm install lodash --save

二、视图层代码
china和provice两个div是必须的，删除一个会报错。

<template><div><div style="position: relative;"><div id="china" style="display: none;width: 50%;height:400px;position: absolute;left: 0;top: 0;"></div><div id="province" style="width: 50%;height:400px;position: absolute;right: 0;top: 0;"></div></div></div>
</template>

三、JS代码

import $ from 'jquery';
import _ from 'lodash';
import G2 from '@antv/g2';
const DataSet = require('@antv/data-set');export default {mounted() {$.getScript('https://webapi.amap.com/maps?v=1.4.1&key=0d78256ea89beeb8c25d1cd047549d1f').then(()=>$.getScript('https://webapi.amap.com/ui/1.0/main.js?v=1.0.11')).then(()=>{// 调用高德 api 绘制底图以及获取 geo 数据var map = new AMap.Map('china', {zoom: 4});//.......这里省略官网案例代码})}
}

注：
1、JS部分只举例了一小部分代码，完整代码可到G2官网地图案例查找：G2官网地图链接
2、如案例运行报有关eslint错误，可关闭eslint。
3、这里把import * as $ from 'jquery'改为了import $ from 'jquery'因为运行时报$ not defined。

这里还有个自己添加的代码：

添加自定义数据：

整个案例是自己第一次尝试在Vue里使用G2地图，在网上没有看到相关完整案例所以分享出来供大家参考，如有不错误还请指正！

在Vue里使用G2地图制作省级地图展示各市级数据相关推荐

DataGear 轻松制作支持图表联动的全国地图、省级地图数据可视化看板
DataGear看板的图表联动功能,使您可以轻松制作支持图表联动的全国地图.省级地图数据可视化看板. 首先,新建两个数据集. 第一个是各省指标数据集,将用于绘制全国指标图表,它的SQL语句如下所示: ...
echart之全国地图切换省级地图
这是在基础地图地图的基础上结合echarts2的改进版本,echarts2中的版本只有左上角的全国地图的比较简单的实例代码. <一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实 ...
pyecharts全国地图和省级地图和水滴图
from pyecharts.charts import Map from pyecharts import options as opts 省级地图 value_1 = [155, 10, 66] ...
echarts 3d地图_用Echarts绘制地图-绘制省级地图
公司有一个大数据平台的需求,图表什么的都还好实现.主要就是当中的地图效果我没有做过所以耗费了我一些时间去查资料,万幸还是实现出来了,当然只是一个特别基础的图层没有散点没有下钻,但后面会逐步写出来,所以 ...
vue中基于echart地图功能省级地图下钻和返回、发射线、水波涟漪等功能展示
效果图展示-包含水波涟漪.发射线功能效果图点击地市.区县下钻功能 vue项目中main.js import echarts from 'echarts' import anhui from '../ ...
地图定义一个中间不动标注_高精度地图制作（三）
高精度地图主要用于无人驾驶路径规划,还可以应用于无人驾驶定位,ROI区域过滤等.接下来我们主要来看如何制作高精度地图. 高精度地图制作流程高精度地图的制作过程分为4个步骤: 地图采集点云地图制作 ...
#地图故事#教程1：如何制作标准地图
进入网站http://storymaps.arcgisonline.cn/,进行用户登录,输入用户名和密码.这时,也可不登录,先制作地图. 添加数据在首页点击"制图地图"导航栏或 ...
echart中国地图，多地图案例
1.echart,在网页中加载中国地图的方法,直接附上html代码 <!DOCTYPE html> <head><meta charset="utf-8&quo ...
echarts+vue中国地图,点击进入省级地图
先上效果图再说思路第一步: 生成中国地图第二步: 定义点击事件根据反参生成省级地图所需要的参数第三步: 将省级地图所需要的参数传入渲染方法重新渲染最后说步骤准备 1 npm echarts ...

在Vue里使用G2地图制作省级地图展示各市级数据

在Vue里使用G2地图制作省级地图展示各市级数据相关推荐

最新文章

热门文章