vue中基于echarts和基于高德地图的两种地图下钻与上浮方式

基于echarts的地图下钻与上浮(浙江省为例)

 第一步：在<template>中构建承载echarts的dom节点<template><div id="mapChart" style="width: 100%;height: 95%;" ></div>
</template>
第二步：引入echarts并使用，引入浙江省json；import echarts from "echarts";Vue.use(echarts)//以上是使用echarts的前提条件import zhejiang from '../../../static/zhejiangPro/zhejiang';import hangzhou from '../../../static/zhejiangPro/hangzhou';import huzhou from '../../../static/zhejiangPro/huzhou';import jiaxing from '../../../static/zhejiangPro/jiaxing';import jinhua from '../../../static/zhejiangPro/jinhua';import lanzhou from '../../../static/zhejiangPro/lanzhou';import lishui from '../../../static/zhejiangPro/lishui';import ningbo from '../../../static/zhejiangPro/ningbo';import quzhou from '../../../static/zhejiangPro/quzhou';import shaoxing from '../../../static/zhejiangPro/shaoxing';import taizhou from '../../../static/zhejiangPro/taizhou';import wenzhou from '../../../static/zhejiangPro/wenzhou';import zhoushan from '../../../static/zhejiangPro/zhoushan';//以上是地图下钻的前提条件（这是我自己的json，大家根据自己的进行相应的更改）
第三步：  全局定义参数mapCharts和mapCharts_option，并在methods中初始化echarts地图---自定义initMap（）方法
var mapCharts；//接收初始化的dom节点（接收创建的echarts实例）var mapCharts_option;//图表配置
methods：{
//初始化echarts地图initMap（cityName）{var cityMap = {"杭州市": hangzhou,"丽水市": lishui,"兰州市": lanzhou,"台州市": taizhou,"嘉兴市": jiaxing,"宁波市": ningbo,"温州市": wenzhou,"湖州市": huzhou,"绍兴市": shaoxing,"舟山市": zhoushan,"衢州市": quzhou,"金华市": jinhua};var name = [cityName];var idx = 0;var pos = {leftPlus: 115,leftCur: 150,left: 198,top: 50};var line = [[0, 0],[8, 11],[0, 22]];// stylevar style = {font: '18px "Microsoft YaHei", sans-serif',textColor: '#eee',lineColor: 'rgba(147, 235, 248, .8)'};if(cityName==''||cityName=='浙江'){cityName='浙江'echarts.registerMap('浙江', zhejiang);}mapCharts=echarts.init(document.getElementById('mapChart'))mapCharts_option={graphic: [{type: 'group',left: pos.left,top: pos.top - 4,children: [{type: 'line',left: 0,top: -20,shape: {x1: 0,y1: 0,x2: 60,y2: 0},style: {stroke: style.lineColor,}}, {type: 'line',left: 0,top: 20,shape: {x1: 0,y1: 0,x2: 60,y2: 0},style: {stroke: style.lineColor,}}]},{id: '',type: 'group',left: pos.left+2,top: pos.top,children: [{type: 'polyline',left: 90,top: -12,shape: {points: line},style: {stroke: 'transparent',key: name[0]},onclick: function() {}}, {type: 'text',left: 0,top: 'middle',style: {text: '浙江',textAlign: 'center',fill:style.textColor,font: style.font},onclick:()=> {mapCharts.clear()echarts.registerMap('浙江', zhejiang);mapCharts_option.geo.map ='浙江'mapCharts.setOption(mapCharts_option,true);}}, {type: 'text',left: 0,top: 10,style: {text: 'zhejiang',textAlign: 'center',fill: style.textColor,font: '12px "Microsoft YaHei", sans-serif',},onclick: function() {}}]}],geo: {//设置地图map:cityName,zoom: '1.2',//缩放比例scaleLimit:{min:1,max:30},roam:true,label: {normal:{show:true,color:'#fff'},emphasis: {show: false}},itemStyle: {normal: {borderColor: 'rgba(147, 235, 248, 1)',borderWidth: 1,areaColor: {type: 'radial',x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色}, {offset: 1,color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色}],globalCoord: false // 缺省为 false},shadowColor: 'rgba(128, 217, 248, 1)',shadowOffsetX: -2,shadowOffsetY: 2,shadowBlur: 10},emphasis: {areaColor: '#389BB7',borderWidth: 0}},},series: []}mapCharts.clear()mapCharts.setOption(mapCharts_option,true);mapCharts.resize();mapCharts.on('click',(params)=>{//地图下钻if(cityMap[params.name]){this.cityName=params.namevar url=cityMap[params.name]echarts.registerMap(params.name,url)mapCharts_option.geo.map = params.namemapCharts.setOption(mapCharts_option,true);}             })}第三步：在mounted中调用initMap（）mounted(){setTimeout(()=>{this.initMap('浙江')//在进入页面时绘制地图},200)},

基于高德地图的地图下钻与上浮（浙江省为例）

注释：本例中上浮下钻后地图上的省市名称与坐标是从后台获取的。
第一步：vue中使用cdn引入高德地图，并在main.js中进行全局配置。（百度上有高德地图引入与配置方法，这里就不详细介绍）；
1） npm install vue-amap --save
2）main.js:
import VueAMap from ‘vue-amap’
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: ‘********************’,//自己在高德地图平台上的key值
plugin: [‘AMap.Autocomplete’, ‘AMap.PlaceSearch’, ‘AMap.Scale’, ‘AMap.OverView’, ‘AMap.ToolBar’, ‘AMap.MapType’, ‘AMap.PolyEditor’, ‘AMap.CircleEditor’,‘AMap.ControlBar’,‘AMap.MouseTool’,‘AMap.GeometryUtil’,‘AMap.DistrictSearch’],//需要的高德地图插件，需要什么插件添加什么插件（这里只是其中一部分）
// 默认高德 sdk 版本为 1.4.4
v: ‘1.4.4’,
uiVersion:‘1.0.11’
});
第二步：在vue页面中创建dom节点，初始化地图。
在这里插入代码片

 <template><div id="mapGeo" style="width: 100%;height: 95%;" ></div>
</template>

 <script>

  import noEmerIcon from "./img/emerManagement/noEmerIcon.png";import emerIcon from "./img/emerManagement/emerIcon.png";import noEmerIcon7 from "./img/emerManagement/icon7.png";import noEmerIcon10 from "./img/emerManagement/icon10.png";export default {data(){return{/******************地图******************/map:null,//高德地图实例sectionMarker:null,//点标记sectionTextMarker:null,//文字标记sectionMarker_data:[],//存放图标点标记sectionTextMarker_data:[],//存放省市名字点标记sectionText:null,//点标记上的内层涟漪sectionText2:null,//点标记上的外层涟漪dataPosition:'',//坐标adcode:'',//城市区码sectionIcon:'',//点标记样式sectionBorder:'',//点标记涟漪icon:{//点标记样式noEmerIcon:new AMap.Icon({image: noEmerIcon,imageSize: $(window).width()>=1600?new AMap.Size(15,15):new AMap.Size(10,10),offset: new AMap.Pixel(0, 0)}),noEmerIcon7:new AMap.Icon({image: noEmerIcon7,imageSize: $(window).width()>=1600?new AMap.Size(15,15):new AMap.Size(10,10),offset: new AMap.Pixel(0, 0)}),noEmerIcon10:new AMap.Icon({image: noEmerIcon10,imageSize: $(window).width()>=1600?new AMap.Size(15,15):new AMap.Size(10,10),offset: new AMap.Pixel(0, 0)}),emerIcon:new AMap.Icon({image: emerIcon,imageSize: $(window).width()>=1600?new AMap.Size(15,15):new AMap.Size(10,10),offset: new AMap.Pixel(0, 0)}),},border:{//点标记涟漪noEmerBorder:'5px solid green',noEmerIcon7:'5px solid orange',noEmerIcon10:'5px solid red',emerIcon:'5px solid red'},}},mounted（）{this.initGeoMap()；//加载地图,如果加载不出来可以用setTimeOut延时加载}，methods：{//*************************初始化地图*******************************************/initGeoMap(){let that=thisvar adcodes=[];//区码数组(用于绘制行政区域)//创建地图that.map = new AMap.Map("mapGeo", {resizeEnable: true,expandZoomRange: true,gestureHandling: "greedy",// zooms:[3,20],// zoom:8,defaultCursor: "pointer",//鼠标指针样式mapStyle: "amap://styles/f6e3818366ba5268d50ea3f2296eb3eb",// mapStyle:'amap://styles/7039f56cefc56223614dc153f8cc3e5e',// mapStyle:'amap://styles/c60b975548e3543842bdc515f68b5a5b',showLabel: true,// viewMode: "3D",// pitch:40});that.typhoonLayer = new AMap.OverlayGroup(); //覆盖物集合创建that.typhoonLayer.setMap(that.map)// //地图加载完成后执行的事件that.map.on("complete", () => {if(window.screen.width>=1600&&window.screen.height>900){that.map.setZoom(8)that.map.setCenter([119.846375,29.10946])}else{that.map.setZoom(7.5)that.map.setCenter([119.759863,29.3437])}setTimeout(()=>{$(".leftOne").css({ "opacity": "1", "top": "20px", "left": "20px"});$(".leftTwo").css({ "opacity": "1", "top": "35%", "left": "20px"});$(".leftThree").css({ "opacity": "1", "bottom": "20px", "left": "20px"});},500)});AMap.event.addListener(that.map, 'click', getLnglat); //点击事件function getLnglat(e) {var x = e.lnglat.getLng();var y = e.lnglat.getLat();console.log(x,y)}//行政区域AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {//创建一个实例var districtExplorer = new DistrictExplorer({eventSupport: true,map: this.map});//内部区域feature被点击districtExplorer.on("featureClick", (e, feature) => {console.log(111,feature,feature.properties)if(feature.properties.level=='city'){//只允许下钻到城市级别adcodes = []; //清空区码数组adcodes = [feature.properties.adcode]; //绘制地图区域**//地图下钻时需要进行的操作****that.getCityName(feature.properties.adcode);that.getScreenSectionPoint(feature.properties.adcode)**districtExplorer.loadMultiAreaNodes(adcodes, (error, areaNodes) => {//绘制多区域//设置定位节点，支持鼠标位置识别//注意节点的顺序，前面的高优先级districtExplorer.setAreaNodesForLocating(areaNodes);//清除已有的绘制内容districtExplorer.clearFeaturePolygons();for (var i = 0, len = areaNodes.length; i < len; i++) {renderAreaNode(areaNodes[i]);}//更新地图视野that.map.setFitView(districtExplorer.getAllFeaturePolygons()); })}});//外部区域被点击districtExplorer.on("outsideClick", e => {adcodes = [];adcodes = [330000 //浙江];that.getCityName('');that.getScreenSectionPoint('')districtExplorer.loadMultiAreaNodes(adcodes, (error, areaNodes) => {//设置定位节点，支持鼠标位置识别//注意节点的顺序，前面的高优先级districtExplorer.setAreaNodesForLocating(areaNodes);//清除已有的绘制内容districtExplorer.clearFeaturePolygons();for (var i = 0, len = areaNodes.length; i < len; i++) {renderAreaNode(areaNodes[i]);;}//更新地图视野 下钻上浮效果if(window.screen.width>=1600&&window.screen.height>900){that.map.setZoom(8)that.map.setCenter([119.703553,29.315624])}else{that.map.setZoom(7.5)that.map.setCenter([119.759863,29.3437])}});});//设置绘制的子区域和父区域的自身属性（包括线颜色，透明度等）function renderAreaNode(areaNode) {//绘制子级区划districtExplorer.renderSubFeatures(areaNode, function(feature, i) {return {cursor: "default",bubble: true,// strokeColor: "#00a4ce", //线颜色strokeColor: "#03d7a1",strokeOpacity: 1, //线透明度strokeWeight: 1.5, //线宽// fillColor: "#09152a", //填充色fillColor: "#072942",fillOpacity: 0.1 //填充透明度};});//绘制父区域districtExplorer.renderParentFeature(areaNode, {cursor: "default",bubble: true,// strokeColor: "#00a4ce", //线颜色strokeColor: "#03d7a1",strokeOpacity: 1, //线透明度strokeWeight: 1.5, //线宽// fillColor: "#09152a", //填充色fillColor: "#072942",fillOpacity: 0.5 //填充透明度});}adcodes = [];adcodes=[330000]//默认展示浙江省,根据需求进行变更,也可根据下方的角色权限进行变更**//根据角色和省份来绘制行政区域和添加点标记----这边如果有做角色权限的话可以参考,没有的话可以需要if (that.roles.roleId == "SYS_ADMIN" || that.roles.roleId == "province_user") { //角色为系统管理员或省级时显示全部区域adcodes=[330000]}if (that.roles.roleId == "city_user") {//角色为市级if (that.roles.orgId == "11HZ") {adcodes = [330100];} else if (that.roles.orgId == "11NB") {adcodes = [330200];} else if (that.roles.orgId == "11WZ") {adcodes = [330300];} else if (that.roles.orgId == "11JX") {adcodes = [330400];} else if (that.roles.orgId == "11HZ") {adcodes = [330500];} else if (that.roles.orgId == "11SX") {adcodes = [330600];} else if (that.roles.orgId == "11JH") {adcodes = [330700];} else if (that.roles.orgId == "11QZ") {adcodes = [330800];} else if (that.roles.orgId == "11ZS") {adcodes = [330900];} else if (that.roles.orgId == "11TZ") {adcodes = [331000];} else if (that.roles.orgId == "11LS") {adcodes = [331100];}}if(adcodes[0]==330000||adcodes.length==0){that.getCityName('');setTimeout(()=>{that.getScreenSectionPoint('')},300)}else{that.getCityName(adcodes[0]);that.getScreenSectionPoint(adcodes[0])}//根据角色和省份来绘制行政区域和添加点标记----这边如果有做角色权限的话可以参考,没有的话可以需要**//绘制多区域districtExplorer.loadMultiAreaNodes(adcodes, (error, areaNodes) => {//设置定位节点，支持鼠标位置识别//注意节点的顺序，前面的高优先级districtExplorer.setAreaNodesForLocating(areaNodes);//清除已有的绘制内容districtExplorer.clearFeaturePolygons();for (var i = 0, len = areaNodes.length; i < len; i++) {renderAreaNode(areaNodes[i]);}//更新地图视野 下钻效果that.map.setFitView(districtExplorer.getAllFeaturePolygons());});});},//*************************初始化地图结束*******************************************/
}

</script>

图片是用3d地图展示的效果,如果不需要可以隐藏 viewMode: “3D”,图片上的城市名称以及点标记的绘制将在下一篇博客展示

vue中基于echarts和基于高德地图的两种地图下钻与上浮方式相关推荐

vue中下载excel的使用，后端链接两种情况，一个是链接，一个是文件流
vue中下载excel使用一.这是第一种情况,后台链接地址返回的是一个url,这个时候我只要在导出按钮上绑定exportData()这个事件方法就好了 exportData() {this.time ...
VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
vue中使用ECharts实现中国地图配置详解（配官方配置地址）
前言: 1.实现自定义左下角的视觉映射组件(包括自定义颜色.文字.图元大小) 2.实现自定义悬浮提示框如下图所示: 实现步骤: 一.在vue中安装echarts 1.npm install echa ...
Vue中使用Echarts中的地图组件报错：TypeError: api.coord is not a function
首先,既然你是Vue开发者,那么其它的就不多讲,简短的说下本人是Java开发,所以有些地方可能不适用所有人,接受大家的建议. 一. 既然在Vue中使用Echarts,那将echarts引入到vue项 ...
vue中使用echarts实现地图颜色渐变及自定义浮窗内容
在这篇文章里vue中使用echarts自定义浮窗内容及样式_芝士焗红薯的博客-CSDN博客,总结了echarts的一些简单用法.这篇文章,一个是在原来的自定义浮窗内容上实现了地图的颜色渐变,一个是简化 ...
在Vue中使用eCharts的地图图表，及生成自定义地图数据（乡镇级）
如何在Vue中使用eCharts的地图图表,及如何生成自定义地图数据(乡镇级) 文章目录一.在Vue使用ECharts地图功能二.生成地图数据 1.安装Bigemap 程序 2.生成需要的各乡镇地 ...
echart高级使用_Vue:在Vue中使用echarts
前言公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用 ...
Vue中使用echarts图表插件
一.安装echarts依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.t ...
vue2.0_在vue中使用echarts图表插件
说明:本例子基于vue-cli脚手架搭建首先,安装echarts依赖 npm install echarts -S 注:安装NodeJS之后,使用npm来安装包使用的是国外的地址,经常会出现超时错误 ...

vue中基于echarts和基于高德地图的两种地图下钻与上浮方式

基于echarts的地图下钻与上浮(浙江省为例)

基于高德地图的地图下钻与上浮（浙江省为例）

vue中基于echarts和基于高德地图的两种地图下钻与上浮方式相关推荐

最新文章

热门文章