高德地图api+echarts-extension-amap

2023-11-02 10:59

本文主要是介绍高德地图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的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/330136

相关文章

SpringBoot监控API请求耗时的6中解决解决方案

《SpringBoot监控API请求耗时的6中解决解决方案》本文介绍SpringBoot中记录API请求耗时的6种方案,包括手动埋点、AOP切面、拦截器、Filter、事件监听、Micrometer+... 目录1. 简介2.实战案例2.1 手动记录2.2 自定义AOP记录2.3 拦截器技术2.4 使用Fi

Knife4j+Axios+Redis前后端分离架构下的 API 管理与会话方案(最新推荐)

《Knife4j+Axios+Redis前后端分离架构下的API管理与会话方案(最新推荐)》本文主要介绍了Swagger与Knife4j的配置要点、前后端对接方法以及分布式Session实现原理,... 目录一、Swagger 与 Knife4j 的深度理解及配置要点Knife4j 配置关键要点1.Spri

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API,结合WebAudioAPI,实现网页录音功能,从获取音频流到处理和保存录音,整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3

springboot项目中整合高德地图的实践

《springboot项目中整合高德地图的实践》:本文主要介绍springboot项目中整合高德地图的实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一:高德开放平台的使用二:创建数据库(我是用的是mysql)三:Springboot所需的依赖(根据你的需求再

使用Python实现调用API获取图片存储到本地的方法

《使用Python实现调用API获取图片存储到本地的方法》开发一个自动化工具,用于从JSON数据源中提取图像ID,通过调用指定API获取未经压缩的原始图像文件,并确保下载结果与Postman等工具直接... 目录使用python实现调用API获取图片存储到本地1、项目概述2、核心功能3、环境准备4、代码实现

无法启动此程序因为计算机丢失api-ms-win-core-path-l1-1-0.dll修复方案

《无法启动此程序因为计算机丢失api-ms-win-core-path-l1-1-0.dll修复方案》:本文主要介绍了无法启动此程序,详细内容请阅读本文,希望能对你有所帮助... 在计算机使用过程中,我们经常会遇到一些错误提示,其中之一就是"api-ms-win-core-path-l1-1-0.dll丢失

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts?1. 基于 ECharts,功能强大2. 更符合 Vue

python通过curl实现访问deepseek的API

《python通过curl实现访问deepseek的API》这篇文章主要为大家详细介绍了python如何通过curl实现访问deepseek的API,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编... API申请和充值下面是deepeek的API网站https://platform.deepsee

Java对接Dify API接口的完整流程

《Java对接DifyAPI接口的完整流程》Dify是一款AI应用开发平台,提供多种自然语言处理能力,通过调用Dify开放API,开发者可以快速集成智能对话、文本生成等功能到自己的Java应用中,本... 目录Java对接Dify API接口完整指南一、Dify API简介二、准备工作三、基础对接实现1.

一文详解如何在Vue3中封装API请求

《一文详解如何在Vue3中封装API请求》在现代前端开发中,API请求是不可避免的一部分,尤其是与后端交互时,下面我们来看看如何在Vue3项目中封装API请求,让你在实现功能时更加高效吧... 目录为什么要封装API请求1. vue 3项目结构2. 安装axIOS3. 创建API封装模块4. 封装API请求