foreword
There are very few cases on the Internet about the combination of react or vue3 and openlayers. Today, because it is used in work, I will take notes. I will continue to update the cases of the combination of react and vue3 with ol (novices do not spray)
1. Listen to the map click to realize the overlay overlay
First monitor the map, obtain the clicked map elements for judgment, and create an overlay. code show as below:
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;
Note:
1. element in Overlay: overlayContainerRef.current, Overlay object overlayObjRef.current.
2. Create an Overlay before the map monitors. When the monitor meets the conditions, set the overlay position and add it to the map.
The effect is as follows:
