Echarts+vue3+高德渲染地图
一:安装
npm install echarts
二:渲染地图
1. html
< template> < div class = "content" > < div ref= "myChartsRef" id= "map" style= "width: 100%;height: 560px;" > < / div> < / div>
< / template>
2. 高德地图获取geo数据
const getGeoJson = ( adcode: any ) => { return new Promise ( ( resolve, reject ) => { AMapLoader. load ( { key: '*******************' , version: '1.4.4' , AMapUI: { version: '1.1' , plugins: [ ] , } , } ) . then ( ( ) => { new AMapUI. loadUI ( [ 'geo/DistrictExplorer' ] , DistrictExplorer => { var districtExplorer = new DistrictExplorer ( ) ; districtExplorer. loadAreaNode ( adcode, function ( error, areaNode ) { if ( error) { console. error ( error) ; reject ( error, 'error 191' ) ; return ; } let Json = areaNode. getSubFeatures ( ) ; let mapJson = { features: [ ] , } ; mapJson. features = Json; resolve ( mapJson) ; } ) } ) } ) . catch ( err => { console. log ( err) } ) } )
}
3. echarts的基础配置项
let mapOption = { tooltip: { trigger: "item" , formatter : ( p ) => { let val = p. value; let txtCon = "<div style='text-align:left'>" + p. name"</div>" ; return txtCon; } , } , geo: [ { name: "SUI" , type: "map" , map: "SUI" , zoom: 1.6 , center: [ 105.191 , 36.582 ] , roam: false , scaleLimit: { min: 1.4 , max: 100 , } , label: { normal: { show: false , color: "rgb(249, 249, 249)" , } , emphasis: { show: true , color: "#fff" , } , } , itemStyle: { normal: { areaColor: "#1f4b77" , borderColor: "#53D9FF" , borderWidth: 1 , shadowBlur: 15 , shadowColor: "rgb(58,115,192)" , shadowOffsetX: 0 , shadowOffsetY: 0 , } , emphasis: { areaColor: "#487de1" , borderWidth: 1.6 , shadowBlur: 25 , } , } , } , ] , series: [ ]
} ;
4. 地图飞线
{ type: 'lines' , zlevel: 99 , effect: { show: true , period: 5 , trailLength: 0.1 , symbol: 'pin' , symbolSize: 5 , color: '#31FFFF' , } , lineStyle: { normal: { color: '#fff' , type: 'solid' , width: 1 , opacity: 0.1 , curveness: 0.2 , } , emphasis: { color: '#FF9600' } } , label: { normal: { show: false , position: 'middle' , formatter: '{b}' } } , data: lines_coord, } ,
飞线数据
lines_coord = [ { coords: [ [ 85.427108 , 40.558036 ] , [ 116.427239 , 40.246686 ] , ] , } , { coords: [ [ 96.487689 , 35.972901 ] , [ 116.427239 , 40.246686 ] , ] , } , { coords: [ [ 88.348773 , 31.224238 ] , [ 116.427239 , 40.246686 ] , ] , } , { coords: [ [ 102.748392 , 30.747149 ] , [ 116.427239 , 40.246686 ] , ] , } , { coords: [ [ 114.574166 , 23.829568 ] , [ 116.427239 , 40.246686 ] , ] , } , { coords: [ [ 115.756743 , 43.502437 ] , [ 116.427239 , 40.246686 ] , ] , } , { coords: [ [ 127.825623 , 47.200057 ] , [ 116.427239 , 40.246686 ] , ] , } , { coords: [ [ 121.455937 , 31.073690 ] , [ 116.427239 , 40.246686 ] , ] , } ,
] ;
5.地图标记点
{ name: "地点" , type: "scatter" , coordinateSystem: "geo" , zlevel: 2 , rippleEffect: { brushType: "stroke" , scale: 1.5 , period: 8 , } , label: { normal: { show: true , formatter: "{b}" , position: "right" , textStyle: { color: "#fff" , fontSize: 16 , } , } , } , emphasis: { interval: 1000 } , showEffectOn: "render" , itemStyle: { normal: { color: "#46bee9" , } , } , data: coord, } ,
标记数据
let coord = [ { name: "北京市" , value: [ 116.427239 , 40.246686 , 1 ] , symbolSize: 58 , symbol: "image://" + '图片地址(/src/images/logo.png)' } , { name: "新疆" , value: [ 85.427108 , 40.558036 , 1 ] , symbolSize: 38 , symbol: "image://" + '图片地址(/src/images/logo.png)' } , { name: "青海省" , value: [ 96.487689 , 35.972901 , 1 ] , symbolSize: 38 , symbol: "image://" + '图片地址(/src/images/logo.png)' } , { name: "西藏" , value: [ 88.348773 , 31.224238 , 1 ] , symbolSize: 38 , symbol: "image://" + '图片地址(/src/images/logo.png)' } , { name: "四川省" , value: [ 102.748392 , 30.747149 , 1 ] , symbolSize: 38 , symbol: "image://" + '图片地址(/src/images/logo.png)' } , { name: "广东省" , value: [ 114.574166 , 23.829568 , 1 ] , symbolSize: 38 , symbol: "image://" + '图片地址(/src/images/logo.png)' } , { name: "内蒙古" , value: [ 115.756743 , 43.502437 , 1 ] , symbolSize: 38 , symbol: "image://" + '图片地址(/src/images/logo.png)' } , { name: "黑龙江" , value: [ 127.825623 , 47.200057 , 1 ] , symbolSize: 38 , symbol: "image://" + '图片地址(/src/images/logo.png)' } , { name: "上海市" , value: [ 121.455937 , 31.073690 , 1 ] , symbolSize: 38 , symbol: "image://" + '图片地址(/src/images/logo.png)' } ,
] ;
6. 点击地图板块弹框设置背景图片
let mapOption = { tooltip: { extraCssText: 'max-width:270px; white-space:pre-wrap' , enterable: true , trigger: "item" , triggerOn: 'click' , show: true , padding: 0 , borderWidth: 1 , alwaysShowContent: true , formatter : ( p: any ) => { return formatter ( p) } , } ,
}
自定义数据
const formatter = ( p: any ) => { return '<div style="color:#fff;font-size:14px;height: 162px;background: #061547;padding:0;margin:0;position:relative;">' + ` <img src=" ${ '/src/assets/images/***.png' } "> ` + '<div style="position:absolute;top:0;left:0;width:100%;height:100%;">' + '<div style="font-weight:bold;font-size:19px;padding-top:3px;padding-left:38px;">' + p. name + '</div>' + '<div style="color:#9ba0b5;font-size:13px;padding:10px;">' + '<div >' + '负责人:' + '测试/182****1474' + '</div>' + '<div style="padding-top:5px;">' + '地 址:' + '测试地址测试地址测试地址测试地址测试地址测试地址测试地址' + '</div>' + '<div style="heigth:100px;background:#142251;margin-top:3px;padding: 8px 5px 3px 6px;display: flex;justify-content: space-between;">' + '<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;" οnclick="hideTooltip(' + p. data. adcode + ')">' + ` <img src=" ${ '/src/assets/images/***.png' } "> ` + '<div style="font-size:10px;">测试</div>' + '</div>' + '<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;" >' + ` <img src=" ${ '/src/assets/images/icon_liuyg.svg' } "> ` + '<div style="font-size:10px;">测试</div>' + '</div>' + '<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;">' + ` <img src=" ${ '/src/assets/images/icon_dianzc.svg' } "> ` + '<div style="font-size:10px;">测试</div>' + '</div>' + '<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;">' + ` <img src=" ${ '/src/assets/images/icon_ai.svg' } "> ` + '<div style="font-size:10px;">测试</div>' + '</div>' + '<div style="display: flex;cursor: pointer;flex-direction: column;align-items: center;width:40px;justify-content: center;">' + ` <img src=" ${ '/src/assets/images/icon_chenj.svg' } "> ` + '<div style="font-size:10px;">测试</div>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>'
}
触发点击事件
onMounted ( async ( ) => { window. hideTooltip = function ( parmas: any ) { console. log ( '我是点击事件' , parmas) ; }
} )
7.tooltip自定义图片背景图
label: { normal: { show: true , color: "rgb(249, 249, 249)" , formatter : function ( param: any ) { return '{icon|} ' + ` {name| ${ param. name} } ` ; } , rich: { icon: { height: 25 , width: 70 , alingn: 'center' , backgroundColor: { image: '/src/assets/images/***.png' } } , name: { fontSize: 13 , padding: [ 0 , 0 , 0 , - 58 ] } } } ,
}
8. 渲染地图
const getGeoJson = ( adcode: any ) => { return new Promise ( ( resolve, reject ) => { AMapLoader. load ( { key: '*******************' , version: '1.4.4' , AMapUI: { version: '1.1' , plugins: [ ] , } , } ) . then ( ( ) => { new AMapUI. loadUI ( [ 'geo/DistrictExplorer' ] , DistrictExplorer => { var districtExplorer = new DistrictExplorer ( ) ; districtExplorer. loadAreaNode ( adcode, function ( error, areaNode ) { if ( error) { console. error ( error) ; reject ( error, 'error 191' ) ; return ; } let Json = areaNode. getSubFeatures ( ) ; let mapJson = { features: [ ] , } ; mapJson. features = Json; resolve ( mapJson) ; } ) } ) } ) . catch ( err => { console. log ( err) } ) } )
}
const getJson = ( val: any ) => { var MapJsons = [ ] ; var MapJson = [ ] ; getGeoJson ( val) . then ( ( res: any ) => { MapJsons = res. features?. map ( ( item: any ) => { return { adcode: item. properties. adcode, name: item. properties. name, value: item. properties. name, level: item. properties. level, center: item. properties. center, } ; } ) ; MapJson = MapJsons?. sort ( function ( a: any, b: any ) { return a. value - b. value; } ) ; drawMap ( res, MapJson) ; } ) ;
} ;
const drawMap = ( map: any, MapJson: any ) => { let mapChart = echarts. init ( document. getElementById ( "map" ) ) ; echarts. registerMap ( "SUI" , map) ; mapChart. setOption ( mapOption, true ) ; mapChart. on ( "click" , ( params: any ) => { } )
} ;