当前位置>> 主页 > 竞赛介绍 > 数据支持 >

2019Esri杯中国大学生GIS软件开发竞赛数据支持说明

主要为大家介绍三类地图调用:
一、如何在ArcGIS  Desktop中调用地图数据
二、如何在ArcGIS  Server的开发中调用地图数据

三、如何调用地理大数据API


Section 1  如何在ArcGIS Desktop中调用地图数据



ArcGIS中调用GeoQ基础地图方法
1.     在Catalog中右边栏找到GIS服务器,

2.     双击添加ArcGIS server

 
 
3.      添加服务器URL:http://map.geoq.cn/arcgis/rest/sevices,点击完成即可。

4.      拖拽ArcGIS on map.geoq.cn(用户)中所需的底图,即可加载。


 

Section 2 如何在ArcGIS Server的开发中调用地图数据



开发竞赛中,常有同学对获取基础底图发愁,下面我们就详细介绍一下在Web开发中如何调用ArcGISOnline.cn中的基础地图服务。我们将重点介绍ArcGIS API for JavaScriptArcGIS API for Flex以及ArcGIS API for Silverlight三种开发模式下的调用办法。
 

ArcGIS API for JavaScript调用方法

  1. 简介
ArcGIS API for JavaScript是Esri 2008 年推出的一套基于JavaScript 语言的编程接口,其为创建WebGIS应用提供了向Web应用程序中嵌入轻量级制图功能的解决方案。开发人员在客户端可以轻松地利用JavaScript API来调用ArcGIS Server所提供的服务,实现地图应用和地理分析功能。
ArcGIS API for JavaScript由3部分组成,其分别为 ArcGIS API for JavaScript、Extension for the Google Maps API、Extension for Bing Maps。 ArcGIS API for JavaScript 采用后端 REST API,可以通过无状态方式检索服务器信息。ArcGIS API for JavaScript 基于Dojo框架,另外两个API分别构建于 Google Maps API 和 微软 Bing Maps API之上,在下面提到的API的都是 ArcGIS API for JavaScript 。
使用ArcGIS API for JavaScript可以实现如下功能:
1)显示用户数据的交互式地图
2)在服务器上运行GIS模型并显示结果
3)在自己GIS数据中搜索功能或属性,并显示结果
4)查找地址并显示结果

  1. 环境搭建
进行ArcGIS API for JavaScript的应用开发,需要安装开发工具:Aptana Studio、Notepad++和Microsoft Visual Web Developer等工具中的一种即可。在本例中我们采用Notepad++为开发工具。
Aptana Studio下载地址:http://www.aptana.com/products/studio3
NotePad++下载地址:http://notepad-plus-plus.org/download/v5.9.3.html
Visual Web Developer下载地址:http://www.microsoft.com/visualstudio/en-us/products/2010-editions/visual-web-developer-express
在线API 地址:http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/,其中后面的数字为 api 版本号。在这里引用的是最新版本 3.3版API。
离线API:Esri 提供一张离线API光盘,其中包括ArcGIS API for JavaScript 和开发帮助,如需要光盘请联系您购买ArcGIS软件的销售。

  1. 第一个 ArcGIS API for JavaScript 程序
我们现在来创建一个ArcGIS API JavaScript应用,加载ArcGIS Online中国地图。打开Notepad++,创建文件名为“创建第一个应用.html”的文件,其中文件类型为HTML格式,如图1 所示。
图1 Notepad++下创建HTML文件
编写程序代码,整个API应用程序代码如下:

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3          <head>
4          <title>创建第一个应用</title>
5                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6                    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
7                    <link href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" >
8                    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/tundra/tundra.css">
9                    <link rel="stylesheet" type="text/css"
10                    href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css" />
11                   
12                    <script type="text/javascript"
13                    src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
14                   
15                    <script type="text/javascript" language="Javascript">
16                      dojo.require("esri.map");
17                             var map;
18                      function init() {    
19                               map = new esri.Map("mapDiv", {        
20                                         center: [-56.049, 38.485],        
21                                         zoom: 3,        
22                                         basemap: "streets"      
23                                         });
24                               //create and add new layer
25                            var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer");
26                            map.addLayer(layer);
27                                      }  
28                             dojo.addOnLoad(init);
29                    </script>
30          </head>
31         <body>
32                     <div id="mapDiv" class="tundra" style="width:900px; height:600px; border:1px solid #000;"></div>
33         </body>
34 </html>


下面将详细介绍这段代码的组成:
a)         页面样式以及api脚本的引用
使用ArcGIS JavaScript API 首先需要在HTML Head中引用两个外部文件:css样式文件与JavaScript脚本文件。

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript" src=" http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/ "></script>
b)         脚本的编写
完成上面的API引用后,就可以在脚本标签中添加地图应用,因为ArcGIS JavaScript API是建立在Dojo框架之上,所以需要用到一些dojo的方法,如果想获得更多的dojo信息请访问dojo 官方网站。
首先调用所需要的包。
dojo.require("esri.map");
声明两个新建esri.Map和esri.layers.ArcGISTiledMapServiceLayer类返回值的全局变量。
var map;
初始化方法,在这里我们通过新建一个 esri.Map类来创建一个地图,其中 mapDiv是要把这个地图放入的容器,也就是 HTML页面中的DIV元素的名称 。
map = new esri.Map("mapDiv");
layer是ArcGIS Online China地图服务,因为这个服务是做了缓存的服务,所以通过esri.layers.ArcGISTiledMapServiceLayer把这个服务构造为一个图层,加载到先前创建的地图中。
layer = new esri.layers.ArcGISTiledMapServiceLayer ( " http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer " );
把构建好的layer 作为一个图层加载到myMap中 。
myMap.addLayer(layer);

  1. 浏览器中内容显示格式设置
在HTML页面创建DIV元素,以容纳地图控件的显示,这个DIV名称为mapDiv,样式为最开始在HTML Head 中引用的css 的tundra类,自身宽900像素,高600像素,带黑色1像素边框 。
<div id="mapDiv" class="tundra" style="width:900px; height:600px; border:1px solid #000;"></div>

  1. 界面效果
当程序编写完成后,左击NotePad++工具菜单栏中“运行”->“Launch in IE”,如图2所示。
图2 运行程序
接着将以IE浏览器打开该API连接,效果图如图3所示,我们此时完成了一个ArcGIS API for JavaScript应用。
图3 ArcGIS API for JavaScript应用实例效果图
 


ArcGIS API for Flex调用方法

  1. 简介
ArcGIS API for Flex是Esri 2008年新推出的WebGIS客户端开发包,用于富互联网应用程序RIA(Rich Internet Applications)的开发,为ArcGIS Server 提供了一套全新的开发方式,其优点是运行速度快,为用户提供优秀的用户体验。
使用ArcGIS API for Flex可以实现如下功能:
1)显示一副可与自己的数据交互的地图
2)在服务器上执行地理信息系统模型并显示结果
3)基于ArcGIS Online的地图服务显示自己的业务数据
4)根据属性或者位置查找数据并显示结果
5)查找地址并显示结果
6)可编辑你的数据(如果发布为要素服务)
7) 创建Mushups应用

  1. 环境搭建
开发ArcGIS API for Flex的程序需要flex环境的支持。
首先我们在Esri官网下载ArcGIS API for Flex压缩包并解压,然后下载Flex Builder并安装,此时开发环境搭建完成。相关软件下载如下。
Flex Builder开发环境,需要从Adobe 官方网站下载试用版:http://download.macromedia.com/pub/flex/flex_builder/FB3_win.exe
ArcGIS API for Flex 下载地址:http://resources.esri.com/arcgisserver/apis/flex/index.cfm?fa=home
下载ArcGIS API for Flex ,需要注册一个Esri Global 账户,现在最新版本为v3.1。

  1. 第一个ArcGIS API for Flex程序
打开Flex Builder,点击菜单栏“开始”->“新建”->“flex项目”,创建一个Flex 工程(名称Demo),如图1所示,点击“完成”则完成工程创建。
图1 创建Flex工程
右键单击工程名,选择属性,在属性对话框中选择“Flex 构建路径”,接着选择“库路径”选项卡,单击“添加 SWC”,把下载的ArcGIS API for Flex(相对路径为解压文件夹下\ArcGIS_Flex\libs中的swc文件)添加进去,如图2所示,点击“确认”后可以进行开发。
图2开发环境中添加ArcGIS API for Flex配置文件
在Demo.mxml文件中进行api开发的代码编写,具体代码如下:
1 <?xml version="1.0" encoding="utf-8"?>
2 <s:Application  xmlns:fx="http://ns.adobe.com/mxml/2009"
3                               xmlns:s="library://ns.adobe.com/flex/spark"
4                               xmlns:esri="http://www.esri.com/2008/ags"
5                               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
6          <esri:Map>
7                    <esri:ArcGISTiledMapServiceLayer
8                             url="http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer" />
9          </esri:Map>
10 </s:Application>

下面将详细介绍这段代码的组成:
下面代码中,xmlns:mx、xmlns:s和xmlns:esri获取url资源。
xmlns:fx="http://ns.adobe.com/mxml/2009
xmlns:s="library://ns.adobe.com/flex/spark
xmlns:esri = http://www.esri.com/2008/ags
使用ArcGIS API for Flex创建一个地图,在mxml文件中直接使用标签。其中标签定义一个map对象。map创建好之后,使用layer把需要访问的数据加载到map上,在标签下面创建子标签。
标签定义一个layer对象,其中最重要的属性是url,url定义了访问数据的地址,该代码中url指向一个ArcGIS Online提供的TiledMap服务。如下:
<esri:ArcGISTiledMapServiceLayer url = "http:// http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer “/>

  1. 界面效果
当程序编写完成后,运行该工程,效果如图3所示:
图3 ArcGIS API for Flex 应用实例效果图

返回顶部

ArcGIS Server SilverLight/WPF API调用方法

  1. 简介
SilverLight是MicroSoft推出的跨浏览器、跨平台的解决方案。它是通过小巧的浏览器插件将视频、交互性内容以及其他应用融合在一起。ArcGIS API for Silverlight可以把ArcGIS Server中基于地理信息系统的Web services与其他网页内容关联在一起,快速生动地展现那些可以部署在网络中的制图程序。
使用ArcGIS API for Silverlight可以实现如下功能:
1)用自己数据的创建一个地图
2)在ArcGIS Online或者Bing Maps basemap中显示数据
3)在地图中交互式的添加图形和标记
4)根据属性或者位置在地理信息系统(GIS)中查找数据,并显示结果
5)通过ArcGIS服务器运行一个GIS模型,并显示结果
6) 查找地址并显示结果
7)计算路径,并图形化显示结果
8)编辑几何特性和属性
9)改变渲染栅格数据内容
10)创建Mashups(从多个网络源收集信息并相结合)

  1. 环境搭建
进行ArcGIS API for silverlight的应用开发,需要安装Visual Studio 2010(vs2010)或者Visual Web Developer 2010 Express (vwd2010),由于vs2010安装文件比较大,用户可以选择安装vwd2010进行开发。同时为能够在浏览器显示该Rich Internet Applications(RIA),需要安装Microsoft Silverlight 4 Tools for Visual Studio 2010。
Visual Studio 2010下载地址:http://www.microsoft.com/visualstudio/zh-cn/download
Visual Web Developer 2010 Express下载地址:http://www.microsoft.com/express/vwd
Microsoft Silverlight 4 Tools for Visual Studio 2010下载地址:http://www.microsoft.com/downloads/zh-cn/details.aspx?FamilyID=b3deb194-ca86-4fb6-a716-b67c2604a139&displayLang=zh-cn
首先安装vs2010或者vwd2010,然后安装Silverlight Tools for Visual Studio 2010,开发环境就搭建好了。需要注意的是,在安装时必须选择相对应的软件版本(即使用vs2010和vwd2010要求Silverlight Tools的版本为4.0及以上,并且要求它们是相同语言的版本)。在进行开发前,我们需要下载ArcGIS API for Microsoft Silverlight/WPF并安装;下载时需要注册一个Esri Global 账户。
最新版的ArcGIS API for Microsoft SilverlightV3.0版本下载地址:http://resources.esri.com/arcgisserver/apis/silverlight/

  1. 第一个 ArcGIS API for Silverlight/WPF 程序
打开vs2010,点击菜单栏中“文件”->“新建项目”,选择“Visual C#”模板中的“Silverlight”模板并选择“Silverlight应用程序”项,开始新建一个Silverlight工程,命名为“ags_api_for_silverlight”,如图1所示,并点击“确定”进入下一步。
图1 创建Silverlight工程
在“新Web项目类型”栏中选择“ASP.NET Web应用程序项目”,在“Silverlight版本”中选择“Silverlight 4”,如图2所示,并点击“确定”完成项目创建。
图2 项目相关属性配置
打开“解决方案资源管理器”,右击该工程“引用”项,选择“添加引用”,在“添加应用”项中,在“.NET”栏点击“ESRI.ArcGIS.Clinet”,并点击确定,如图3所示。此时完成了工程创建和环境配置
图3 添加ESRI.ArcGIS.Client组件
在MainPage.xaml文件中进行代码编写,所有代码如下:
1 <UserControl x:Class="demo.MainPage"
2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5     xmlns:esri="clr-namespace:ESRI.ArcGIS.Client;assembly=ESRI.ArcGIS.Client"
6     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
7     mc:Ignorable="d"
8     d:DesignHeight="300" d:DesignWidth="400">
9  
10     <Grid x:Name="LayoutRoot" Background="White">
11         <esri:Map x:Name="MyMap" Extent="12915510.1474625, 4827746.45379021, 12998675.8823845,4877354.08514722">
12             <esri:ArcGISTiledMapServiceLayer  Url="http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"/>
13         </esri:Map>
14     </Grid>
15 </UserControl>

下面将详细介绍这段代码的组成:
下面五段代码表示获取url资源
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
mlns:d=http://schemas.microsoft.com/expression/blend/2008
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:esri="clr-namespace:ESRI.ArcGIS.Client;assembly=ESRI.ArcGIS.Client"
下面这段代码中的标签定义了一个name为MyMap的map对象,然后在该标签下创建子标签,该子标签定义了一个layer对象,通过layer把要url上数据加载到map上。其中Url= http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer 定义了访问数据的地址,指向一个ArcGIS Online提供的TiledMap服务。
<esri:Map x:Name="MyMap" Extent="12915510.1474625, 4827746.45379021, 12998675.8823845,4877354.08514722"><esri:ArcGISTiledMapServiceLayer  Url=" http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer "/></esri:Map>

  1. 界面效果
当程序完成后,选择菜单栏中“生成”->”生成解决方案“,成功生成后,按“Ctrl+F5”组合键进行执行,在IE浏览器显示地图,效果图如图4所示。
图4 ArcGIS API for Silverlight应用实例效果图

 

Section 3 如何调用地理大数据API


GeoQ地理大数据API调用方法

智图GeoQ地理大数据(http://www.geoq.cn/)提供覆盖全国范围,涵盖企业、媒体、公众用户的数据需求,包括人口、经济、消费、品牌、餐饮、购物、教育、公共设施、政府单位等。作为我第一个开发的应用,整个过程还是挺深刻的,本文将告诉您如何使用GeoQ地理大数据API 完成地理大数据地图的开发。

一、注册登录

正如所有的应用系统一样,首先您需要登录到http://www.geoq.cn/,点击首页的登录按钮登录到智图编辑器中。

输入账号名和密码进行登录:
 
若无账号则请先注册账号:

注册成功即可进行登录到智图编辑器首页。

二、获取key

顾名思义,key是一把钥匙,有了它才能打开调用地理大数据API的大门,那么我们可能会有疑问,怎么样才能获取到key呢?答案就在上一步中,如果您成功登录到GeoQ编辑器之后,将出现获取key页面,如图:您可以在此页面中获取到单地理编码服务、地理大数据服务以及反向地理编码服务的key,正如一把钥匙只能开一个门一样,不同的key也意味着对应不同的服务,在使用时需要注意区分。

三、Leaflet实现地图加载

地理大数据页面中的地图是用Leaflet组件加载显示的,Leaflet 是一个为建设移动设备友好的互动地图,在所有主要桌面和移动平台能高效运作,在现代浏览器上会利用HTML5和CSS3的优势,同时也支持旧的浏览器访问。其实之前我是没有用过Leaflet的,在使用Leaflet API之后确实觉得它很容易上手,简单方便。
最初拿到地理大数据页面的设计图的时候,我就觉得特别炫,鲜艳的色彩给人眼前一亮的感觉,也激发了我开发这个页面的热情,页面展示设计相对而言比较简单,中间调用地理大数据API显示地图的逻辑有些复杂,因此这个页面大概花了一个星期左右的时间开发完成,上图看看页面效果,个人觉得还是挺不错的。

此页面展示的地理大数据分为人口数据、购物数据、消费数据、教育数据、宾馆酒店数据、餐饮数据六大类,更多的数据请登录到GeoQ智图编辑器中进行查看编辑。
页面中展示的地图默认加载显示人口数据的总人口数据,地图级数为4到9级,其中4~6级为省界数据,7~9为城市数据,在每个级数下根据查询相应的地理大数据返回结果重新计算分组依据,并将每个要素渲染成相应的颜色,如图,当地图级数在4~6级时显示省界数据:

在地图级数为7~9级时显示城市数据:

接下来介绍地理大数据展示的具体实现细节。

1、加载地图容器。

在显示地图要素数据之前需要加载地图容器,并显示一张瓦片图作为底图,方法如下:
map = L.map('map', {
       center : [ 37.668418, 109.1958618 ],
       zoom : 4,
       minZoom : 4,
       maxZoom : 9,
       maxBounds : L.latLngBounds(L.latLng(3.52, 74.40), L.latLng(57.33, 135.20)),
       attributionControl : false,
       zoomControl : false
});
L.esri.tiledMapLayer("http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer").addTo(map);
var GeoQurl = '地图数据高德提供';
new L.control.attribution().addAttribution(GeoQurl).addTo(map);

2、显示透明地图,构成地图要素。

页面中展现的是GeoQ地理大数据的宏观展示,在进行查询大数据接口之前,建议采用的一种方式是直接将边界数据加载到地图中,透明显示,再请求地理大数据API接口,通过查询的数组再对每一个要素进行颜色渲染,构成地理大数据的宏观展示。地图在4~6级时加载省界数据,在7~9级时加载城市数据,两种数据的加载方式相同,均采用geoJson格式数据进行加载,方法如下:
layer = L.geoJson(province, {
       style : function() {
              return {
                     color : "000",
                     weight : 0.5,
                     fillOpacity : 0
              };
       },
       onEachFeature : function(feature, layer) {
              var str = "区划名称:" + feature.properties.Prov_Name + "<br>";
              var showStr = setPopShowStr(feature, layer);
              layer.bindPopup(str + showStr);
}
}).addTo(map);

其中province为一个全局变量,记录的是geoJson格式的数据。在设置的style中fillOpacity : 0表示颜色全透明。
在使用鼠标滚轮或者点击地图上的缩放按钮时都会将地图进行缩放,那么就遇到了一个问题,如果当前为第6级,显示的是省界数据,再放大一级到第7级,则需要显示城市数据,这个过程是需要自动进行切换的。我所做的处理方式是注册地图级数缩放事件,在相应的处理方法中获取当前的级数,加载不同的数据,方法如下:
// 注册地图级数缩放事件
map.on('zoomend', function(e) {
if (layer == null)
              return;
       var zoom = map.getZoom();
       if (zoom < 7 && preZoom > 6) {
              if (layer != null)
                     map.removeLayer(layer);
              layer = L.geoJson(province, {
                     style : function() {
                            return {
                                   color : "000",
                                   weight : 0.5,
                                   fillOpacity : 0
                            };
                     },
                     onEachFeature : function(feature, layer) {
                            var str ="区划名称:"+feature.properties.Prov_Name+"<br>";
                            var showStr = setPopShowStr(feature, layer);
                            layer.bindPopup(str + showStr);
                     }
              }).addTo(map);
              renderMap();
       } else if (zoom > 6 && preZoom < 7) {
              if (layer != null)
                     map.removeLayer(layer);
              layer = L.geoJson(city, {
                     style : function() {
                            return {
                                   color : "000",
                                   weight : 0.5,
                                   fillOpacity : 0
                            };
                     },
                     onEachFeature : function(feature, layer) {
                            var str ="区划名称:"+feature.properties.Name_CHN+"<br>";
                            var showStr = setPopShowStr(feature, layer);
                            layer.bindPopup(str + showStr);
                     }
              }).addTo(map);
              renderMap();
       }
       preZoom = zoom;
})

3、查询地理大数据API

显示了边界数据之后就到了重点之处,因为我在显示边界数据的时候填充颜色全是透明的颜色,所有的要素颜色都是一样的,那么要怎么样才能像设计图中所展示的那样不同的省份显示不同的颜色呢?这里我以显示省界数据为例简单的说一下原理,其实刚刚开始实现这个功能的时候我是不理解的,不清楚如何才能将不同的省份画上不同的颜色,这个理解现在看来感觉是一半对一半错,错的地方在于填充颜色并不是每个省都不相同,填充的时候不是根据省份不同而进行填充不同的颜色,对的地方在于确实是填充了很多不同的颜色构成了那副色彩斑斓的地图,那么这其中肯定是有一个依据的,正是根据这个依据将特定的省份填充对应的颜色,从而显示效果是省份不同颜色不同,这也正说明在显示省界数据的时候一个省份作为一个要素,根据这个要素的某一个属性值决定了这个要素的表现样式,那么关键点就出来了,即如何得到要素的这个属性值?那么地理大数据API接口的作用就体现出来了,根据相应的地理大数据类型查询API接口,查询成功之后会返回一个值,这个值就是这个要素显示样式的决定因素,但是仅仅有这个值是不够的,因为从图例版中就可以看出,全部颜色分组只有12组,而省份有34个,这就必然导致有的省份显示的颜色是相同的,那么就需要将这34个返回的数据按照一定的规则进行分组,分组个数为12个,每一个数据都在一个分组中,对应设定好的颜色值,最后将这个要素的显示颜色改变成这个颜色值,这就是通过某一个属性改变显示样式的原理,最终所有的要素通过这一方式进行渲染不同的颜色,就构成了上图中显示的地图,同时显示出各要素之间的数值差异。
了解了原理之后,就要开始调用地理大数据的API了,地理大数据API是一套适用于数据分析挖掘应用的开发接口,您可以在C#、C++、Java、Python等应用程序中使用该服务,通过发起HTTP请求方式调用捷泰天域地理大数据服务,返回相应的JSON或XML数据。
刚刚所说的关键之处就是要查询地理大数据API得到返回的数值,那么就必须知道如何进行查询,查询方式为根据获取到的key,拼接codes和field,构成一个查询url,发起一个http请求,即可返回相应的数据,查询url示例为http://domain/{key}/macroquery?codes=110000,120000&field=county_pop  ,以人口数据的总人口省界数据为例,查查询的key为83c11f4076d483549ca9f0d5f6aaeba1d26e969255e80bd0a4f69cce3deaceeb,code为"110000,120000,130000,140000,150000,210000,220000,230000,310000,320000,330000,340000,350000,360000,370000,410000,420000,430000,440000,450000,460000,500000,510000,520000,530000,540000,610000,620000,630000,640000,650000,710000,810000,820000",可知这些代码为34个省份的区域代码,field为pop,即整个请求的url为http://api.geoq.cn/83c11f4076d483549ca9f0d5f6aaeba1d26e969255e80bd0a4f69cce3deaceeb/macroservice/macroquery?codes=110000,120000,130000,140000,150000,210000,220000,230000,310000,320000,330000,340000,350000,360000,370000,410000,420000,430000,440000,450000,460000,500000,510000,520000,530000,540000,610000,620000,630000,640000,650000,710000,810000,820000&field=pop&random=0.9109209512826055,将此url发送一个http请求,即可得到返回的34个省的人口数据。再根据规定好的颜色分组,将此34个省的数据按照大小分布放到相应的分组中,每一个分组代表一个颜色,颜色的深浅同时代表人口数据的大小。改变各个要素的颜色使用此方法
layer.setStyle(function(feature) {
var color = setLayerStyle(kclass, feature.properties.Prov_Code);
       if (color == null) {
              return {
                     fillOpacity : 0
              };
       }
       return {
              color : color,
              fillOpacity : 0.5
       };
});

其中function()的参数feature即是每一个省份要素,说明setStyle方法内部为循环34次,直到所有的要素均能遍历到,再通过返回的颜色为各个要素设置不同的颜色。
         以上就是整个地理大数据页面的开发过程,从不懂原理到成功显示出地图,一步一步还原设计图的过程中,虽然出现了很多bug,调样式兼容各个设备有时候让人抓狂,但是最后看到页面开发完成之后的效果,还是觉得挺高兴的。