JS API之基础篇(六)

本文是JS API基础教程系列的第六篇,重点介绍如何使用SceneLayer展示大量3D数据和现实世界模型。内容涵盖SceneLayer、SceneLayerView和UniqueValueRenderer的基础知识,以及通过示例演示了Feature masking和纹理建筑颜色定制。通过理解这些概念,开发者可以更好地在3D场景中管理和可视化数据。
摘要由CSDN通过智能技术生成

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键获取焦点,且访问的顺序是按照元素在文档中的顺序来focus,即使采用了浮动改变了页面中显示的顺序,依然是按照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,反之为replace时,值为replac2

Demo 展示

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

Feature masking with SceneLayer

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0, initial-scale=1.0, user-scalable=no"&g
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值