基于高德地图为底图实现全国、省、地级市下钻
目录
简介
效果图
具体实现
注意点
不足点
简介
由于前面通过echarts和百度地图都没能实现理想效果从而只能另寻方案，最终实现方案：全国省采用echarts渲染，单个省、地级市采用高德地图为地图渲染（有人可能会疑问为什么不全部采用高德地图渲染，在上一篇中我有解释到用高德地图渲染全国省时，由于数据量过于太大会导致卡顿）
效果图
全国
单个省
可通过放大地图，展示 行政区详情
地级市
具体实现
该项目基于vue开发（原生js原理一样）
1、全国省
参考echarts4.0渲染全国省，这个相当比较简单，下面提供部分核心代码
<EChart :auto-resize="true" :options="options" v-show="!isShowAMap" @click="getSubMap" ref="theEchart"></EChart>options:和echarts官网一样配置相应的参数即可
isShowAMap:是否展示echarts，用于和高德地图的动态切换
getSubMap: 获取子地图（即：高德地图渲染单个省、地级市）
2、单个省、地级市
<div id="theMap" class="b-map" :style="{display:isShowAMap ? 'block':'none'}"></div> /*** 初始化 高德地图* */initMap(){this.theMap = new AMap.Map('theMap',{resizeEnable: true, // 是否监控地图容器尺寸变化mapStyle:'amap://styles/0f97185f111252fe66c244d53f2d0cdd', //自定义底图zoom:6,//缩放级别})// 关闭 mapTip 区域详情提示this.theMap.on('mouseout',()=>{this.mapTip.isShowMapTip = false})// 监控地图放大级别，从而控制覆盖层Text 显隐this.theMap.on('zoomchange',()=>{let ele = document.getElementsByClassName('amap-markers')[0]if(ele){let status = window.getComputedStyle(ele).displayif(this.theMap.getZoom() > 8 && status === 'none'){document.getElementsByClassName('amap-markers')[0].className = 'amap-markers'}if(this.theMap.getZoom() < 8 && status === 'block'){document.getElementsByClassName('amap-markers')[0].className = 'amap-markers amap-markers-none'}}})},/*** 渲染 每个区域块 地图数据* */renderEveryAreaData(){if(this.areaInfo.curLevel == 'china'){// 渲染全国地图 echartsthis.renderChinaMap()}else{// 渲染省、市地图 AMapthis.renderSubMap()}},/*** 渲染 子地图（省、市） 高德* */renderSubMap(){const loading = this.$loading(this.zParam.pageLoading);try{this.isShowAMap = truethis.isChinaMap = falsethis.theMap.clearMap(); //清除地图覆盖物AMap.service(['AMap.DistrictSearch','AMap.Geocoder'],()=> {let district = new AMap.DistrictSearch({subdistrict: 1, //返回下一级行政区extensions: 'all', //返回行政区边界坐标组等具体信息 level: 'district' //查询行政级别为 区（无效）})let geocoder = new AMap.Geocoder({city: '全国'// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode})this.curMapData.forEach(item => {this.renderAMap(item ,district,geocoder)})})loading.close()}catch (err){console.log(err)loading.close()}},/*** 根据 data 渲染高德 地图省市* */renderAMap(item,district,geocoder){// 特别行政区、台湾 由于无法获取市级区域 不下钻if(this.areaInfo.province == '香港特别行政区' || this.areaInfo.province == '澳门特别行政区' || this.areaInfo.province == '台湾'){color = '#f1f2f3'item = {name:this.areaInfo.province,value:1,noText:true}}//获取行政区域,//注意：存在相同 行政区（重庆江北、杭州宁波江北），地级市与县级市同名（峨眉山市、眉山市），高德地图是模糊匹配的（即：搜索眉山市 会匹配到 眉山市、峨眉山市）district.search(item.name, (status, result) => {if(status != 'complete'){return}let bounds = []// 常规 获取单个省、市、区（不存在重名情况）if(result.districtList.length === 1){bounds = result.districtList[0].boundariesthis.renderAMapByPolygon(item ,bounds ,result.districtList[0].center)return}// 地级市与县级市模糊匹配（峨眉山市、眉山市）,且都不属于同一层级if(this.areaInfo.curLevel === 'province' && result.districtList.length > 1){for(let i=0;i<result.districtList.length;i++){if(result.districtList[i].level === 'city'){bounds = result.districtList[i].boundariesthis.renderAMapByPolygon(item ,bounds ,result.districtList[0].center)return}}}// 相同行政区（重庆江北、杭州宁波江北）,且都属于同一层级if(this.areaInfo.curLevel === 'city' && result.districtList.length>1){for(let i=0;i<result.districtList.length;i++){geocoder.getAddress([result.districtList[i].center.lng,result.districtList[i].center.lat], (status, addrResult)=> {if(status === 'complete'){let addr = addrResult.regeocode.addressComponentif(addr.city === this.areaInfo.city || addr.province.slice(0,addr.province.length-1) === this.areaInfo.province ){bounds = result.districtList[i].boundariesthis.renderAMapByPolygon(item ,bounds ,result.districtList[0].center)return}}})}}})},/*** 渲染 覆盖层Polygon、Text* */renderAMapByPolygon(item ,bounds ,center){let color = ''// 获取 区域填充色for(let key in this.colors){if(item.value >= parseFloat(key)){color = this.colors[key]break}}if (bounds) {for (let i = 0;i < bounds.length; i++) {let polygon = new AMap.Polygon({map: this.theMap,strokeWeight: 1,path: bounds[i],strokeColor: '#666666',fillColor: color,cursor:'pointer'});// 香港、澳门、台湾暂不支持下钻地图if(this.areaInfo.province != '香港特别行政区' && this.areaInfo.province != '澳门特别行政区' && this.areaInfo.province != '台湾'){polygon.on('click', () => {this.getAMapSubArea(item.name)})polygon.on('mouseover', (e) => {this.mapTip.isShowMapTip = truethis.mapTip.info = item.name + '：'+ this.zMethod.formatPercent(item.value)})polygon.on('mouseout', (e) => {this.mapTip.isShowMapTip = falsethis.mapTip.info = item.name + '：'+ this.zMethod.formatPercent(item.value)})}}// 覆盖层Text，展示区域信息详情new AMap.Text({text: item.name + (item.noText===true ? '': '(' + this.zMethod.formatPercent(item.value)+')') ,map: this.theMap,position:[center.lng,center.lat],style:{color : "#000",fontSize : "12px",backgroundColor:'transparent',border:'none',},})}this.theMap.setFitView();//地图自适应},说明：为提高用户体验，初始时不展示行政区详细信息，通过放大地图或鼠标hover再展示详细，且鼠标移动到具体行政区时高亮。echarts 与AMap切换通过动态控制显隐，返回上一层原理也一样，高德地图单个省下钻地级市通过对行政区的点击动态获取行政区与数据来实现，参考renderSubMap、renderAMap这两个核心方法，高德地图的具体配置使用可参考官网，本文主要提供思路与方案。
注意点
1、存在相同行政区（重庆江北区、杭州宁波江北区）
2、高德地图是模糊匹配的（即：搜索眉山市 会匹配到 眉山市、峨眉山市），不支持级联方式匹配，如宁波市不能写成浙江省宁波市
不足点
1、暂时无法获取香港、澳门、台湾下级的行政区
2、渲染有部分延迟
3、由于高德地图行政区获取是单表模糊匹配不支持级联查找，就导致无法获取街道详情（全国存在大量的同名街道、乡镇），也就无法支持下钻乡镇详情
基于高德地图为底图实现全国、省、地级市下钻相关推荐
- 基于高德地图的描点操作，监听地图缩放，展示合理数量的marker
原文:基于高德地图的描点操作,监听地图缩放,展示合理数量的marker 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/lx583274568/art ...
- 只用一个marker 替换 高德_Android基于高德地图完全自定义Marker的实现方法
前言 相信做地图社交类APP开发的大家都知道,一般情况下,为了整体的美观和用户体验度,我们需要定制化Marker的样式.本文中实现的方式都是基于高德地图的,百度地图也类似,大家可以照葫芦画瓢,废话不多 ...
- python交通调查数据处理_GitHub - unlimitbladeworks/traffic-monitor: 基于高德地图的交通数据分析...
traffic-monitor(基于高德地图的交通数据分析) 设计需求在于每天上班早高峰期,每次都提前出门,虽然有地图可以实时查看路况,但是再过一阵时间 就会异常的堵车如果通过数据监控分析每天指定路段 ...
- 基于高德地图JsAPI进行浏览器精确定位，实现手机端考勤打卡功能
前言: 由于项目需求需要在项目中实现手机端(基于网页)考勤打卡功能,最初考虑使用H5自身定位功能,但尝试过后,效果很不稳定.然后尝试使用百度地图JsAPI,百度家的稳定倒是很稳定,没想到的是定位位置和 ...
- vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
- 基于高德地图实现可编辑的电子围栏功能【多边形围栏】
上次基于高德地图实现了圆形围栏功能,但限于实地使用场景,故近期重新升级到多边形电子围栏,经过反复测验及优化,目前可正常使用. 1.主要功能: 多边形围栏的CURD: 自定义变数,形状: 自动计算变数及 ...
- android 基于高德地图的轨迹回放
android 基于高德地图的轨迹回放 前段时间公司项目有一个需求,就是需要看到设备上传之后的轨迹路线,并且可以实现回放的整个过程,功能包括路线回放.地图位置插点.回放之后的轨迹标记颜色.回放加速等功 ...
- 南邮Android实验报告三：基于高德地图的综合应用
实验三 基于高德地图的综合应用 一.目的要求 1.学会安卓应用中涉及位置服务时的解决方案. 2.练习在使用第三方插件时,遇到版本不兼容时的处理步骤和方法. 二.实验环境 1.硬件配置:Intel Co ...
- 基于高德地图SDK实现跑步路线踩点
前言 现在市面上有很多跑步的app,主要的功能大致是记录你的跑步路线以及你的跑步状况,速度距离等,大多是使用了高德地图,百度地图之类的SDK. 之前学校里有一款课外体育考勤的跑步APP,叫运动 ...
最新文章
- 浅析．Net下的AppDomain编程
- 进击的UI------------网络判断
- 单元测试之关于JaCoCo和PowerMock冲突导致类覆盖率为0的问题
- spring定时任务详解（@Scheduled注解）多线程讲解
- 推荐一个好用的Chrome扩展，专门处理xml的，名叫XML Tree
- 安卓键盘加上数字_Android自定义键盘的实现（数字键盘和字母键盘）
- [译] 论 Rust 和 WebAssembly 对源码地址索引的极限优化
- 【LeetCode笔记 - 每日一题】334. 递增的三元子序列（Java、偏思路）
- C++ 定义 string
- Vue.js 内部运行机制之总结 常见问题解答
- linux 源码编译安装apache
- c# datagridview 中DataSource的使用总结
- 加速度传感器与车祸报警解决方案
- 【C++】类模板实现扩容数组并且分离，抽取出hpp文件
- 机器学习和传统编程有什么区别？✅
- 设计模式-单例模式扩展(程序员学习之路-架构之路)
- Oracle常用操作【自己的练习】
- sql 删除重复数据 只留一条
- 王者荣耀AI绝悟完全体对战开启：英雄随便选，论文已被NeurIPS收录
- 泡泡龙游戏c语言程序,七彩泡泡龙小程序-微信七彩泡泡龙小程序小游戏v1.0-游戏宝手游网...