高德地图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

相关文章

C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)

《C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)》本文主要介绍了C#集成DeepSeek模型实现AI私有化的方法,包括搭建基础环境,如安装Ollama和下载DeepS... 目录前言搭建基础环境1、安装 Ollama2、下载 DeepSeek R1 模型客户端 ChatBo

Java调用DeepSeek API的最佳实践及详细代码示例

《Java调用DeepSeekAPI的最佳实践及详细代码示例》:本文主要介绍如何使用Java调用DeepSeekAPI,包括获取API密钥、添加HTTP客户端依赖、创建HTTP请求、处理响应、... 目录1. 获取API密钥2. 添加HTTP客户端依赖3. 创建HTTP请求4. 处理响应5. 错误处理6.

Deepseek R1模型本地化部署+API接口调用详细教程(释放AI生产力)

《DeepseekR1模型本地化部署+API接口调用详细教程(释放AI生产力)》本文介绍了本地部署DeepSeekR1模型和通过API调用将其集成到VSCode中的过程,作者详细步骤展示了如何下载和... 目录前言一、deepseek R1模型与chatGPT o1系列模型对比二、本地部署步骤1.安装oll

浅析如何使用Swagger生成带权限控制的API文档

《浅析如何使用Swagger生成带权限控制的API文档》当涉及到权限控制时,如何生成既安全又详细的API文档就成了一个关键问题,所以这篇文章小编就来和大家好好聊聊如何用Swagger来生成带有... 目录准备工作配置 Swagger权限控制给 API 加上权限注解查看文档注意事项在咱们的开发工作里,API

一分钟带你上手Python调用DeepSeek的API

《一分钟带你上手Python调用DeepSeek的API》最近DeepSeek非常火,作为一枚对前言技术非常关注的程序员来说,自然都想对接DeepSeek的API来体验一把,下面小编就来为大家介绍一下... 目录前言免费体验API-Key申请首次调用API基本概念最小单元推理模型智能体自定义界面总结前言最

JAVA调用Deepseek的api完成基本对话简单代码示例

《JAVA调用Deepseek的api完成基本对话简单代码示例》:本文主要介绍JAVA调用Deepseek的api完成基本对话的相关资料,文中详细讲解了如何获取DeepSeekAPI密钥、添加H... 获取API密钥首先,从DeepSeek平台获取API密钥,用于身份验证。添加HTTP客户端依赖使用Jav

C#使用DeepSeek API实现自然语言处理,文本分类和情感分析

《C#使用DeepSeekAPI实现自然语言处理,文本分类和情感分析》在C#中使用DeepSeekAPI可以实现多种功能,例如自然语言处理、文本分类、情感分析等,本文主要为大家介绍了具体实现步骤,... 目录准备工作文本生成文本分类问答系统代码生成翻译功能文本摘要文本校对图像描述生成总结在C#中使用Deep

5分钟获取deepseek api并搭建简易问答应用

《5分钟获取deepseekapi并搭建简易问答应用》本文主要介绍了5分钟获取deepseekapi并搭建简易问答应用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需... 目录1、获取api2、获取base_url和chat_model3、配置模型参数方法一:终端中临时将加

使用DeepSeek API 结合VSCode提升开发效率

《使用DeepSeekAPI结合VSCode提升开发效率》:本文主要介绍DeepSeekAPI与VisualStudioCode(VSCode)结合使用,以提升软件开发效率,具有一定的参考价值... 目录引言准备工作安装必要的 VSCode 扩展配置 DeepSeek API1. 创建 API 请求文件2.

使用SpringBoot创建一个RESTful API的详细步骤

《使用SpringBoot创建一个RESTfulAPI的详细步骤》使用Java的SpringBoot创建RESTfulAPI可以满足多种开发场景,它提供了快速开发、易于配置、可扩展、可维护的优点,尤... 目录一、创建 Spring Boot 项目二、创建控制器类(Controller Class)三、运行