前言
网上关于react或者vue3与openlayers结合的案例非常少,今天由于工作中用到,特记录下笔记,后面将持续更新react和vue3与ol的结合案例(新手勿喷)
1.监听map点击,实现overlay叠加层
首先监听map,获取点击到的地图要素进行判断,创建overlay。代码如下:
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、Overlay中element: overlayContainerRef.current,Overlay对象overlayObjRef.current。
2、在地图监听前创建好Overlay,当监听时符合条件后再设置overlay位置并添加到map中。
效果如下: