**
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]
];
// style
var 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.name
var url=cityMap[params.name]
echarts.registerMap(params.name,url)
mapCharts_option.geo.map = params.name
mapCharts.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=this
var 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”,图片上的城市名称以及点标记的绘制将在下一篇博客展示
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
