Skip to content

Commit b2209c1

Browse files
Han-D-PeterHan-D-Peter
authored
Merge pull request #31 from Han-D-Peter/feature/selecting-feature
Feature/selecting feature
2 parents 84f68e6 + 4d6b564 commit b2209c1

63 files changed

Lines changed: 36966 additions & 697 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎dist/index.es.js‎

Lines changed: 17969 additions & 185 deletions
Large diffs are not rendered by default.

‎dist/index.umd.js‎

Lines changed: 17981 additions & 190 deletions
Large diffs are not rendered by default.

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-openlayers7",
3-
"version": "0.1.20",
3+
"version": "0.2.1",
44
"author": {
55
"name": "Han-D-Peter",
66
"email": "jaesung.sound@gmail.com"
@@ -18,10 +18,10 @@
1818
"types": "dist/index.d.ts",
1919
"dependencies": {
2020
"lodash": "^4.17.21",
21-
"ol": "^7.3.0",
2221
"proj4": "^2.9.0",
2322
"react-scripts": "5.0.1",
24-
"tslib": "^2.5.0"
23+
"tslib": "^2.5.0",
24+
"ol": "^7.3.0"
2525
},
2626
"peerDependencies": {
2727
"@emotion/react": "^11.11.0",

‎src/App.tsx‎

Lines changed: 124 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
1-
import React, { useState } from "react";
1+
import React, { useRef, useState } from "react";
22
import {
33
CustomCircle,
44
CustomMarker,
5+
CustomPolyLine,
56
CustomPolygon,
7+
CustomRectangle,
68
} from "./lib/Map/layer/annotation";
7-
import InnerText from "./lib/Map/Text";
8-
import FullScreenFeature from "./lib/Map/control/FullScreenFeature";
9-
import ControlSection from "./lib/Map/control/layout/ControlSection";
10-
import ZoomFeature from "./lib/Map/control/ZoomFeature";
11-
import CompassWheel from "./lib/Map/control/CompassWheel";
12-
import { TileLayer } from "./lib/Map/layer/tileLayer";
13-
import { ImageOveray, LayerGroup } from "./lib/Map";
14-
import DrawingTools from "./lib/Map/control/DrawingTools";
9+
import { InnerText } from "./lib/Map/Text";
10+
import { FullScreenFeature } from "./lib/Map/control/FullScreenFeature";
11+
import { ControlSection } from "./lib/Map/control/layout/ControlSection";
12+
import { ZoomFeature } from "./lib/Map/control/ZoomFeature";
13+
import { CompassWheel } from "./lib/Map/control/CompassWheel";
14+
import { ImageOverlay, LayerGroup, MapContainer, fromLonLat } from "./lib/Map";
15+
import { DrawingTools } from "./lib/Map/control/DrawingTools";
1516
import { getProfileFromFeature } from "./lib/Map/utils/utils";
16-
import CustomMultiPoint from "./lib/Map/layer/annotation/MultiPoint";
17+
import { CustomMultiPoint } from "./lib/Map/layer/annotation/MultiPoint";
1718
import { icon } from "./lib";
19+
import { Map, View } from "ol";
1820

19-
icon.marker = "images/marker-icon.png";
21+
icon.marker = "/images/marker-basic.png";
22+
icon.selected = "/images/marker-selected.png";
2023

2124
function App() {
2225
const [isShown, setIsShown] = useState(true);
@@ -25,68 +28,107 @@ function App() {
2528
setIsShown((prev) => !prev);
2629
}
2730

31+
const ref = useRef<Map>(null);
32+
2833
return (
2934
<div className="App">
30-
{/* <GeoJsonLayer geoJson={geoJsonSample} /> */}
31-
{/* <TileLayer url="https://tgxe79f6wl.execute-api.ap-northeast-2.amazonaws.com/dev/dev-drone-square-bucket/public/1/manifold/orthomosaic_tiles/{z}/{x}/{y}.png" /> */}
32-
<ImageOveray
33-
imageUrl="images/compass.png"
34-
bounds={[
35-
[126.841384, 35.191316],
36-
[126.841584, 35.191516],
37-
]}
38-
/>
39-
{/* <CustomCircle center={[126.841242, 35.190518]} r[adius={20}>
35+
<MapContainer ref={ref} isAbledSelection>
36+
{/* <GeoJsonLayer geoJson={geoJsonSample} /> */}
37+
{/* <TileLayer url="https://tgxe79f6wl.execute-api.ap-northeast-2.amazonaws.com/dev/dev-drone-square-bucket/public/1/manifold/orthomosaic_tiles/{z}/{x}/{y}.png" /> */}
38+
<ImageOverlay
39+
imageUrl="images/compass.png"
40+
bounds={[
41+
[126.841384, 35.191316],
42+
[126.841584, 35.191516],
43+
]}
44+
/>
45+
{/* <CustomCircle center={[126.841242, 35.190518]} r[adius={20}>
4046
<InnerText size={27} color="red" outline={false}>
4147
hello1
4248
</InnerText>
4349
</CustomCircle> */}
44-
<LayerGroup zIndex={1}>
45-
<CustomCircle center={[126.841884, 35.191516]} radius={20} color="RED">
46-
<InnerText>Circle1</InnerText>
47-
</CustomCircle>
48-
</LayerGroup>
49-
<LayerGroup zIndex={2}>
50-
<CustomCircle center={[126.841784, 35.191406]} radius={20} color="BLUE">
51-
<InnerText>Circle2</InnerText>
52-
</CustomCircle>
53-
</LayerGroup>
54-
{isShown && (
55-
<>
56-
<LayerGroup zIndex={2}>
57-
<CustomMultiPoint
58-
onClick={(event) =>
59-
console.log("event", getProfileFromFeature(event.annotation))
60-
}
61-
positions={[
62-
[126.843684, 35.190616],
63-
[126.840476, 35.190219],
64-
[126.840604, 35.190133],
65-
[126.841268, 35.190381],
66-
]}
67-
>
68-
<InnerText>multi</InnerText>
69-
</CustomMultiPoint>
70-
<CustomPolygon
71-
onClick={(event) =>
72-
console.log("event", getProfileFromFeature(event.annotation))
73-
}
74-
positions={[
75-
[
76-
[126.840884, 35.190816],
77-
[126.840676, 35.190419],
78-
[126.840804, 35.190333],
79-
[126.841068, 35.190581],
80-
[126.840884, 35.190816],
81-
],
82-
]}
83-
>
84-
<InnerText>hello2</InnerText>
85-
</CustomPolygon>
86-
</LayerGroup>
87-
</>
88-
)}
89-
{/* <CustomTextMarker center={[126.841711, 35.190274]}>
50+
<LayerGroup zIndex={1}>
51+
<CustomMarker selected center={[126.841384, 35.191516]}>
52+
<InnerText outline>Marker</InnerText>
53+
</CustomMarker>
54+
<CustomMarker center={[126.841084, 35.191516]}>
55+
<InnerText outline>Marker</InnerText>
56+
</CustomMarker>
57+
<CustomCircle
58+
center={[126.841884, 35.191516]}
59+
radius={20}
60+
color="RED"
61+
>
62+
<InnerText isPopup>Circle1</InnerText>
63+
</CustomCircle>
64+
</LayerGroup>
65+
<LayerGroup zIndex={0}>
66+
<CustomCircle
67+
center={[126.841784, 35.191406]}
68+
radius={20}
69+
color="BLUE"
70+
>
71+
<InnerText>Circle2</InnerText>
72+
</CustomCircle>
73+
</LayerGroup>
74+
{isShown && (
75+
<>
76+
<LayerGroup zIndex={2}>
77+
<CustomMultiPoint
78+
onClick={(event) =>
79+
console.log("event", getProfileFromFeature(event.annotation))
80+
}
81+
positions={[
82+
[126.843684, 35.190616],
83+
[126.840476, 35.190219],
84+
[126.840604, 35.190133],
85+
[126.841268, 35.190381],
86+
]}
87+
>
88+
<InnerText>multi</InnerText>
89+
</CustomMultiPoint>
90+
<CustomPolygon
91+
onClick={(event) =>
92+
console.log("event", getProfileFromFeature(event.annotation))
93+
}
94+
positions={[
95+
[
96+
[126.840884, 35.190816],
97+
[126.840676, 35.190419],
98+
[126.840804, 35.190333],
99+
[126.841068, 35.190581],
100+
[126.840884, 35.190816],
101+
],
102+
]}
103+
>
104+
<InnerText isPopup>hello2</InnerText>
105+
</CustomPolygon>
106+
<CustomPolyLine
107+
positions={[
108+
[126.840684, 35.190816],
109+
[126.840476, 35.190419],
110+
[126.840604, 35.190333],
111+
[126.840868, 35.190581],
112+
]}
113+
>
114+
<InnerText isPopup>hello2</InnerText>
115+
</CustomPolyLine>
116+
<CustomRectangle
117+
positions={[
118+
[
119+
[126.840684, 35.190219],
120+
[126.840476, 35.190219],
121+
[126.840476, 35.190133],
122+
[126.840684, 35.190133],
123+
],
124+
]}
125+
>
126+
<InnerText isPopup>hello2</InnerText>
127+
</CustomRectangle>
128+
</LayerGroup>
129+
</>
130+
)}
131+
{/* <CustomTextMarker center={[126.841711, 35.190274]}>
90132
<InnerText outline>Text</InnerText>
91133
</CustomTextMarker>
92134
<CustomMarker center={[127.9745613, 37.3336563]}>
@@ -106,24 +148,22 @@ function App() {
106148
<InnerText>hello2</InnerText>
107149
</CustomRectangle> */}
108150

109-
{/* <CustomPolyLine
110-
positions={[
111-
[126.840884, 35.190816],
112-
[126.840676, 35.190419],
113-
[126.840804, 35.190333],
114-
[126.841068, 35.190581],
115-
]}
151+
<CompassWheel />
152+
<ControlSection>
153+
<ZoomFeature />
154+
<FullScreenFeature />
155+
<DrawingTools onCanvas />
156+
</ControlSection>
157+
</MapContainer>
158+
<button
159+
onClick={() => {
160+
ref.current?.setView(
161+
new View({ center: fromLonLat([126.840884, 35.190816]), zoom: 10 })
162+
);
163+
}}
116164
>
117-
<InnerText>hello2</InnerText>
118-
</CustomPolyLine> */}
119-
120-
<CompassWheel />
121-
<ControlSection>
122-
<ZoomFeature />
123-
<FullScreenFeature />
124-
<DrawingTools onCanvas />
125-
</ControlSection>
126-
<button onClick={off}>off</button>
165+
off
166+
</button>
127167
</div>
128168
);
129169
}

‎src/index.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import React from "react";
22
import ReactDOM from "react-dom/client";
33
import App from "./App";
4-
import { Map } from "./lib";
4+
55
import "./lib/react-openlayer.css";
66

77
const root = ReactDOM.createRoot(
88
document.getElementById("root") as HTMLElement
99
);
10-
root.render(
11-
<Map>
12-
<App />
13-
</Map>
14-
);
10+
root.render(<App />);

‎src/lib/Map/FeatureContext.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Feature } from "ol";
2+
import { Geometry } from "ol/geom";
3+
import { createContext } from "react";
4+
5+
export interface FeatureContextItems {
6+
selectedFeature: Feature<Geometry> | Feature<Geometry>[] | null;
7+
selectFeature: (
8+
feature: Feature<Geometry> | Feature<Geometry>[] | null
9+
) => void;
10+
unSelectFeature: () => void;
11+
}
12+
13+
export const FeatureContext = createContext<FeatureContextItems | null>(null);

0 commit comments

Comments
 (0)