머리말
react나 vue3와 openlayers의 조합에 대해서는 인터넷에 사례가 거의 없습니다 오늘은 업무용으로 사용하기 때문에 메모해두겠습니다 ol로 react와 vue3 조합한 사례는 계속 업데이트 하겠습니다 뿌리지 마세요)
1. 오버레이 오버레이를 실현하기 위해 지도 클릭 듣기
먼저 지도를 모니터링하고 판단을 위해 클릭한 지도 요소를 가져와 오버레이를 만듭니다. 아래와 같이 코드 쇼:
interface PropsType {
//父组件传过来的map实例
map?: Map;
}
const Fieldoverlay: React.FC<PropsType> = memo((props: any) => {
//组件绑定的ref
const overlayContainerRef = useRef<any>(null);
//overlay对象ref
const overlayObjRef = useRef<any>();
//解析父组件传过来的数据（map）
const map = props.map?.mapInstance;
//这部分可忽略
type Fieldinfo = {
name: string;
typeName: string;
area: number;
};
const [fielddata, setfielddata] = useState<Fieldinfo[]>([
// { name: '水稻', typeName: '水田', area: 12 }
]);
//解决地图初始化overlay闪现问题
useEffect(() => {
overlayObjRef.current = new Overlay({
element: overlayContainerRef.current,
positioning: 'center-center',
autoPan: true
});
}, []);
useEffect(() => {
if (hxmap) {
overlayObjRef.current = new Overlay({
element: overlayContainerRef.current,
positioning: 'center-center',
autoPan: true
});
//overlayObjRef.current.setPosition('');
hxmap.on('click', function (e: any) {
//删除上一个overlay
overlayObjRef.current.setPosition('');
const feas = map.getFeaturesAtPixel(e.pixel);
if (feas.length == 1 && feas !== undefined && feas[0].name) {
//fielddata这段可以忽略
let fielddatalist = [];
fielddatalist.push({
name: feas[0].values_.name,
typeName: feas[0].values_.type,
area: Number(feas[0].values_.area.toFixed(2))
});
setfielddata(fielddatalist);
//获取地图点击的位置
var overlaycoodinate = map.getCoordinateFromPixel(e.pixel);
overlayObjRef.current.setPosition(overlaycoodinate);
map?.addOverlay(overlayObjRef.current);
} else {
//删除overlay
overlayObjRef.current.setPosition('');
}
if (feas == undefined) {
overlayObjRef.current.setPosition('');
map.getTargetElement().style.cursor = 'auto';
}
});
}
}, [hxmap]);
return (
<div className="overlaydiv" ref={
overlayContainerRef}>
弹窗内容
</div>
);
};
export default Fieldoverlay;
참고:
1. 오버레이의 요소: overlayContainerRef.current, 오버레이 객체 overlayObjRef.current.
2. 지도 모니터 전에 오버레이를 생성하고 모니터가 조건을 만족하면 오버레이 위치를 설정하고 지도에 추가합니다.
효과는 다음과 같습니다.
