Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Esri/react-sceneview
React component that wraps the ArcGIS JS API 4.x SceneView
https://github.com/Esri/react-sceneview
arcgis-js-api react react-components web
Last synced: about 2 months ago
JSON representation
React component that wraps the ArcGIS JS API 4.x SceneView
- Host: GitHub
- URL: https://github.com/Esri/react-sceneview
- Owner: Esri
- License: apache-2.0
- Created: 2018-10-18T10:48:06.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-11-10T17:19:36.000Z (almost 3 years ago)
- Last Synced: 2024-06-21T18:41:17.874Z (3 months ago)
- Topics: arcgis-js-api, react, react-components, web
- Language: JavaScript
- Homepage:
- Size: 261 KB
- Stars: 11
- Watchers: 6
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: license.txt
Awesome Lists containing this project
README
# **DEPRECATED**
This project is no longer actively maintained.
---
# react-sceneview
A simple Esri [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html) react component that builds on the [ArcGIS API for JavaScript](https://developers.arcgis.com/javascript/index.html).
## Table of Contents
- [Installing](#installing)
- [Examples](#examples)
- [Props](#props)
- [Issues](#issues)
- [Contributing](#contributing)
- [Licensing](#licensing)
## Installing
```
$ npm install --save react-sceneview
```
Then, just import to your React component:
```jsx
import { SceneView, Scene } from 'react-sceneview';
```
## Examples
```jsx
import React from 'react';
import { render } from 'react-dom';
import { SceneView, Scene, Webscene } from 'react-sceneview';
render(
,
document.getElementById('root'),
);
```
Add a [WebScene](https://developers.arcgis.com/javascript/latest/api-reference/esri-WebScene.html) and/or individual layers:
```jsx
```
Supports various features such as UI widgets, custom basemaps, selection, highlights, definitionExpression, etc...
```jsx
```
Dynamically add and remove layers:
```jsx
{layers.map(({ layerId, ...layerSettings }) => (
))}
```
Supports client-side graphics: dynamically add and remove graphics from feature layer.
```jsx
{graphics.map(graphic => (
)}
```
## Props
### SceneView
| Name | Type | Default | Description |
| :------------ | :------------- | :------ | :---------- |
| id | string | | Unique id of this sceneview. This id is used to handle hot module reloading and other component refreshes. |
| environment | object | | Environment parameters of the sceneview. |
| goTo | object | | Sets the view to a given target `camera` or `geometry`. |
| onClick | function | | Callback fired after a click in the SceneView. Returns hit test results. |
| onMouseMove | function | | Callback fired after a mouse move (hover) in the SceneView. Returns hit test results. |
| onCameraChange | function | | A callback fired after the camera has been changed. Returns the new `camera` object. |
### Scene
| Name | Type | Default | Description |
| :------------ | :------------- | :------ | :---------- |
| basemap | string | `gray-vector` | Specifies a basemap for the map. One of `['streets', 'satellite', 'hybrid', 'topo', 'gray', 'dark-gray', 'oceans', 'national-geographic', 'terrain', 'osm', 'dark-gray-vector', 'gray-vector', 'streets-vector', 'topo-vector', 'streets-night-vector', 'streets-relief-vector', 'streets-navigation-vector']`. |
| ground | string | `world-elevation` | Specifies the surface properties for the map. |
| initialViewProperties | object | | This object contains properties such as `viewpoint`, `spatialReference`, `viewingMode`, and `environment` that should be applied to the SceneView when the scene loads. |
### Layer
| Name | Type | Default | Description |
| :------------ | :------------- | :------ | :---------- |
| id | string | | Unique id used to reference the layer. |
| url | string | | URL of scene or feature layer. If omitted, a layer `source` is required. |
| visible | bool | `true` | Indicates if the layer is visible in the SceneView. |
| selectable | bool | `false` | Indicates if features on this layer are returned in `onClick` and `onMouseMove` events, as well as from the selection tools. |
| highlight | array | `[]` | Feature object ids to be highlighted (usually selection). |
| definitionExpression | string | | The SQL where clause used to filter features on the client. |
| renderer | object | | The renderer assigned to the layer, supplied as an [Auto-casting object](https://developers.arcgis.com/javascript/latest/guide/autocasting/index.html). |
| rendererJson | object | | The renderer assigned to the layer, supplied as a JSON object generated from a product in the ArcGIS platform. |
| labelingInfo | object | | The label definition for this layer, specified as an array of [LabelClass](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-LabelClass.html). |
| labelsVisible | bool | `false` | Indicates whether to display labels for this layer. |
| refresh | number | | Change value to refresh the layer. |
| outFields | array | | Attribute fields which will be exposed (_e.g._, through selection callbacks). |
If using client-side graphics, the following props are required:
| Name | Type | Default | Description |
| :------------ | :------------- | :------ | :---------- |
| geometryType | string | | Geometry type when using client-side graphics. |
| fields | array | | Attribute fields when using client-side graphics. |
| objectIdField | string | | Object id field when using client-side graphics.|
### Graphic
| Name | Type | Default | Description |
| :------------ | :------------- | :------ | :---------- |
| geometry | object | | The geometry that defines the graphic's location. |
| attributes | array | | Name-value pairs of fields and field values associated with the graphic. |
| symbol | object | | The Symbol for the graphic. |
### CustomBasemap
| Name | Type | Default | Description |
| :------------ | :------------- | :------ | :---------- |
| portalItem | object | | The portal item (WebMap or [WebScene](https://developers.arcgis.com/javascript/latest/api-reference/esri-WebScene.html)) containing the custom base map. |
### CustomElevationLayer
| Name | Type | Default | Description |
| :------------ | :------------- | :------ | :---------- |
| url | string | | URL pointing to the Elevation layer resource on an ArcGIS Image Server. |
### UI.Zoom, UI.Compass, UI.NavigationToggle
| Name | Type | Default | Description |
| :------------ | :------------- | :------ | :---------- |
| position | string | | Position of the UI widget. One of `['top-left', 'top-right', 'bottom-right', 'bottom-left']`. Default is `'top-left'`. |
## Issues
Find a bug or want to request a new feature? Please let us know by submitting an issue.
## Contributing
Esri welcomes contributions from anyone and everyone. Please see our [guidelines for contributing](https://github.com/esri/contributing).
## Licensing
Copyright 2019 Esri
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
A copy of the license is available in the repository's [license.txt](/license.txt) file.