在vue中利用ArcGis API for js 创建地图

Posted 2023-04-18

参考技术A 创建3d视图也是大同小异

具体配置文档可以参考arcgis官网的 API

arcgis api for js之echarts开源js库实现地图统计图分析

前面写过一篇关于arcgis api for js实现地图统计图的，具体见：http://www.cnblogs.com/giserhome/p/6727593.html 那是基于dojo组件来实现图表统计的，实现的效果一般般；所以，本篇利用arcgis api for js结合echarts实现统计图效果，效果比之前好看

前言

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

内容概览

1. 基于 arcgis api 3.x 结合 echarts 开源 js 库实现地图统计图分析
2. 源代码 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);


}

• 构造模拟数据：

更多的详情见：GIS之家小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波