JS API之基础篇(六)

JS API之基础篇(六)

又见面了~~前几篇文章篇幅有点长,啃起来比较乏味,以后缩短篇幅每周发一篇。首先我们来解决上篇文章的遗留问题:

问题1:

form:Demo - Create a FeatureLayer with client side graphics

视图上显示的Earthquake是legend.Infos.title指定要在其符号和说明上方显示的图层的标题,而Magnitude则是在field中定义的符号的说明。

问题2:

form:Demo - Query features from a FeatureLayerView

watch方法用于监督updating是否更新,如果更新就执行这个函数,并把更新的值传入,就是val。

问题3:

form:Demo - Query features from a FeatureLayerView

tabindex用来定位html元素,当tabindex=0时,该元素可以用tab键获取焦点,且访问的顺序是按照元素在文档中的顺序,即使采用了浮动改变了页面中显示的顺序,依然是按照html文档中的顺序来定位。

Demo展示

通过scenelayer展示大量数据

展示现实世界的房子模型

根据需要分类展示

基础知识

SceneLayer

SceneLayer 是为按需流而设计的层类型, 在SceneView中显示大量数据。SceneLayer 支持两种几何类型:点和3D 对象。SceneLayers 可以用渲染可视化,3D 对象可以使用MeshSymbol3D进行样式。

同样的它也继承layer的属性和方法。

SceneLayerView

基础内容上篇文章已经提到,这次主要讲讲他们之间的区别

MeshSymbol3D 用于在 3D SceneView的SceneLayer中呈现3D mesh feature。在 2D MapViews 中不支持此符号类型。MeshSymbol3D 仅包含一个符号层FillSymbol3DLayer。

UniqueValueRenderer

UniqueValueRenderer 根据一个或多个匹配的字符串属性来代表图层中的特征。创建构造函数时, 必须指定要从中定义唯一type的字符串field ,每个type及其关联的symbol也必须使用构造函数中的addUniqueValueInfo ()方法或uniqueValueInfos属性来定义,UniqueValueRenderer 还可用于将数字数据属性与唯一值结合在一起进行主题可视化,比如颜色/不透明度等不同的值显示的颜色和不透明度也不相同。

属性

field用于匹配唯一值或类型的属性字段的名称。

legendOptions有关的图例信息,属性值有:title显示为图例中相应renderer的标题, 并优先于field alias或valueExpressionTitle.

uniqueValueInfos(Object[])根据不同的值显示渲染不同的效果。属性值有: value对特征进行分类。symbol:不同的value对应不同的样式。label:描述与value对应的feature的标签。

visualVariables可视化参数。

Demo讲解

Feature masking with SceneLayer

这个demo实现的效果是,点击一栋建筑物就把它隐藏,点击clear按钮就显示所有被隐藏的建筑物。这个实例运用到的主要属性是definitionExpression,只有符号这个表达式的才会呈现在界面上。

第一步:创建场景和视图之后,我们要知道哪些图层是用于显示建筑物的,只有在有建筑物的图层上设置definitionExpression才有效果,我们通过find方法,返回一个包含建筑物信息的scenelayer。由于我们只是把建筑物隐藏了,而不是彻底删除,所以我们需要一个数组来放置我们隐藏的建筑物,便于恢复。

第二步:在视图上添加点击事件,用户交互确定隐藏哪个建筑物。首先我们根据hitTest判断点击的点是否是建筑物。

第三步:如果确定是建筑物,根据建筑物的id通过OBJECTID NOT IN把这个建筑物移除表达式。

第四步:为clear绑定点击事件。

Coloring options for textured buildings

根据不同类型的建筑物进行不同颜色,纹理上的渲染,以便突出表达。

第一步:通过构造getUniqueValueRenderer函数对不同的特征进行不同的渲染。它接受两个参数,一个是color,另一个是colorMixMode(如何将材料color应用于几何图形颜色/纹理信息)。

第二步:分析不同的情况,传入不同的参数。第一种情况不需要渲染,原始表达。第二种是筛选商业建筑,不传入参数,把居住的房屋显示为[230, 230, 230, 0.7]第三种是突出商业建筑,传入参数,展现商业建筑不同的颜色和纹理。第三种,colorMixMode设置为tint,把颜色运用到纹理上。第四种移除纹理,colorMixMode设置为replace,统一显示为白色。

分析: 三元操作符

语法是 条件 ? 结果1 : 结果2,如下图:当type=desaturate,colorMixMode就是tint,反之type为replace时,值为replac

Demo 展示

这里就简单的展示两个比较复杂的Demo

Feature masking with SceneLayer

Coloring options for textured buildings

参考资料

【1】ArcGIS for Developer.https://developers.arcgis.com/javascript/

想要了解更多内容,快来关注我呦~~

版权声明:本文为本人原创文章,未经允许不得转载

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180328G1YG8200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券