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/

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

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