开发工具与关键技术： Code iServer
撰写日期：2020年04月23日

 
通常我们获取到的表格、属性表信息较多不易的进行数据表达，这样我们都会采用图表的形式进行分类统治便于用户读取信息，比如常用到的折线图、柱状图、散点图以及饼图而对于图表更对用Echarts，结合Echarts图表有几种展示方式：下面来看下这三种的样式：
 第一种就是Echarts图表直接悬停在四周
 
 
第二种就是鼠标放在那个位置它的图表信息就会显示在那个位置跟随你的鼠标在移动
 
 
第三种是Marker杂式与Echarts结合通过点击Marker绑定hostpass弹窗显示图表信息：
 
 
下面来看第三种方式的思路，首先是地图数据的装备工作、服务的发布、加载地图然后通过地图查询来获取到图标添加的Marker位置，然后显示Marker的内容就用于构建Echarts图表的内容最后进行调试浏览，下面来看实现的第一步：地图数据用到的数据是我们常见示范数据China-100（不过我的是China-400，大家的可能都不同） 在加载地图前要先引入脚本库文件leaflet.js
 
 
同时还要将对应的第三方库Echarts引进来:include=”echarts”
 
 
引入完成后接着就是加载地图先创建一个地图对象设置它的中心点、比例尺等信息再用tiledMapLayer 接口将地图添加进来，这里的url就是与iServer进行一个服务对接发布的地图服务的地址：
 
 
这部分的内容大家可以参考leaflet 开发入门课程，接下来我们要获取marker 添加的位置通过地图查询来获取图表添加Marker的位置，那查询用到的接口我们可以在哪里查看呢，打开本地的iServer 在示范程序里面进入Leaflet 然后点击 for leaflet 的API中的文档里面IServer  地图 地图查询 L.supermap.queryService  queryBySQL 中的参数（params（SQl 查询相关的参数类）、callback（回调函数）、resultFormat（要返回的结果类型）），SQl查询的参数类是需要设置 options 如下图：
 
 
下面开进行代码实现过程首先在SQLParameters中设置了查询的参数数组，它的查询图层名称以及它的过滤条件
 
 
主要接口 queryService 查询服务类、querybySQL地图SQL查询服务类，
 QueryServer的url是与iServer进行地图服务的链接 然后queryBySQL的查询方法传入它的参数定义它的回调函数，它的返回结果类型是geoJSON类型这里将查询到的结果绑定bindPopup 弹窗显示出来，关于bindPopup我们可以在Leaflet APIreference中查看，接着将查询的结果绑定到bindPopup弹窗：如下图：
 
 
但是bindPopup的弹窗内容我们就要用Echarts来进行显示，首先就是要创建Echarts 示例最重要的是它的样式和内容，它的图表配置项大家可以去参考Echarts 官网在官网例子里面它的图表配置项的参数我们可以直接的进行复用，在定义承载Echarts图表的div，设置div的高度、宽度等参数，如下图：
 
 
 
接下来就是设置Echarts里面的内容在bindPopup弹窗里面图表的一个参数内容，这里返回的结果类型是div就是整个弹窗里面显示我们得折线图，如下图：
 
 
 
 
最后我们在浏览器中运行下，当前显示的就是marker形式展现省会城市，如下：
 
 
通过点击每个点对应的那个城市未来一周的气温变化的情况的折线图，这就是叠加Echarts 的折线图的一个效果，如下图：
 
 
除了折线图我们还要其它常见的图表类型比如：散点图、柱状图、饼图等等。

标准地形图制作系列--接图表的制作方法
 
by 李远祥
 
接图表是标准地形图制作常用的方式，对于网络地图来说，从来不会出现接图表这东西，但是在标准地形图里面，这却是强制的规范。虽然很多行外人员都不清楚接图表是什么东西，但实际上接图表他们早就在中学的地理课本或者是街边买来的地图册上看到过（尽管这些地图不太规范）。
 
接图表的作用就不在这里罗嗦了，一般关注该话题的人都知道它的表达方式，这里不做论述。下面主要介绍一下如何在ArcGIS里面实现接图表。由于没有标准的数据，这里用一份比较简单的数据实现其操作步骤。
 
先说一下主要思路：首先要针对数据制作好地形图，这是前提条件。然后利用行政边界图层，单独制作一个地图，并插入到做好的地形图中，并作为接图表放置在地图的右上角。最后调整接图表的显示范围，让其范围与地形图范围一致。
 
制作地形图的过程这里省略，那是一个非常好时间和精力的事情，不要问我怎么知道，具体按照地形图规范做一下就知道有多苦逼。下面假设已经做好一张标准的地形图，我是说假设`(*∩_∩*)′  如下图所示
 
 
在【文件】--【页面和打印设置】先设置好打印的纸张大小，比例尺之类的就在图框中设置好对应的参考比例。然后调整好显示的范围等。切换到【布局】视图，这样才可以看到效果。
 
 
接下来就是需要插入接图表的关键步骤了。很多人都不会明白ArcGIS的【数据框】是什么概念，就是我们经常看到的在图层最上面的黄色的图标，感觉上有图层和图层组的位置，但【数据框】看起来一点作用都没有。下图红色箭头指向的就是【数据框】
 
 
在哲学上来说，存在的都是有价值的，何况数据框已经存在ArcGIS十多个版本中。数据框的概念其实可以看作是一张地图的组织，只不过很多人习惯性的将不同的地图放置在不同的Mxd中组织起来，而数据框的作用就是将多个地图放在同一个MXD中，需要查看不同的地图的时候可以自动激活（当然，这个是在数据视图中的做法）。而另一种非常重要的价值就是将多个地图显示在同一个纸面上，恰好接图表就是其中的一种多个地图在同一张图纸中的表现形式，只不过是一张是精细的地图，另一张类似于鹰眼的简图。
 
那接下来就是插入接图表的重要步骤。在菜单【插入】，可以插入一个【数据框】，如下图
 
 
标准动作是将该新建的数据框命名为“接图表”，然后选择接图表数据框，添加接图表图层。我在这里就用一个行政区界来表示，为了方便显示，将行政边界填充设置为无颜色，只显示边线。当然，如果有的只是边线数据，直接加载设置边线样式就行了。如下图
 
 
可以看到，大图中已经加入了一个小图，这个小图就是我们所说的接图表。使用选择工具，就是黑色箭头工具，将接图表移动到右上角位置，并且点击右键--属性，将修改接图表的图框样式和背景。一般将图框样式设置为简单的线，背景设置为纯白色，如下图
 
 
这样，接图表的基本模样就出来了。然后对接图表的图层显示一下标注信息，这样就像模象样了。再进一步就是要将两个图的范围对应起来，这一次就需要使用【标准工具】里面的缩放工具进行调整（千万不要用【布局】工具条上的工具，那只是相当于放大纸张在屏幕的显示而已）
 
 
最后，如果想两个数据框的范围能够对上，除了手动的方式之外，可以通过arcpy脚本来实行。可以参考mapping模块的具体方法
 
 
写完脚本之后可以在【地理处理】的Python中执行脚本进行对照。这里不做详细论述，在以后章节会有arcpy.mapping 模块的说明。
 
总结：接图表其实不难实现，主要是很多人不清楚使用多个数据框可以实现该效果。
 

需求：实现如图所示的3D地图图表
 
 
（1）原本使用的highcharts没有3d地图的功能，搜索插件也没有可替代的方案，选择echarts理由是在地图方面百度拥有毋庸置疑的实力
 
https://blog.csdn.net/GRAY_KEY/article/details/81295961
 
（2）通过代码可以轻易写出例子的效果，但是想要写特定区域的地图则需要该地区相对应的json文件，需要通过网址查询对应地区的城市区划代码之后通过网址查询相关的json文件，详细步骤如链接。
 
https://blog.csdn.net/GRAY_KEY/article/details/80197527
 
（3）通过替换json文件即可展示该地区的3D地图，图片中在3D地图的基础上还有一个柱形图，然后找到了这个例子，又牵扯到一个维度的问题，是实现过程中最难理解的部分，主要原理就是用visualMap属性来连接两个series实现的图表
 
https://gallery.echartsjs.com/editor.html?c=xLIkpVNt4M
 
（4）各个地区板块之间有一个高度的差异,查到的是通过给regionHeight的大小来实现，但是实际上使用的时候没有效果，官方文档写的也是语焉不详，之后用height属性可以实现
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

ECharts：
 http://echarts.baidu.com/examples/index.html
 Jquery+echarts.js全国门店分布地图统计图表代码：
 https://www.sucaihuo.com/js/4253.html