如果你没有你所在城市的3D模型，可以在Living Atlas中搜索看看是否有现成的城市Web场景。获取Web场景的id，并使用这个id作为url参数来加载这个应用程序。

例如，如果要查看id是9eea926653b84bc093760d4b08d84190的Web场景，请按这样的方式来加载该应用程序：

https：//ralucanicola.github.io/JSAPI_demos/sketch-the-city/index.html？id = 9eea926653b84bc093760d4b08d84190

如果你没有在Living Atlas中找到你所在城市的web scene，请尝试查看您所在的城市是否有一个开放数据门户网站，该门户网站上是否发布过一些建筑物的3D模型。

如果你有现成的建筑物3D模型的话，可以将其作为场景图层（scene layer）发布到ArcGIS Online。场景图层启动运行后，转到SceneViewer并创建包含场景图层的Web场景。这有一个关于如何使用SceneViewer创建Web场景的简短教程：

https://developers.arcgis.com/labs/arcgisonline/create-a-web-scene/

一点小提示：你可以在你的web场景中添加一些幻灯片（Slides），来标记你所在城市的兴趣点。教程：

https://doc.arcgis.com/en/arcgis-online/create-maps/capture-scene-slides.htm

这些幻灯片会显示成如下样式：

保存Web场景后，就可以使用Web场景的id作为url参数来加载这个应用程序了：

https://ralucanicola.github.io/JSAPI_demos/sketch-the-city/index.html?id=your_webscene_id

下图是我使用Sketch the city应用程序自动生成的城市素描草图，供大家欣赏~

金门大桥，旧金山

埃菲尔铁塔，巴黎

帝国大厦，纽约

柏林宫和亚历山大广场，柏林

怎么样，看着很酷炫吧？是不是也很好奇这个是怎么做出来的呀？接着往下看！

下面是创建素描草图应用程序所需的3个关键步骤：

1、在SceneLayer上设置带有草图边缘的渲染器

SceneLayers是通过草图边缘和半透明白色面来绘制的。这是我在WebScene中应用于每个SceneLayer的渲染器：

2、设置背景图像

我在文档body上设置了一张带有旧纸张纹理的背景图像。通过使用具有透明背景的SceneView，这些建筑物看起来就像在旧旧的素描图。

把下面的CSS应用到body中，使该背景图像覆盖整个在屏幕上显示的区域：

3、在SceneView上设置透明背景

我要把SceneView中的背景设置为透明，这样就能把我刚刚设置的背景图片显示出来。为此，我将背景透明度设置为0。在初始化时，alphaCompositingEnabled也应该设置为true：

以上三步就是这个应用程序的主要步骤！

如果你比较好奇具体时如何实现的，请移步Github来查看这个应用程序代码。链接：

https://github.com/RalucaNicola/JSAPI_demos/tree/master/sketch-the-city

或直接使用Sketch the city 这个web应用，来玩一玩吧~链接：

https://ralucanicola.github.io/JSAPI_demos/sketch-the-city/

想要获取更多信息，请点击阅读原文。