预览
- 当ui组件通过
view.ui.move(['zoom', 'navigation-toggle', 'compass'], 'bottom-right');来设置组件位置时，只要在top-是正常显示的，就是多个组件竖列显示，但bottom-就会横排显示，感觉美观性不好。
image.png
此时，仅仅需要在css中设置
flex-flow: column;即可，此时多个组件会竖列依次显示，但紧密的罗列在一起，设置esri-component的margin-bottom或者margin-top即可。以bottom-right为例，做以下设置即可。
.esri-ui-bottom-right{
flex-flow: column;
.esri-component{
margin-bottom: 5px;
}
}
2.工作中遇到这样一个需求，每个国家对应一个数量，根据国家数量的不同，在地图上为该国家填充不同的颜色。
官网给出的SimpleRenderer示例大都是给定一个url,设置featureLayer的url，然后指定一个字段，对该字段进行color,size或opacity等的填充，但在开发中，往往是动态数据的填充，所以，这些例子都有点远水解不了近渴。官网倒是给出了一个MapImageLayer结合Sublayer用以绑定自己的地图和给定的数据进行对应，但这些数据需要存放在esri的工作空间中，也不符合我目前的开发需求，所以，又回归到了自定义featureLayer来实现目前需求。
查询界面.png
在该界面中，设定自己的搜索条件，返回geometry，发送测试数据，若返回符合该查询条件的所有轮廓，则为正确，复制该url，将f=html改为f=json，打开该url，你将看到返回的json结果，若觉得该url过长，则可以将查询条件为空的去除掉，不影响结果，在浏览器中可以打开该url即可。
然后在你的后台中，程序运行起来后发送一个请求给这个url,让你的后台先缓存这个请求的结果，在后台可以将该json数据处理成前端需要的数据结构。
image.png
我的数据处理后放置在feature中，key值为国家名称，value为国家的中英文和轮廓，轮廓很重要的，一定要返回并保存。
页面初始化时，先获取这些轮廓数据，因为数据比较多，获取时间相对较长，所以，获取之后用一个全局变量存储即可，方便后续直接调用。
下面代码中的agg为传入参数，参数格式为：
image.png
key值为国家名称，value为国家数量。
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/symbols/PictureMarkerSymbol",
"esri/geometry/support/webMercatorUtils",
"dojo/domReady!"
],
function (Map, SceneView, GraphicsLayer,FeatureLayer, Graphic, PictureMarkerSymbol, webMercatorUtils) {
var graphics=[];
for(var item in countryFeatureSet){
var country=countryFeatureSet[item];
var attr=country.attributes;
if(country.geometry&&country.geometry.rings&&agg[item]){
var rings=country.geometry.rings;
attr['count']=agg[item];
var polygon = {
type: "polygon", // autocasts as new Polygon()
rings: rings
};
var graphic=new Graphic({
geometry: polygon,
attributes: attr
});
graphics.push(graphic);
}
}
var defaultSym = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
outline: { // autocasts as new SimpleLineSymbol()
color: "green",
width: 0.5
}
};
var renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: defaultSym,
label: "% population in poverty by county",
visualVariables: [{
type: "color",
field: "count",
stops: [
{
value: 10000,
color: "yellow",
label: "<10"
},
{
value:50000,
color: "red",
label: ">20"
},
{
value: 100000,
color: "green",
label: "<30"
},
{
value:1000000,
color: "blue",
label: ">40"
}]
}]
};
var lyr = new FeatureLayer({
fields: [
{
name: "count",
alias: "count",
type: "double"
}],
objectIdField: "count",
geometryType: "point",
spatialReference: {wkid: 4326},
source: graphics,
renderer: renderer // UniqueValueRenderer based on `type` attribute
});
map.add(lyr);
});
graphics中存放所有的图片，这些图片后续作为source传给FeatureLayer,注意在graphic创建的时候给attributes添加了一个名为count的属性，该属性存放国家的数量，在FeatureLayer的fields中，也有一个count与之对应，此时在renderer的visualVariables中，就可以取field为count,然后stops中设置不同数量对应的color值了。
注：在官网示例中，大都有normalizationField字段的设置，官网给出的解释是对数据进行标准化的数字属性字段的名称，添加该字段后stops中对应的value值应为百分比。最后也没明白啥意思(主要是没搞明白这个字段应该是总数么，后续需要设置百分比？)，但是不设置该字段，将stop中的值设置为真实数量就可以解决该问题了。
网友评论