echarts 地图自动适应_arcgis api 3.x for js 之echarts开源js库实现地图统计图分析附源码下载...

最新推荐文章于 2024-07-26 15:20:05 发布

weixin_39825322

最新推荐文章于 2024-07-26 15:20:05 发布

阅读量104

点赞数

文章标签： echarts 地图自动适应

本文链接：https://blog.csdn.net/weixin_39825322/article/details/113068407

版权

本文介绍如何使用arcgis api 3.x和echarts库创建地图统计图，对比之前基于dojo的方法，效果更佳。通过自定义ChartInfoWindow实现多图表展示，提供源码下载。

摘要由CSDN通过智能技术生成

前言

关于本篇功能实现用到的 api 涉及类看不懂的，请参照 esri 官网的 arcgis api 3.x for js：esri 官网 api，里面详细的介绍 arcgis api 3.x 各个类的介绍，还有就是在线例子：esri 官网在线例子，这个也是学习 arcgis api 3.x 的好素材。

内容概览

基于 arcgis api 3.x 结合 echarts 开源 js 库实现地图统计图分析
源代码 demo 下载

前面写过一篇关于arcgis api 3.x for js 实现地图统计图的，具体见：这里
那是基于 dojo 组件来实现图表统计的，实现的效果一般般；所以，本篇利用 arcgis api 3.x 结合 echarts 实现统计图效果，效果比之前好看，效果图如下：

实现的思路

自定义气泡窗口 ChartInfoWindow，继承 InfoWindowBase，为了 echarts 统计图表展示在自定义的气泡窗口里面；自定义气泡窗口 ChartInfoWindow 是为了适应地图上同时展示多个图表，地图默认的气泡窗口只能显示一个，不能同时显示多个的；
定义 ChartInfoWindow 的样式，具体样式如下：

.myInfoWindow { 
 position: absolute; 
 z-index: 100; 
 -moz-box-shadow: 0 0 1em #26393D; 
 font-family: sans-serif; 
 font-size: 12px; 
 background-color: rgba(255, 255, 255, 0); 
} 
 
/*.dj_ie .myInfoWindow {*/ 
 /*border: 1px solid rgba(255, 255, 255, 0);*/ 
/*}*/ 
 
.myInfoWindow .content { 
 position: relative; 
 color:#002F2F; 
 overflow: auto; 
 padding:2px 2px 2px 2px;  
 background-color: rgba(255, 255, 255, 0);  
}