【Vue基础-数字大屏】地图

最新推荐文章于 2024-01-02 22:09:40 发布

林月明

最新推荐文章于 2024-01-02 22:09:40 发布

阅读量468

点赞数

文章标签：信息可视化

本文链接：https://blog.csdn.net/qq_42294095/article/details/133645297

版权

一、阿里云数据可视化平台

地图数据https://datav.aliyun.com/portal/school/atlas/area_selector

二、操作步骤

1、打开阿里云数据可视化平台，复制中国地图数据链接

2、在浏览器中打开中国地图数据链接，复制json数据

3、在assets静态目录下创建mapData.js文件,创建变量如下，并将复制的json粘贴在等号后面

4、在vue文件中引用mapData，并使用地图

其他常用属性：

zoom:10,//当前视角的缩放比例，越大比例越大
center:[116.403694,39.92307],//当前视角的中心的，用经纬度表示

经纬度坐标获取：

打开百度地图，点击最下方地图开放平台，在开发文档中点击坐标拾取器，此时页面自动跳转到地图，再点击地图中想要拾取的位置坐标，坐标将被拾取到右上方文本栏中，复制即可。

5、展示效果

三、学习教程

https://www.bilibili.com/video/BV14u411D7qK?p=34&vd_source=841fee104972680a6cac4dbdbf144b50

优惠劵

林月明

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Vue基础-数字大屏】地图

地图
复制链接

扫一扫

以shiro 权限来允许进入地图（google地图,阿里云地图）的访问示例

03-03

以shiro 权限来允许进入地图（google地图,阿里云地图）的访问示例,确实很好的一个资源

利用Echarts+阿里云地图选择器绘制可交互的行政区划地图

Achernar0208的博客

06-25

1万+

利用Echarts+阿里云地图选择器绘制可交互的行政区划地图

参与评论您还未登录，请先登录后发表或查看评论

阿里云地图添加点线面

weixin_30702413的博客

04-06

1、参考实例网址：http://ditu.aliyun.com/jsdoc/map/examples.html 2、实例代码： /** * --------add marker--------------------- */ var amarker,addMarkerListener; function activateAddMarker(){ addMar...

使用阿里云可视化地图平台下载json格式的中国地图

最新发布

isluya的博客

01-02

2676

echarts.registerMap("china",json文档的内容);如果想要拥有js格式，新建一个文本文档，输入以下内容。点击链接进入阿里云的地图小工具系列。下载成功后即是json格式文件。然后将后缀改为js即可。

阿里云地图json串获得地址

weixin_61503139的博客

10-10

134

DataV.GeoAtlas地理小工具系列

Python-阿里云地图的爬取

m0_54214980的博客

12-23

2356

from IPython.core.interactiveshell import InteractiveShell InteractiveShell.ast_node_interactivity = "all" # 代码块显示所有执行结果引言这里通过循环爬取阿里云省级地图，并处理交叉点，再通过对行政区域代码递归，爬取市级地图，县级地图。最后爬取民政部南海九段线数据。每次爬去后都保存json格式文件。对于4个直辖市这种，省级和市级都是相同的名字和行政区域代码。对于港澳台这种，省级、市级、县..

Vue3使用Echarts实现自定义地图（使用阿里云数据可视化平台）

qq_54334713的博客

02-20

4095

Vue3使用Echarts实现自定义地图过程

DataV阿里云可视化（地图下钻、数据获取） - 文档篇

草巾冒小子的博客

10-31

4852

（由DataV提供：中国地图【省份】），具体城市可通过DataV下钻获取；参考博文： echarts实现全国及各省市地图（内附地图json文件） datav.aliyun.com

阿里云DataV数据可视化工具的简单使用与地图组件区域下钻热力图下钻上钻控制缩放比例demo

qq_39228609的博客

04-26

4303

阿里云DataV数据可视化工具的简单使用与地图组件区域下钻热力图下钻上钻控制缩放比例demo 简介: DataV数据可视化 DataV数据可视化旨让更多的人看到数据可视化的魅力，帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用，满足您会议展览、业务监控、风险预警、地理信息分析等多种业务的展示需求。----aliyun 创建视图: 添加一个下拉框,一个地图组件,一区域热力图组件,一个输入框组件;实现下拉框选择地区,地图组件可以下钻到指定位置并自动调整比例功能解决区域下钻热力图上钻到全国时地

vue2-gmap-custom-marker:Vue Google Map自定义标记组件

05-05

对于使用vue-google-maps的旧项目，您必须坚持使用该项目标签。您可能会在package.json中强制该插件的5.6.2版本保持兼容性，直到您想要切换到gmap-vue为止。对于那些使用带有此插件的群集的用户，新版本可能会...

vue-baidu-map离线百度地图，并附带jar包免费下载百度瓦片数据

02-23

1.vue-baidu-map在线地图代码不用改动，只用按照文档添加baidu-api.js和baidu-init.js，并在vue依赖包 node_modules文件找到，修改vue-baidu-map的 index.js文件就能完成离线配置 2.jar包可以免费下载百度地图瓦片...

vue大屏三屏显示包含地图组件

05-25

直接npm install ， npm run serve 就可以启动了

vue2-leaflet-传单地图的Vue 2组件。-Vue.js开发

05-27

Vue2Leaflet Vue2Leaflet是Vue框架JavaScript库，其中包装了Leaflet，可轻松创建React式地图。如何在Vue2Leaflet中安装npm Vue2Leaflet是Vue框架JavaScript库，其中包装了Leaflet，可轻松创建React式地图。如何...

【大屏可视化模板】vue-dataV-echarts-elementul大屏数据可视化方案，屏幕适配方案等比例缩放

04-08

用了vue - echarts - datav-elementul大屏数据可视化方案，包含屏幕适配方案等比例缩放，等比例缩放的屏幕适配方法。可以让你不需要大量使用百分比或者转换之类的方法去写屏幕自适应大小，而是可以用部分px直接写...

搭建VUE大屏展示项目（四） VUE集成cesium地图

zhaohan___的博客

08-13

2734

文章目录1.vue引入cesium2.安装环境3.组件例子4.界面参考文献 1.vue引入cesium npm install cesium 去cesium注册账号和token 注册账号： https://cesium.com/ion/signup/ 注册token： https://cesium.com/ion/tokens 安装拷贝插件，因为vue3.0版本太高所以需要降低部分插件版本 npm uninstall less-loader npm install [email protected]

echarts map （echarts地图）使用总结

HurryUpp的博客

12-11

1万+

echarts 地图的各种使用场景

一个抓取阿里云GEOJSON地图区域数据的NODEJS脚本

专注前端、专注互联网、分享原创的博客

12-20

2985

中国的区域划分大致是这么个结构：中国->省->市->区->县->镇->乡。对于我们一般的开发者或者中小型企业，要我们自己来收集这些区域信息，显然是不可能的。这个时候我们就得借助一些成熟的地图数据，比如百度地图、高德地图、阿里云数据等等。对于绝大部分的需求，能取到省市区的数据已经完全满足，这篇文章就使用脚本来获取阿里云的json数据。

Vue中使用Echarts地图实现某省市区县地图的展示功能

qq_39891453的博客

12-28

9172

Vue中使用Echarts地图实现某省市区县地图的展示功能。

三步教你免费下载省,市,区县行政区Shp数据

热门推荐

Gerry-wu

02-06

10万+

摘要：一般非专业的GIS应用通常会用到省市等行政区区划边界空间数据做分析，本文简单介绍了如何在互联网上下载省，市，区县的shp格式空间边界数据，并介绍了一个好用的在线数据转换工具，并且开源。一、首先，到阿里云提供的地图选择器网站选择想要下载的行政区(链接http://datav.aliyun.com/tools/atlas/), 网站提供的是json格式数据，也就是GeoJson格式的多边形地...

vue-baidu-map 离线地图

08-13

vue-baidu-map 是一个基于百度地图的 Vue.js 组件库，用于在 Vue.js 的项目中集成百度地图。它提供了一系列的组件与指令，方便开发者在网页中使用百度地图的各种功能。但是，vue-baidu-map 目前还无法直接实现离线地图功能。因为百度地图官方并没有提供针对 vue-baidu-map 的离线地图方案。百度地图的离线地图功能依赖于官方的 JavaScript API，并且需要下载离线地图数据包才能实现离线使用。在 vue-baidu-map 中，可以使用 vue-baidu-map 的 Map 组件来显示地图，并且可以通过设置 center 和 zoom 属性来移动地图及调整缩放级别。但是，由于离线地图功能没有直接集成在 vue-baidu-map 中，所以在使用离线地图时，需要开发者自行处理地图数据的下载与加载。要实现离线地图，可以按照以下步骤进行： 1. 下载百度地图的离线地图数据包。 2. 使用百度地图 JavaScript API 的离线地图加载方法，将地图数据加载到页面中。 3. 使用 vue-baidu-map 的 Map 组件，通过设置 center 和 zoom 属性来显示加载的离线地图。需要注意的是，在使用离线地图时，需要合法地获取相应地图数据的使用权，遵守百度地图的使用规定。同时，由于离线地图数据包较大，需要提前下载并将其加载到项目中，因此需要对项目的资源和性能做出合理评估。总之，虽然 vue-baidu-map 目前无法直接实现离线地图功能，但通过结合百度地图的离线地图功能及 vue-baidu-map 的组件和指令，开发者可以自行处理地图数据的下载与加载，实现离线地图显示的需求。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交