12月18日新版ArcGIS JavaScript API 4.0beta3上线,相比beta2在最新的4.0beta版中并没有特别大的功能增加,但是从这个版本的我们可以感受到为下一个beta版做的铺垫。组件更加友好,对于第三方JS框架的支持也越来越好。虽然现在功能上还是比较弱,但是整体上来说4.x版本的JS API在架构的性能上会有一个大的提升,在易用性和兼容性上也会大大增强。相比4.0beta2,在beta3中的新特性主要表现在以下几个方面。
1 更加友好的组件开发
所有组件在4.0API中被重新构建以提高他们的扩展和定制能力,现在每个已有的组件的展现都是与属性、方法和数据相独立的。
这种将核心逻辑代码与组件的展现相分离的方式使得每个小部件可以使用其他框架和库(诸如Bootstrap、React和JQuery等)进行深度定制样式。4.0的API是基于Dojo,但是其组件并不是完全依赖于dojo的dijit框架,小组件的展示基于dijit框架,但是核心逻辑代码并不是。因此这些小组件也可以被修改为使用自定义的CSS和本机的HTML。
每个小组件的属性和方法现在使用viewModel来处理,这是一个基于Accessor的类。由于这个类扩展了Accessor小组件中的所有属性可以被设置为使用概述页面的属性页。
这种设计允许开发人员使用第三方框架创建新的或者修改现有的小组件。小部件的展现和逻辑代码的分离意味着开发人员可以使用原有的逻辑代码而不使用原有的UI界面。
<span style="font-family:Microsoft YaHei;font-size:14px;">require([
"esri/widgets/Search",
"esri/widgets/Search/SearchViewModel",
"dojo/domReady!"
], function(Search, SearchVM) {
...
var searchWidget = new Search({
//通过 viewModel设置属性改变最终的展现样式
viewModel: new SearchVM({
view: view //在 MapView中实例化
})
}, "searchDiv");
...
});
</span>
注意:小组件的设计是一个还在进行中的工作,因此在beta版中可能发生变化。
2 更加一致的API来处理渲染
现在SimpleRenderer、UniqueValueRendererClassBreaksRenderer扩展了Accessor类。渲染器的所有属性可以直接在构造函数中设置对象或直接在实例化类时添加。
例如,在4.0beta2中声明一个单一值渲染(UniqueValueRenderers)使用如下方式:
<span style="font-family:Microsoft YaHei;font-size:14px;">var defaultSym = new SimpleFillSymbol();
var renderer = new UniqueValueRenderer(defaultSym, "myField");
</span>
在4.0beta3中你可以将相同的构造器直接写入一个构造函数对象中:
<span style="font-family:Microsoft YaHei;font-size:14px;">var renderer = new UniqueValueRenderer({
defaultSymbol: defaultSym,
attributeField: "myField"
});
</span>
任何属性都可以在实例化渲染类之后再添加:
<span style="font-family:Microsoft YaHei;font-size:14px;">renderer.attributeField2 = "mySecondField";
renderer.attributeField3 = "myThirdField";
</span>
3 新的占位符语法
<span style="font-family:Microsoft YaHei;font-size:14px;">// 旧的占位符 (带一个美元符):
${placeholder}
// 新的占位符 (不带美元符):
{placeholder}
</span>
这是我认为beta3中最大的改变,占位符一直是JS API所支持的,这可以在提前构建的模板中占据字符的空间,为后续的数据填充提供方便。这种占位符之前广泛应用在诸如弹出窗,搜索框, WebTiledLayer等类中。
新API为了避免与ES6中模板字符串使用$ {占位符}的语法冲突。因此采取了这种去掉$的做法。
例如在WebTiledLayer中
旧的写法是:
<span style="font-family:Microsoft YaHei;font-size:14px;">var tiledLayer = new WebTiledLayer({
urlTemplate: "http://${subDomain}.tile.stamen.com/toner/${level}/${col}/${row}.png",
subDomains: ["a", "b", "c", "d"],
copyright: "Copyright here ..."
});
</span>
现在新的写法是:
<span style="font-family:Microsoft YaHei;font-size:14px;">var tiledLayer = new WebTiledLayer({
urlTemplate: "http://{subDomain}.tile.stamen.com/toner/{level}/{col}/{row}.png",
subDomains: ["a", "b", "c", "d"],
copyright: "Copyright here ..."
});
</span>
4 新增加的类
PortalUser
继承自Accessor类,用于给用户本身和用户作所在组的管理员返回注册用户的详细信息。具体请查看ArcGIS Portal API REST documentation for the user
PortalFolder
继承自Accessor类,用于提供组织门户的内容列表。
5新增加的例子
OAuth 2.0授权online账户的使用
利用OAuth 2.0机制第三方应用可以获取online部分用户信息。类似于通过QQ登录访问第三方的网站一个意思。
6 bug的修复
修复了矢量切片图层( Vector Tile Layer)中空白的地图中出现间歇性的故障错误。