本文主要是介绍高德地图api+echarts-extension-amap,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
示例代码:
let option = {//amap地图配置amap: {center: [108.93425, 37.83053],zoom: 5,zooms: [5, 18],roam: true,isHotspot: true,echartsLayerZIndex: 2019,doubleClickZoom: false,resizeEnable: true,showLabel: false,},animation: true,series: [{name: "",type: "scatter",// 使用高德地图坐标系coordinateSystem: "amap",data: [['108.946665', '34.293109'],['121.378115', '30.997271'],['113.504234', '23.155155'],],zlevel: 10, // 相当于z-indexsymbolSize: [56, 56],symbol: 'image: //./css/images/xxx.png'}, {name: "",type: "effectScatter",coordinateSystem: "amap",data: [{name: '上海',value: [121.47, 31.23],color: '#ff445f'},{name: '重庆',value: [106.55, 29.56],color: '#01c1b2'},{name: '新疆',value: [87.63, 43.79],color: '#8272ec'}],symbolSize: 8,showEffectOn: "render",rippleEffect: {scale: 5,brushType: "stroke",},hoverAnimation: true,label: {normal: {formatter: "{b}",position: "right",show: true,fontSize: 18,fontWeight: 600},emphasis: {show: true,},},itemStyle: {normal: {color: function (param) {return param.data.color},shadowBlur: 20,shadowColor: "#000",},},},{type: "lines", // 该类型用于地图上路线的绘制coordinateSystem: "amap", // 该系列使用的坐标系是高德地图的坐标系zlevel: 1, // 相当于z-indexeffect: {// 线特效的配置show: true, // 是否显示特效period: 5, // 特效动画的时间trailLength: 0.5, // 特效尾迹的长度 0-1// color: "#fff", // 特效的颜色symbolSize: 7, // 特效的大小normal: {color: function (param) {return param.data.color},}},lineStyle: {// 线的颜色normal: {color: function (param) {return param.data.color},width: 1.5,curveness: 0.2,},},data: [{coords: [[116.496437, 39.913523],[121.47, 31.23],],color: '#ff445f'},{coords: [[116.496437, 39.913523],[106.55, 29.56],],color: '#01c1b2'},{coords: [[116.496437, 39.913523],[87.63, 43.79],],color: '#8272ec'}],}],};let mapChart = echarts.init(document.getElementById("aMap"));mapChart.setOption(option);// 获取 ECharts 高德地图组件var amapComponent = mapChart.getModel().getComponent('amap');var amap = amapComponent.getAMap();amap.on("zoomchange", () => {// 地图缩放事件})amapComponent.setEChartsLayerInteractive(false);
这篇关于高德地图api+echarts-extension-amap的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!