Editing Massive Geospatial Data Sets with nebula.gl

栏目: IT技术 · 发布时间: 4年前

Geospatial data, or data tied to a specific, real-world location, is integral to Uber’s ability to better understand the cities we serve. From predicting the most accurate estimated times of arrival (ETAs) to determining the best driving routes , geospatial data empowers us to deliver improved experiences for users across the globe.

But map data is large and complex, and because the world is always changing, we need to update map data frequently. To this end, Uber built and open sourced nebula.gl , a tool set designed for full-featured, accessible, and performant geometry editing in a web browser, even when working with massive data sets.

We built nebula.gl upon Uber’s broader visualization ecosystem, including the open source tools deck.gl and vis.gl , which are used for performant visualization of static data sets. nebula.gl adds sophisticated interactivity, unlocking an infinitely customizable set of geospatial data editing capabilities.

Editing Massive Geospatial Data Sets with nebula.gl
Figure 1. nebula.gl lets users draw a variety of geometry types.

High-performance editing of large data sets

When working with large geospatial data sets, libraries can become quite slow if they rely too much on the CPU or the browser Document Object Model (DOM). Many other browser-based solutions will freeze or crash when attempting to load data sets with many thousands of coordinates. nebula.gl, built on deck.gl, heavily utilizes WebGL and the GPU to deliver fast visualizing and editing, even with many thousands of coordinates.

We designed nebula.gl from the ground up to provide optimized rendering and editing performance, without the need for complex application logic, such as splitting data into subgroups or custom data diffing. nebula.gl handles all events, such as click, drag, and pointer move events, and includes touch screen support, so that applications can focus on their application logic.

Editing Massive Geospatial Data Sets with nebula.gl
Figure 2. In this demonstration of nebula.gl, we use the tool to edit a complex polygon with 14,000 points, enough points to cause other browser-based tools to freeze.

Advanced geospatial editing

nebula.gl provides the basic geometry drawing and editing tools for points, lines, circles, rectangles, and polygons, but goes a step further than most solutions by providing over 30 modes for drawing, editing, and measuring geometries.

Examples include:

    • Drawing new points, lines, or polygons
    • Moving individual vertices
    • Translating, Scaling, and Rotating multiple shapes
    • Unioning, intersecting, and subtracting shapes
    • Measuring distance and angles

There are even more powerful modes such as one we built at Uber for tracing building footprints.

Editing Massive Geospatial Data Sets with nebula.gl
Figure 3. nebula.gl’s“Extrude” edit mode lets users trace building footprints.

Advanced rendering

nebula.gl is a member of the vis.gl ecosystem and integrates seamlessly with other vis.gl frameworks such as deck.gl and loaders.gl .

As a result, nebula.gl seamlessly integrates with all geospatial deck.gl layers, allowing for GeoJSON editing to be interleaved with rich 3D visualizations. Due to this integration, users control how geometries are rendered, allowing for customizing the color, size, dashed lines, icons, as well as the cursor based on the state of the edits.

Editing Massive Geospatial Data Sets with nebula.gl
Figure 4. In the above demo, kepler.gl uses nebula.gl-powered react-map-gl-draw to filter data based on a polygon drawn by the user (see this for more context).

Full GeoJSON support

A core offering of nebula is its full-featured GeoJSON editing capability, which handles the following geometry types of the GeoJSON specification: Point , MultiPoint , LineString , MultiLineString , Polygon , and MultiPolygon as well as working with geometries with an altitude component.

Editing Massive Geospatial Data Sets with nebula.gl
Figure 5. A GeoJSON file with various geometry types is edited via nebula.gl’s EditableGeoJsonLayer.

nebula.gl API

nebula.gl is a browser-based geometry editing library, written in TypeScript. It is designed to provide powerful and flexible capabilities for developers, and provides first-class support for React, but is not dependent on it.

Editing modes

With nebula.gl, geometry editing is accomplished through editing modes. These modes instruct nebula.gl how it should handle user interactions in order to manipulate GeoJSON features and geometries. nebula.gl provides several modes for creating and manipulating points, lines, and polygons. 

If the functionality that nebula.gl provides out-of-the box doesn’t quite meet a use case, developers can extend or create their own editing mode with custom event handling logic without needing to make changes to nebula.gl itself. Editing modes can also compose other modes (e.g. “TransformMode” composes “ScaleMode”, `TranslateMode”, and “RotateMode”).

EditableGeoJsonLayer

EditableGeoJsonLayer is a deck.gl layer that can be passed to deck.gl the same way as other deck.gl layers, and can even be used in conjunction with other deck.gl layers. It exposes a reactive-style interface where data updates are provided through an onEdit callback, but the actual state of the geometries is owned and controlled by the application.

react-map-gl-draw

As powerful as deck.gl is, it is a big dependency for an application that just needs to draw simple 2D shapes on a map. To let applications that do not need deck.gl take advantage of the nebula.gl editing capabilities, the react-map-gl-draw module provides a simple React/SVG component. It is dependent on react-map-gl (a react wrapper for Mapbox JS ) but is not dependent on deck.gl. For users who need geospatial drawing on a map but not deck.gl’s massive data rendering technologies, this is a great option. Check this interactive example to learn more about it.

Next steps

nebula.gl is used in production by several teams at Uber, including our Geofences , Map Storage, and Map Editing teams. But we’d like it to become the reference implementation of web-based geospatial editing. How far we move towards that vision will depend partly on whether we get additional adopters. Some of our current development projects include:

React components

A new editor module was recently built as an easier way to get started with nebula.gl by providing React components. This module currently provides import and export components for importing and exporting between various geospatial data formats (e.g. GeoJSON, WKT, and KML). But we’d like to build additional components, such as a toolbar for switching between modes or navigating to a position, among other uses.

3D editing

nebula.gl is built on deck.gl, which supports 3D, so it is natural to extend editing capabilities into the third dimension.

Apart from defining new edit modes/interaction models and enriching the GeoJSON data with height-related properties, this involves a deep collaboration with the deck.gl team to enable features like order independent transparency, to ensure we can provide optimal visuals.

Editing beyond GeoJSON

nebula.gl includes powerful features for geospatial editing with Web Mercator projection . But we’re looking for use cases beyond this. For instance, nebula.gl could allow labelers, people who manually identify objects in images, to draw outlines around features on images in machine learning labeling workflows. Another use case we’re exploring is taking measurements while visualizing autonomous driving data using other projections.

We look forward to seeing how others in the open source community leverage nebula.gl for their own geometry editing projects. We encourage you to try nebula.gl for yourself by checking out our GitHub repository

!  

Acknowledgements

The nebula.gl team would like to thank Ib Green for his help with this project and editing this article. Without his guidance and support, this project would not have been possible.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

无懈可击的Web设计

无懈可击的Web设计

西德霍姆 / 刘建宁 / 清华大学出版社 / 2009-4 / 59.90元

一个网站,无论视觉上多么美观,内容多么丰富,如果不能面向最广泛的用户群,那它就不算是真正成功的网站。《无懈可击的Web设计:利用XHTML和CSS提高网站的灵活性与适应性》是Web标准设计领域的公认专家Dan Cederholm的倾力之作,向您描述了基于Web标准的设计策略,以适应各种各样的用户浏览方式。书中每一章的开头都给出了一个基于传统HTML技术的实例,然后对它进行重构,指出它的局限性,并利......一起来看看 《无懈可击的Web设计》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

MD5 加密
MD5 加密

MD5 加密工具