Webgis实践1:要素地图发布与点击对象查询/feature/InfoTemplate

我想做一个worldmap那样的地图。这是哈佛大学主导的一个世界地图平台,数据非常详实,其中有一个子项是chinaxmap,就是中国历史地图平台。
这个平台上的数据来源于CHGIS,即中国历史GIS项目,复旦历史地理系的禹贡网提供数据下载,http://yugong.fudan.edu.cn/views/chgis_data.php。Worldmap平台上也提供数据下载:http://sites.fas.harvard.edu/~chgis/data/chgis/。
Worldmap平台上的数据格式已经更新成shp格式了,不过禹贡网上的数据格式还是mapinfo的格式,可以在MapInfo上面通过数据转换转成shp格式。
Chinaxmap的平台地址是:https://worldmap.harvard.edu/maps/chinaX
这个平台长这样,对历史研究来说很有用处,唯一美中不足的是英文。
想从无到有做出这么样的一个平台出来,困难肯定有。
那么就从现在开始做吧!
Webgis实践1:要素地图发布与点击对象查询/feature/InfoTemplate_第1张图片

因为复旦禹贡网维修中不能访问,所以我的数据从worldmap平台下载:https://dataverse.harvard.edu/dataset.xhtml?persistentId=doi:10.7910/DVN/PDGOZ0
下载的是V4_Data_Archive.zip,解压后,用shapefiles文件夹中的数据做测试。
选用v4_1820_cnty_pts_gbk.shp、v4_1820_lks_pgn_gbk.shp、v4_1820_rvr_lin_gbk.shp三个文件,正好凑齐点线面,而且文件后缀gbk,指的是GBK编码,有的文件后缀是utf,自己看看吧,我的电脑GBK编码是正常的,但是utf编码的shp文件打开字段里中文都是乱码,这个应该跟电脑环境有关。


本篇想要实现的是,在前端,点击要素,能跳出属性窗口。有点像arcmap窗口中用识别工具点击要素,跳出识别窗口。
Webgis实践1:要素地图发布与点击对象查询/feature/InfoTemplate_第2张图片
目的设定完了,开始进行实践。


1.发布要素地图服务。
选好数据后,首先要做的是发布要素地图服务。
这个可以不赘述了。
发布要素服务按这篇教程做就可以:http://blog.csdn.net/lovecarpenter/article/details/52462207
相关补充问题见这篇:http://blog.csdn.net/sinat_41310868/article/details/79417757
Arcgis10.4以上的版本就不支持server2008了,要升级到2012以上。
看看自己安装的是什么版本的,然后先看补充问题那篇,结合着第一篇安装完server数据库后,再做发布要素服务的工作。
照着这两篇博文,发布要素服务就应该没什么问题了。
注意事项是:
A/可以在sde数据库里新建一个要素集,保证坐标系一致:Xian_1980_GK_Zone_19
WKID: 2333 权限: EPSG。
B/选择要素集,右键——管理——注册版本——勾选“注册所选对象并将编辑内容移动到基表”。
C/把sde数据库中的数据加载进入arcmap中。
D/配置符号,如图,把图层属性都设置一下,三个都设置。NAME_CH是简体中文的名称,保存工程文件mxd。
Webgis实践1:要素地图发布与点击对象查询/feature/InfoTemplate_第3张图片
E/文件——共享为——服务,记得挑上Feature Access。分析,发布。
Webgis实践1:要素地图发布与点击对象查询/feature/InfoTemplate_第4张图片
2.ArcGIS JavaScript点击查询,气泡,InfoTemplate。
在ArcGIS JavaScript开发帮助手册中,对Graphic有介绍:
Geometry定义了对象的形状,Symbol定义了图形是如何显示的,Graphic可以包含一些属性信息,并且在Javascript中还可以使用infoTemplate(一个InfoTemplate包含标题和内容模板字符串,该内容模板字符串用于将Graphic的属性转换成HTML的表达式)定义如何对属性信息进行显示,最终的Graphic则是被添加到GraphicsLayer中,GraphicsLayer允许对Graphics进行事件监听,对于Graphic的描述可以用一个数学表达式来表示:
Graphic=Geometry+Attribute+Symbol+infoTemplate
Webgis实践1:要素地图发布与点击对象查询/feature/InfoTemplate_第5张图片
可见,点击查询的实现应该调用infoTemplate组件。
关于infotemplate的使用,东北林业大学的一位王志强老师有过视频讲解。
ArcGIS for JavaScript WebGIS开发技术- 02-基础知识-图层-要素:
http://v.qq.com/x/page/a0321uh6msi.html
我就是照着这个视频做的。
2.1打开arcGIS Server Manager,找到我刚才发布的地图服务(CHGIScs),点击进去查看,功能——URL——REST URL:https://localhost:6443/arcgis/rest/services/Test/CHGIScs/MapServer
点击链接,进去之后,能看到:
Layers:
mydb.DBO.v4_1820_cnty_pts_gbk (0)
mydb.DBO.v4_1820_rvr_lin_gbk (1)
mydb.DBO.v4_1820_lks_pgn_gbk (2)
点击一个图层链接进去https://localhost:6443/arcgis/rest/services/Test/CHGIScs/MapServer/0,拉到最后能看到Fields的结构:
Fields:

OBJECTID ( type: esriFieldTypeOID , alias: FID )
NAME_PY ( type: esriFieldTypeString , alias: NAME_PY , length: 40 )
NAME_CH ( type: esriFieldTypeString , alias: NAME_CH , length: 30 )
NAME_FT ( type: esriFieldTypeString , alias: NAME_FT , length: 30 )
X_COORD ( type: esriFieldTypeDouble , alias: X_COORD )
Y_COORD ( type: esriFieldTypeDouble , alias: Y_COORD )
PRES_LOC ( type: esriFieldTypeString , alias: PRES_LOC , length: 50 )
TYPE_PY ( type: esriFieldTypeString , alias: TYPE_PY , length: 30 )
TYPE_CH ( type: esriFieldTypeString , alias: TYPE_CH , length: 20 )
LEV_RANK ( type: esriFieldTypeString , alias: LEV_RANK , length: 1 )
BEG_YR ( type: esriFieldTypeInteger , alias: BEG_YR )
BEG_RULE ( type: esriFieldTypeString , alias: BEG_RULE , length: 1 )
END_YR ( type: esriFieldTypeInteger , alias: END_YR )
END_RULE ( type: esriFieldTypeString , alias: END_RULE , length: 1 )
DYN_PY ( type: esriFieldTypeString , alias: DYN_PY , length: 30 )
DYN_CH ( type: esriFieldTypeString , alias: DYN_CH , length: 16 )
LEV1_PY ( type: esriFieldTypeString , alias: LEV1_PY , length: 40 )
LEV1_CH ( type: esriFieldTypeString , alias: LEV1_CH , length: 30 )
LEV2_PY ( type: esriFieldTypeString , alias: LEV2_PY , length: 40 )
LEV2_CH ( type: esriFieldTypeString , alias: LEV2_CH , length: 30 )
NOTE_ID ( type: esriFieldTypeDouble , alias: NOTE_ID )
OBJ_TYPE ( type: esriFieldTypeString , alias: OBJ_TYPE , length: 7 )
SYS_ID ( type: esriFieldTypeString , alias: SYS_ID , length: 16 )
GEO_ID ( type: esriFieldTypeDouble , alias: GEO_ID )
GEO_SRC ( type: esriFieldTypeString , alias: GEO_SRC , length: 10 )
COMPILER ( type: esriFieldTypeString , alias: COMPILER , length: 10 )
GEOCOMP ( type: esriFieldTypeString , alias: GEOCOMP , length: 12 )
CHECKER ( type: esriFieldTypeString , alias: CHECKER , length: 10 )
ENT_DATE ( type: esriFieldTypeString , alias: ENT_DATE , length: 10 )

Shape ( type: esriFieldTypeGeometry , alias: Shape )

这些是我们在html中写JavaScript的参数。

新建一个htm文件,把代码编写进去,做出来的htm长这样,很简单,不过对于初学者来说,已经算是很大进步了。
Webgis实践1:要素地图发布与点击对象查询/feature/InfoTemplate_第6张图片
Htm文件里的全部代码如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CHGIScstitle>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js">script>
    <script type="text/javascript">
        require(["esri/map",
                "esri/layers/ArcGISDynamicMapServiceLayer",
                "esri/layers/FeatureLayer",
                "esri/InfoTemplate"
            ],
            function(Map,ArcGISDynamicMapServiceLayer,FeatureLayer,InfoTemplate){
                var myMap = new Map("mapDiv");
                var lyTiled=new ArcGISDynamicMapServiceLayer("https://localhost:6443/arcgis/rest/services/Test/CHGIScs/MapServer");
                myMap.addLayer(lyTiled);
                var infoTemplate= new InfoTemplate('标题:${NAME_CH}','内容:${PRES_LOC}');
                var dian =new FeatureLayer("https://localhost:6443/arcgis/rest/services/Test/CHGIScs/MapServer/0", { infoTemplate:infoTemplate });
                var xian =new FeatureLayer("https://localhost:6443/arcgis/rest/services/Test/CHGIScs/MapServer/1", { infoTemplate:infoTemplate });
                var mian =new FeatureLayer("https://localhost:6443/arcgis/rest/services/Test/CHGIScs/MapServer/2", { infoTemplate:infoTemplate });
                myMap.addLayers([dian,xian,mian]);
            });

    script>


head>
<body class="tundra">
<div id="mapDiv" style="width:900px;height:600px;border:1px solid #000000;">div>
body>
html>

Esri公司上世纪九十年代开始就在市场上推出了arcgis产品,GIS发展了这么多年,官方的开发者文档和各种大神的教程都挺齐全的,要学习的话,肯定能收集到资料的。
况且,这世界上没有太多的技能和知识,是想学而学不会的。
So,只要用心学,耐得住,总会在不久的将来发布出一个自己的GIS地图平台的。
Htm文件的代码不多,建议照着王志强的视频学一遍。
对代码中的一些关键字做一下解释:
Require了几个相关的内置函数(模块?不知道应该怎么称呼):
“esri/map”:调用地图;
“esri/layers/ArcGISDynamicMapServiceLayer”:调用矢量地图服务,调用切片地图服务是ArcGISTiledMapServiceLayer,注意区别。
“esri/layers/FeatureLayer”:调用要素图层服务。
“esri/InfoTemplate”:这个就是内置模板吧。
function(Map,ArcGISDynamicMapServiceLayer,FeatureLayer,InfoTemplate)中把上面出现的都给到function中,做个声明定义啥的。
addLayer是加载一个图层,addLayers是加载多个图层。
InfoTemplate(‘标题: NAMECH,: N A M E C H ′ , ′ 内 容 : {NAME_CH}’);就是个固定格式,{}里面是字段名。这个也遇到了一个挺棘手的问题,目前还没有解决,就是,NAME_CH在arcmap中的图层属性中设置了唯一值,所以能在infoTemplate中显示出来,不过把NAME_CH换成其他的,就是空的了,有时候还会提示typo:in word。
这肯定是一个要解决的问题。
我目前的设想是,一是字段拆分,二是调用Task做查询。
这是后面将要解决的问题。
Arcgis JavaScript 帮助文档的地址:https://developers.arcgis.com/javascript/3/jsapi/infotemplate-amd.html

关于query和infotemplate的结合应用参见下一篇:http://blog.csdn.net/sinat_41310868/article/details/79605190
在这篇里,通过引用query函数,可以实现点击要素查询到全部属性。

你可能感兴趣的:(WEBGIS,gis,地图,webgis,对象,发布)