Skip to content

Commit 8b41d82

Browse files
ShogoHirasawaShogoHirasawa
authored
feat(web): update geojson example in playground (#1547)
1 parent 6868138 commit 8b41d82

File tree

9 files changed

+357
-39
lines changed

9 files changed

+357
-39
lines changed

‎web/src/beta/features/PluginPlayground/Plugins/presets/index.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,12 @@ import { extensionProperty } from "./data/extensionProperty";
99
import { messengerBetweenExtensions } from "./data/messengerBetweenExtensions";
1010
import { uiExtensionMessenger } from "./data/uiExtensionMessenger";
1111
import { add3dTiles } from "./layers/add-3Dtiles";
12+
import { addPhotogrammetric3dModel } from "./layers/add-photogrammetric-3D-model";
13+
import { addPointCloud } from "./layers/add-point-cloud";
1214
import { addCsv } from "./layers/add-csv";
1315
import { addCzml } from "./layers/add-czml";
1416
import { addGeojson } from "./layers/add-geojson";
17+
import { addLargeGeojson } from "./layers/add-large-geojson";
1518
import { addGooglePhotorealistic3dTiles } from "./layers/add-google-photorealistic-3d-tiles";
1619
import { addKml } from "./layers/add-kml";
1720
import { addOsm3dTiles } from "./layers/add-OSM-3DTiles";
@@ -80,10 +83,13 @@ export const presetPlugins: PresetPlugins = [
8083
id: "layers",
8184
plugins: [
8285
addGeojson,
86+
addLargeGeojson,
8387
addCzml,
8488
addKml,
8589
addCsv,
8690
add3dTiles,
91+
addPhotogrammetric3dModel,
92+
addPointCloud,
8793
addOsm3dTiles,
8894
addWms,
8995
addGooglePhotorealistic3dTiles,

‎web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-csv.ts

Lines changed: 49 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,24 +20,67 @@ const widgetFile: FileType = {
2020
id: "layers-add-csv",
2121
title: "layers-add-csv.js",
2222
sourceCode: `// Example of adding a layer with CSV data
23+
// This shows where the evacuation area in Setagaya-ku,Tokyo
2324
2425
// Define CSV data
2526
const layerCsv = {
2627
type: "simple", // Required
2728
data: {
2829
type: "csv",
29-
url: "https://reearth.github.io/visualizer-plugin-sample-data/public/csv/marker.csv", // URL of CSV
30-
csv: { // Define by column name
31-
lngColumn: "longitude",
32-
latColumn: "latitude",
30+
url: "https://reearth.github.io/visualizer-plugin-sample-data/public/csv/tokyoEvacuationPoint.csv", // URL of CSV
31+
csv: {
32+
// Define by column name
33+
lngColumn: "経度",
34+
latColumn: "緯度",
35+
},
36+
},
37+
// Activate Infobox
38+
infobox: {
39+
blocks: [
40+
{
41+
pluginId: "reearth",
42+
extensionId: "propertyInfoboxBetaBlock",
43+
},
44+
],
45+
},
46+
// Settings for the feature style. This statement is required even if no style is set.
47+
marker: {
48+
style: "image",
49+
image:"https://reearth.github.io/visualizer-plugin-sample-data/public/image/evacuationIcon.svg",
50+
imageSize: 0.5,
51+
label: true,
52+
// Define the column name you want to display as label
53+
labelText: {
54+
expression: "\${施設名}",
55+
},
56+
// Define label positon. "left" | "right" | "top" | "bottom" | "lefttop" | "leftbottom" | "righttop" | "rightbottom";
57+
labelPosition: "top",
58+
labelTypography: {
59+
color: "#FFFFFF",
60+
fontSize: 15,
3361
},
3462
},
35-
marker: {},// Settings for the feature style. This statement is required even if no style is set.
3663
};
3764
38-
// Add the CSV layer from the URL to Re:Earth
65+
// Add the CSV layer from the URL to Visualizer
3966
// Documentation on Layers "add" event: https://visualizer.developer.reearth.io/plugin-api/layers/#add
4067
reearth.layers.add(layerCsv);
68+
69+
// Move the camera to the position where the CSV data is displayed.
70+
// Documentation on Camera "flyTo" event: https://visualizer.developer.reearth.io/plugin-api/camera/#flyto
71+
reearth.camera.flyTo(
72+
// Define the camera position to be moved to
73+
{
74+
heading: 6.283185307179573,
75+
height: 2686.201362510873,
76+
lat: 35.606842852199016,
77+
lng: 139.65424753730483,
78+
pitch: -1.5621792552302458,
79+
roll: 0,
80+
}
81+
);
82+
83+
// data: 東京都オープンデータカタログサイト 避難所・避難場所一覧データ（CC BY4.0） https://catalog.data.metro.tokyo.lg.jp/dataset/t000003d0000000093
4184
`
4285
};
4386

‎web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-geojson.ts

Lines changed: 62 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const widgetFile: FileType = {
2222
sourceCode: `// Example of adding a layer with GeoJSON data
2323
2424
// Define the GeoJSON inline
25-
const layerGeojsonInline = {
25+
const parking = {
2626
type: "simple", // Required
2727
data: {
2828
type: "geojson", // Write the data format
@@ -34,71 +34,103 @@ const layerGeojsonInline = {
3434
type: "Feature",
3535
properties: {},
3636
geometry: {
37-
type: "Polygon",
38-
coordinates: [
39-
[
40-
[-97.52842673316115, 28.604966534790364],
41-
[-97.52842673316115, 10.990084521105842],
42-
[-82.13620852840572, 10.990084521105842],
43-
[-82.13620852840572, 28.604966534790364],
44-
[-97.52842673316115, 28.604966534790364],
45-
],
46-
],
37+
coordinates: [139.6801173467784, 35.664320051880225],
38+
type: "Point",
4739
},
4840
},
4941
{
5042
type: "Feature",
5143
properties: {},
5244
geometry: {
53-
coordinates: [
54-
[-96.37001899616324, 41.04652707558762],
55-
[-79.17331346249145, 40.45826161216959],
56-
],
57-
type: "LineString",
45+
coordinates: [139.68096498886888, 35.66422614308836],
46+
type: "Point",
5847
},
5948
},
6049
{
6150
type: "Feature",
6251
properties: {},
6352
geometry: {
64-
coordinates: [-111.99963039093615, 19.881084591317787],
53+
coordinates: [139.6804930063421, 35.6646252546914],
54+
type: "Point",
55+
},
56+
},
57+
{
58+
type: "Feature",
59+
properties: {},
60+
geometry: {
61+
coordinates: [139.67922154320564, 35.66688684942308],
62+
type: "Point",
63+
},
64+
},
65+
{
66+
type: "Feature",
67+
properties: {},
68+
geometry: {
69+
coordinates: [139.67630295737206, 35.66621385561031],
6570
type: "Point",
6671
},
6772
},
6873
],
6974
},
7075
},
7176
// Settings for the feature style. This statement is required even if no style is set.
72-
polygon: {},
73-
polyline: {},
74-
marker: {},
77+
// Documentation on feature style: https://visualizer.developer.reearth.io/plugin-api/layers/#layer-appearance-types
78+
marker: {
79+
image:
80+
"https://reearth.github.io/visualizer-plugin-sample-data/public/image/parking.svg",
81+
imageSize: 0.15,
82+
},
7583
};
7684
7785
// Define the GeoJSON with URL
78-
const layerGeojsonFromUrl = {
86+
const buildings = {
7987
type: "simple",
8088
data: {
8189
type: "geojson",
8290
// URL of GeoJSON file
83-
url: "https://reearth.github.io/visualizer-plugin-sample-data/public/geojson/sample_polygon_polyline_marker.geojson",
91+
url: "https://reearth.github.io/visualizer-plugin-sample-data/public/geojson/buildings_sample.geojson",
8492
},
8593
polygon: {
86-
fillColor: 'red'
94+
fillColor: "#f5deb3",
8795
},
88-
polyline: {
89-
strokeColor: 'red'
96+
};
97+
98+
const road = {
99+
type: "simple",
100+
data: {
101+
type: "geojson",
102+
// URL of GeoJSON file
103+
url: "https://reearth.github.io/visualizer-plugin-sample-data/public/geojson/road_sample.geojson",
90104
},
91-
marker: {
92-
imageColor: 'red'
105+
polyline: {
106+
strokeColor: "#f5f5f5",
107+
strokeWidth: 2,
93108
},
94109
};
95110
96111
// Add the inline GeoJSON layer to Re:Earth
97112
// Documentation on Layers "add" event: https://visualizer.developer.reearth.io/plugin-api/layers/#add
98-
reearth.layers.add(layerGeojsonInline);
113+
reearth.layers.add(parking);
114+
reearth.layers.add(buildings);
115+
reearth.layers.add(road);
116+
117+
// Move camera position
118+
reearth.camera.flyTo(
119+
{
120+
heading: 0.009823371835937067,
121+
height: 1058.7119398361438,
122+
lat: 35.65662797724089,
123+
lng: 139.67962458714757,
124+
pitch: -0.8118880670484745,
125+
roll: 0.000004443281002686206,
126+
},
127+
// Define camera movement time
128+
{
129+
duration: 2.0,
130+
}
131+
);
99132
100-
// Add the GeoJSON layer from the URL to Re:Earth
101-
reearth.layers.add(layerGeojsonFromUrl);
133+
// data: © OpenStreetMap
102134
`
103135
};
104136

‎web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-large-geojson.ts

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { FileType, PluginType } from "../../constants";
2+
3+
const yamlFile: FileType = {
4+
id: "layers-add-large-geojson-reearth-yml",
5+
title: "reearth.yml",
6+
sourceCode: `id: layers-add-large-geojson-plugin
7+
name: Add Large GeoJSON
8+
version: 1.0.0
9+
extensions:
10+
- id: layers-add-large-geojson
11+
type: widget
12+
name: Add Large Geojson
13+
description: Add Large Geojson
14+
`,
15+
disableEdit: true,
16+
disableDelete: true
17+
};
18+
19+
const widgetFile: FileType = {
20+
id: "layers-add-large-geojson",
21+
title: "layers-add-large-geojson.js",
22+
sourceCode: `// For GeoJSON files with more than 6,000 coordinates, enable the "Prioritize Performance" feature.
23+
// This improves rendering performance and enables smoother visualization of large datasets.
24+
25+
// Note: When this feature is enabled, you cannot apply styles from the Visualizer side.
26+
// To apply custom styles, define them directly in the GeoJSON file.
27+
28+
29+
// Define the GeoJSON
30+
// Default color is yellow
31+
const tokyoBoundary = {
32+
type: "simple",
33+
data: {
34+
type: "geojson",
35+
// URL of GeoJSON file
36+
url: "https://reearth.github.io/visualizer-plugin-sample-data/public/geojson/tokyo-boundary.geojson",
37+
// Activate Prioritize Performance
38+
geojson: {
39+
useAsResource: true,
40+
},
41+
},
42+
polygon: {}
43+
};
44+
45+
// Define a styled GeoJSON layer
46+
// Line color is red (defined in the GeoJSON properties field)
47+
48+
// Example:
49+
// "properties": {
50+
// "stroke": "#fb0404",
51+
// "stroke-width": 2,
52+
// "stroke-opacity": 1
53+
// }
54+
const kanagawaStyledGeoJson = {
55+
type: "simple",
56+
data: {
57+
type: "geojson",
58+
// URL of GeoJSON file
59+
url: "https://reearth.github.io/visualizer-plugin-sample-data/public/geojson/kanagawa_boundary_styled.geojson",
60+
// Activate Prioritize Performance
61+
geojson: {
62+
useAsResource: true,
63+
},
64+
},
65+
polygon: {}
66+
};
67+
68+
// Add the GeoJSON layer from the URL to Visualizer
69+
// Documentation on Layers "add" event: https://visualizer.developer.reearth.io/plugin-api/layers/#add
70+
reearth.layers.add(tokyoBoundary);
71+
reearth.layers.add(kanagawaStyledGeoJson);
72+
73+
// Move camera position
74+
reearth.camera.flyTo(
75+
{
76+
heading: 0.07455195177368523,
77+
height: 176116.1557102376,
78+
lat: 35.508861417865475,
79+
lng: 139.39856564697655,
80+
pitch: -1.5612255074440147,
81+
roll: 0,
82+
},
83+
// Define camera movement time
84+
{
85+
duration: 2.0,
86+
}
87+
);
88+
89+
//data: 国土交通省国土数値情報ダウンロードサイト https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-v2_3.html
90+
`
91+
};
92+
93+
export const addLargeGeojson: PluginType = {
94+
id: "add-large-geojson",
95+
files: [yamlFile, widgetFile]
96+
};

0 commit comments

Comments
 (0)