您的位置：首页 > Web前端 > JavaScript

arcgis api for javascript(一)使用自定义数据对FeatureLayer进行渲染

2016-06-27 11:38 776 查看
基于arcgis api for javascript3.17，arcgis server10.3

本文主要针对esriGeometryPolygon型（面要素）FeatureLayer中添加自定义属性列的需求。这种client端的数据修改并不会保存到server端

我们知道一般的渲染我们是通过使用FeatureLayer里的值来实现的。但经常有这样的需求，我们需要使用外部的数据（非FeatureLayer图层里自带的数据）来对某一个图层进行渲染，难道还需要我们在arcmap里重新给shp文件添加该列数据然后重新发布service吗？

比较正规的做法是开启服务的Feature Access功能。如下图



但开启该功能需要在发布时指定数据库，否则会报错。详情可以百度ArcGIS server发布FeatureAccess

于是笔者首先想到了使用自定义FeatureLayer。这种自定义的FeatureLayer虽然能解决点和线的需求，但无法解决面要素的增加数据的需求，难不成你还打算在js中自定义绘制中国地图啊


自定义点或者线的FeatureLayer笔者可能会在另一篇博客中给出，当前只说明如何在面要素的FeatureLayer中增加数据。

主要实现原理：

featureLayer.graphics[i].attributes["nico"]=1;
该方法可以直接修改（或添加）FeatureLayer的属性，但这种修改只存在于client端，修改的数据不影响server端。

好的，然后贴出全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<script src="https://js.arcgis.com/3.17/"></script>
<style>
body{
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
margin: 20px 20px 20px 20px;
width: 1000px;
height: 800px;
padding: 0;
border:1px solid #000;
}
</style>
<script>
require([
"dojo/_base/connect",
"dojo/dom",
"dojo/on",
"esri/InfoTemplate",
"esri/map",
"esri/layers/FeatureLayer",
"esri/renderers/SimpleRenderer",
"esri/Color",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/domReady!"
], function(connect,dom, on, InfoTemplate, Map, FeatureLayer,SimpleRenderer,Color,SimpleFillSymbol,SimpleLineSymbol) {
var map = new Map("map", {
basemap: "topo",
center: [121, 35],
zoom: 4,
minZoom: 3,
maxZoom: 10,
logo: false
});
//笔者server上的图层
var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/ChinaProvince/MapServer/0",{
//注意这里的mode一定要指定MODE_SNAPSHOT，否则每次放大或缩小或者是平移都会执行FeatureLayer的update-end操作
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
map.addLayer(featureLayer);
//定义一个render对FeatureLayer自定义的数据进行渲染
var renderer = new SimpleRenderer(new SimpleFillSymbol().setOutline(new SimpleLineSymbol().setWidth(0.1).setColor(new Color([128,128,128]))));
renderer.setColorInfo({
//使用nico属性进行渲染
field: "nico",
minDataValue: 0,
maxDataValue: 40,
colors: [
new Color([0, 255, 0]),
new Color([255, 0, 0])
]
});
featureLayer.on("update-end", function(){
//输出其中一个graphic(面要素)的所有属性
for(var i = 0;i<featureLayer.graphics.length;i++){
//自定义数据，在每个面要素中添加nico属性
featureLayer.graphics[i].attributes["nico"]=i;
}
featureLayer.setRenderer(renderer);
featureLayer.redraw();
//输出FeatureLayer中所有的graphic数
console.log("number of graphics in featureLayer:"+featureLayer.graphics.length);
//输出其中一个graphic(面要素)的所有属性
console.log("10th graphic attributes in featureLayer:");
console.log(featureLayer.graphics[10].attributes);
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
需要注意的事项都在代码中说明了，另外需要强调的是，FeatureLayer请一定要使用ArcGISDynamicMapServiceLayer中的FeatureLayer图层，如果是ArcGISTiledMapServiceLayer的FeatureLayer，则会产生很多的小块graphic，增加数据十分不易。

上述代码的效果图如下：



然后我们看看打印的内容：



显示FeatureLayer中的graphic数是34，对应中国的34个省以及直辖市。

然后输出了其中一个graphic，是青海省，我们看到了加进去的nico这一列数据，注意这一列在server端是没有的。

注意，如上所述，ArcGISTiledMapServiceLayer的FeatureLayer中的graphic数可远不止这么点，它会把整个graphic切成许多小的graphics.

以上就完成了在FeatureLayer中对每个要素自定义数据。

这种需求可以使得我们把数据保存在其他数据库中，当需要的时候取出来然后和FeatureLayer中的属性进行关联以渲染图层。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  arcgis server arcgis arcgis api for javas FeatureLayer自定义数据 FeatureLayer增加数据
相关文章推荐
新的分享
章节导航