uniapp上echarts地图钻取

2023-10-12 20:01
文章标签 uniapp 地图 echarts 钻取

本文主要是介绍uniapp上echarts地图钻取，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1: 预期效果

通过切换地图 , 实现地图的钻取效果
image.pngimage.pngimage.png

2: 实现原理以及核心方法/参数

一开始是想利用更换地图数据的形式进行地图钻取 , 这就意味着我们需要准备全国30多个省份的地图数据 , 由于一开始考虑需要适配小程序端 , 如此多的地图文件增加了程序的体积 , 如果使用接口调用 , 会影响响应速度 ; 所以最后想到了使用一张地图数据 , 通过地图中心点定位 + 缩放 + 主动触发高亮

方法解读: **
监听到地图点击事件/地图切换事件 ,
通过center属性定位当前省份 , 通过zoom属性指定放大层级(让当前省份占据页面) ,
接下来需要将其他的省份隐藏掉 , 这里通过itemStyle样式设置 , 将地图的透明度调整为0 ,
这时候发现我们选择的当前省份也隐藏掉了 , 这时候就要借助另一个属性 emphasis ,
在emphasis 中可以将当前选中的地图区块重新定义样式 ;
如果我们是通过地图点击触发的钻取 , 当前省份区块是可以被选中的 , 但是如果是select选择器 , 需要调用echarts的dispatchAction**接口进行主动触发

_this.$refs['canvas'].$curChart.dispatchAction({type: 'highlight',name: _this.cityList[e.target.value]['name']
})

参数如下:

geo: {map: "china", // 映射的地图name// roam: 'scale', // scale缩放/ move拖动 / true 缩放+拖动center: '', // 中心点位置坐标scaleLimit: {min: 1,max: 10}, // 缩放比例限制zoom: 1.2, // 当前缩放比例top: 50,label: { // 地图文本样式show: true,fontSize: "8",color: "rgba(0,0,0,0.7)"},itemStyle: { // 地图区块样式borderColor: "rgba(0, 0, 0, 0.2)",opacity: 1},emphasis: { // 当前选中地图区块样式itemStyle: {opacity: 1,areaColor: "#f2d5ad",shadowOffsetX: 0,shadowOffsetY: 0,borderWidth: 2}},selectedMode: false , // 多选开关silent: false // 是否静默状态},

3: 代码

demo.vue

<template><view><view style="height:34px;"></view><!-- <uchartsDemo1></uchartsDemo1> --><view class="uni-title uni-common-pl">地区选择器</view><view class="uni-list"><view class="uni-list-cell"><view class="uni-list-cell-left">当前选择</view><view class="uni-list-cell-db"><picker @change="bindPickerChange" :value="index" :range="cityList" :range-key="'name'"><view class="uni-input">{{cityList[index]['name']}}</view></picker></view></view></view><uni-ec-canvas class="uni-ec-canvas" id="line-chart" ref="canvas" canvas-id="lazy-load-chart" :ec="ec"></uni-ec-canvas></view>
</template><script>import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas'import cityMap from './cityMap.js'import chartsOption from './chartsOption.js'let pageInstance = {}export default {data() {return {index: 0,cityList: [{name:'全国'},...cityMap.cityPointList],ec: {lazyLoad: true,option: chartsOption.mapOption}}},mounted() {this.$refs['canvas'].init()},components: {uniEcCanvas},methods:{// 城市切换bindPickerChange (e) {const _this = this// 根据name获取当前城市数据 , 并修改option// 获取城市坐标let point = cityMap.cityPointMap.get(_this.cityList[e.target.value]['name']) || []let data = cityMap.cityDataMap.get(_this.cityList[e.target.value]['name']) || {}// 组装optionlet mapOption = JSON.parse(JSON.stringify(chartsOption.mapOption))mapOption.geo.center = pointmapOption.geo.zoom = 6mapOption.geo.silent = truemapOption.geo.label.show = falsemapOption.geo.itemStyle.opacity = 0mapOption.series[0].data = [data]_this.ec.option = mapOptionsetTimeout(function(){_this.$refs['canvas'].$curChart.dispatchAction({type: 'highlight',name: _this.cityList[e.target.value]['name']})},10)},BindEvent (e) {}}}
</script>
<style scoped>.uni-ec-canvas {width: 750upx;height: 750upx;display: block;}
</style>

cityMap.js – 存放所有省份的中心点 , 数据 , 自定义的配置

let cityMap = {}cityMap.cityPointList = [{"cp": [121.0254, 23.5986],"name": "台湾","childNum": 6},{"cp": [115.4004, 37.9688],"name": "河北","childNum": 3},{"cp": [112.4121, 37.6611],"name": "山西","childNum": 1},{"cp": [117.5977, 44.3408],"name": "内蒙古","childNum": 2},{"cp": [122.3438, 41.0889],"name": "辽宁","childNum": 16},{"cp": [126.4746, 43.5938],"name": "吉林","childNum": 1},{"cp": [128.1445, 48.5156],"name": "黑龙江","childNum": 2},{"cp": [120.0586, 32.915],"name": "江苏","childNum": 1},{"cp": [120.498, 29.0918],"name": "浙江","childNum": 45},{"cp": [117.2461, 32.0361],"name": "安徽","childNum": 3},{"cp": [118.3008, 25.9277],"name": "福建","childNum": 18},{"cp": [116.0156, 27.29],"name": "江西","childNum": 1},{"cp": [118.7402, 36.4307],"name": "山东","childNum": 13},{"cp": [113.4668, 33.8818],"name": "河南","childNum": 1},{"cp": [112.2363, 31.1572],"name": "湖北","childNum": 3},{"cp": [111.5332, 27.3779],"name": "湖南","childNum": 3},{"cp": [113.4668, 22.8076],"name": "广东","childNum": 24},{"cp": [108.2813, 23.6426],"name": "广西","childNum": 2},{"cp": [109.9512, 19.2041],"name": "海南","childNum": 1},{"cp": [102.9199, 30.1904],"name": "四川","childNum": 2},{"cp": [106.6113, 26.9385],"name": "贵州","childNum": 3},{"cp": [101.8652, 25.1807],"name": "云南","childNum": 1},{"cp": [88.7695, 31.6846],"name": "西藏","childNum": 1},{"cp": [109.5996, 35.6396],"name": "陕西","childNum": 1},{"cp": [95.7129, 40.166],"name": "甘肃","childNum": 2},{"cp": [96.2402, 35.4199],"name": "青海","childNum": 2},{"cp": [105.9961, 37.3096],"name": "宁夏","childNum": 2},{"cp": [84.9023, 41.748],"name": "新疆","childNum": 1},{"cp": [116.4551, 40.2539],"name": "北京","childNum": 1},{"cp": [117.4219, 39.4189],"name": "天津","childNum": 1},{"cp": [121.4648, 31.2891],"name": "上海","childNum": 6},{"cp": [107.7539, 30.1904],"name": "重庆","childNum": 2},{"cp": [115.5784, 22.1057],"name": "香港","childNum": 5},{"cp": [113.5715, 21.1983],"name": "澳门","childNum": 1}]
cityMap.cityDataList = [{name: "南海诸岛",value: 0},{name: '北京',value: 54},{name: '天津',value: 13},{name: '上海',value: 40},{name: '重庆',value: 75},{name: '河北',value: 13},{name: '河南',value: 83},{name: '云南',value: 11},{name: '辽宁',value: 19},{name: '黑龙江',value: 15},{name: '湖南',value: 69},{name: '安徽',value: 60},{name: '山东',value: 39},{name: '新疆',value: 4},{name: '江苏',value: 31},{name: '浙江',value: 104},{name: '江西',value: 36},{name: '湖北',value: 1052},{name: '广西',value: 33},{name: '甘肃',value: 7},{name: '山西',value: 9},{name: '内蒙古',value: 7},{name: '陕西',value: 22},{name: '吉林',value: 4},{name: '福建',value: 18},{name: '贵州',value: 5},{name: '广东',value: 98},{name: '青海',value: 1},{name: '西藏',value: 0},{name: '四川',value: 44},{name: '宁夏',value: 4},{name: '海南',value: 22},{name: '台湾',value: 3},{name: '香港',value: 5},{name: '澳门',value: 5}]
cityMap.cityPointMap = new Map()
cityMap.cityDataMap = new Map()
cityMap.cityPointList.forEach(e=>{let {name,cp} = ecityMap.cityPointMap.set(name,cp)
})
cityMap.cityDataList.forEach(e=>{cityMap.cityDataMap.set(e.name,e)
})export default cityMap

chartsOption.js – 存在地图option配置

let chartsOption = {}// 地图
chartsOption.mapOption = {visualMap: {min: 0,max: 1000,right: 10,bottom: 40,showLabel: !0,text: ["高", "低"],pieces: [{gt: 100,label: "> 100",color: "#7f1100"}, {gte: 10,lte: 100,label: "100",color: "#ff5428"}, {gte: 1,lt: 10,label: "10",color: "#ff8c71"}, {gt: 0,lt: 1,label: "1",color: "#ffd768"}, {value: 0,color: "#ffffff"}],show: !0},geo: {map: "china",// roam: 'scale', // scale缩放/ move拖动center: '', // 中心点位置scaleLimit: {min: 1,max: 10}, // 缩放限制zoom: 1.2, // 缩放比例top: 50,label: {show: true,fontSize: "8",color: "rgba(0,0,0,0.7)"},itemStyle: {borderColor: "rgba(0, 0, 0, 0.2)",opacity: 1},emphasis: {itemStyle: {opacity: 1,areaColor: "#f2d5ad",shadowOffsetX: 0,shadowOffsetY: 0,borderWidth: 2}},selectedMode: false ,silent: false},series: [{name: "汽车销量",type: "map",geoIndex: 0,data: [{name: "南海诸岛",value: 0},{name: '北京',value: 54},{name: '天津',value: 13},{name: '上海',value: 40},{name: '重庆',value: 75},{name: '河北',value: 13},{name: '河南',value: 83},{name: '云南',value: 11},{name: '辽宁',value: 19},{name: '黑龙江',value: 15},{name: '湖南',value: 69},{name: '安徽',value: 60},{name: '山东',value: 39},{name: '新疆',value: 4},{name: '江苏',value: 31},{name: '浙江',value: 104},{name: '江西',value: 36},{name: '湖北',value: 1052},{name: '广西',value: 33},{name: '甘肃',value: 7},{name: '山西',value: 9},{name: '内蒙古',value: 7},{name: '陕西',value: 22},{name: '吉林',value: 4},{name: '福建',value: 18},{name: '贵州',value: 5},{name: '广东',value: 98},{name: '青海',value: 1},{name: '西藏',value: 0},{name: '四川',value: 44},{name: '宁夏',value: 4},{name: '海南',value: 22},{name: '台湾',value: 3},{name: '香港',value: 5},{name: '澳门',value: 5}]}]
}export default chartsOption

这篇关于uniapp上echarts地图钻取的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/198134。

相关文章

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题：墙体两侧特征混淆误匹配，导致建图和定位偏差，表现为过门跳变、外月台走歪等 ·解决思路：预期的根治方案IGICP需要较长时间完成上线，先使用切分地图的工程化方案，即墙体两侧切分为不同地图，在某一侧只使用该侧地图进行定位 方案思路 切分原理：切分地图基于关键帧位置，而非点云。 理论基础：光照是直线的，一帧点云必定只能照射到墙的一侧，无法同时照到两侧实践考虑：关
阅读更多...
uniapp设置微信小程序的交互反馈

uniapp设置微信小程序的交互反馈

链接：uni.showToast(OBJECT) | uni-app官网 (dcloud.net.cn) 设置操作成功的弹窗： title是我们弹窗提示的文字 showToast是我们在加载的时候进入就会弹出的提示。 2.设置失败的提示窗口和标签 icon：'error'是设置我们失败的logo 设置的文字上限是7个文字，如果需要设置的提示文字过长就需要设置icon并给
阅读更多...
基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例

基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例

系列文章目录 1.基于SSM的洗衣房管理系统+原生微信小程序+LW参考示例 2.基于SpringBoot的宠物摄影网站管理系统+LW参考示例 3.基于SpringBoot+Vue的企业人事管理系统+LW参考示例 4.基于SSM的高校实验室管理系统+LW参考示例 5.基于SpringBoot的二手数码回收系统+原生微信小程序+LW参考示例 6.基于SSM的民宿预订管理系统+LW参考示例 7.基于
阅读更多...
全英文地图/天地图和谷歌瓦片地图杂交/设备分布和轨迹回放/无需翻墙离线使用

全英文地图/天地图和谷歌瓦片地图杂交/设备分布和轨迹回放/无需翻墙离线使用

一、前言说明 随着风云局势的剧烈变化，对我们搞软件开发的人员来说，影响也是越发明显，比如之前对美对欧的软件居多，现在慢慢的变成了对大鹅和中东以及非洲的居多，这两年明显问有没有俄语或者阿拉伯语的输入法的增多，这要是放在2019年以前，一年也遇不到一个人问这种需求场景的。 地图应用这块也是，之前的应用主要在国内，现在慢慢的多了一些外国的应用场景，这就遇到一个大问题，我们平时主要开发用的都是国内的地
阅读更多...
基于springboot+vue+uniapp的“共享书角”图书借还管理系统小程序

基于springboot+vue+uniapp的“共享书角”图书借还管理系统小程序

开发语言：Java框架：springboot+uniappJDK版本：JDK1.8服务器：tomcat7数据库：mysql 5.7（一定要5.7版本）数据库工具：Navicat11开发软件：eclipse/myeclipse/ideaMaven包：Maven3.3.9 系统展示 后台登录界面 管理员功能界面 出借者管理 图书信息管理 图书归还管理 出租收入管理
阅读更多...
uniapp小程序下载缓存服务器上的图片

uniapp小程序下载缓存服务器上的图片

1. 使用uni.downloadFile,但是注意下载图片的地址里的域名，需要在微信公众平台里面的downloadFile合法域名进行配置。 export default function downloadAndCacheImage(imageUrl, name) {return new Promise((resolve, reject) => {console.log("imageUrl",
阅读更多...
Imageview在百度地图中实现点击事件

Imageview在百度地图中实现点击事件

1.首先第一步，需要声明的全局有关类的引用 private BMapManager mBMapMan; private MapView mMapView; private MapController mMapController; private RadioGroup radiogroup; private RadioButton normalview; private RadioBu
阅读更多...
MMO地图传送

MMO地图传送

本篇由以下四个点讲解： 创建传送点 传送点配置 编辑器扩展：传送点数据生成 传送协议与实现 创建传送点 建碰撞器触发 //位置归零 建一个传送门cube放到要传送的位置（这个teleporter1是传出的区域 这是从另一张地图传入时的传送门 创建一个脚本TeleporterObject给每个传送cube都绑上脚本 通过脚本，让传送门在编辑器下面还能绘制出来
阅读更多...
uniapp，vite整合windicss

uniapp，vite整合windicss

官方文档：https://weapp-tw.icebreaker.top/docs/quick-start/frameworks/hbuilderx 安装： npm i -D tailwindcss postcss autoprefixer# 初始化 tailwind.config.js 文件npx tailwindcss initnpm i -D weapp-tailwindcss# 假
阅读更多...
UniApp实现漂亮的音乐歌词滚动播放效果

UniApp实现漂亮的音乐歌词滚动播放效果

在现代的音乐播放应用中，歌词的展示和滚动播放已经成为了一个非常常见的功能。今天，我们将通过UniApp来实现一个漂亮的歌词滚动播放功能。我们将使用UniApp提供的组件和API来完成这个任务。 页面结构 在页面的模板部分，我们需要创建一个音频播放器和歌词展示区域。使用<scroll-view>组件来实现歌词的滚动效果。 <template><view class="audio-co
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2