一般に、緯度と経度は、次のようにフロントエンド インターフェイスを呼び出すことによって取得されます。
//按钮点击事件，调用接口取出经纬度并马上绘制到地图上
const pointdrawClick = async (record: any) => {
//接口
let res=await viewDeviceInfo({
...record })
//马上绘制点
//创建一个空的Vector面图层
const mapLayer = new VectorLayer({
source: new VectorSource({
features: []
})
});
mapLayer.set('maplayer', mapLayer);
map.addLayer(mapLayer);
//创建点geometry
let point = new Point(
transform(
[Number(res,longitude), Number(res,latitude )],
'EPSG:4326',
'EPSG:3857'
)
);
// 创建feature要素，一个feature就是一个点
let pointFeature = new Feature(point);
// 设置要素的图标
pointFeature.setStyle(pointStyle);
pointFeature.setId('pointFeature');
layerarr[2].getSource().addFeatures([pointFeature]);
map
.getView()
.setCenter(
transform(
[Number(res,longitude), Number(res,latitude)],
'EPSG:4326',
'EPSG:3857'
)
);
map.getView().setZoom(17.5);
}
この時点で、最初のクリックが行われたときにマップが反応せず、2 回目の操作が実行されたときにのみポイントが描画されることがわかります。
バックエンドから返される値はすぐには取得できません。
シナリオ: 1) バックエンドによって返された緯度と経度を地図上にすぐに表示できない
解決策: a. ステータス値を設定し、緯度と経度を監視します。
2) 初めてページを開いたときは地図要素をすぐに取得することができず、たとえば座標から交差する要素を取得するのは 2 回目の操作でしか取得できません。
解決策: a. タイマーで要素を取得するメソッドを設定して呼び出します (非推奨)
b. ステータス値を設定するときに nextTick を使用し、nextTick で要素を取得するメソッドを呼び出し、マップ要素が正常に初期化されるまで待機します。コーディネート「遅れて」届きます。
nextTick(() => {
setlongitude(res.longitude);
setlatitude(res.latitude);
})
useEffect(() => {
if (latitude != undefined && longitude != undefined) {
nextTick(()=>{
creatpoint();
} )
}
}, [longitude, latitude]);
//输入的坐标，判断其所属田块并让其高亮
const coorinField=(coordinate:any)=>{
//根据坐标获取其相交的要素
.......
}
//创建点要素
const creatpoint = () => {
if (rtkobj.latitude) {
let devicepoint = transform(
[Number(rtkobj.longitude), Number(rtkobj.latitude)],
'EPSG:4326',
'EPSG:3857'
);
nextTick(()=>{
coorinField(devicepoint);
})
}
}
c. 非同期リクエスト (関連するバックエンド インターフェイスなど) では、要素を呼び出すメソッドが使用されるだけで、論理的には完了します。
nextTick は不要になりました
const coorinField=(coordinate:any)=>{
let layerarr = hxMap.mapInstance.getLayers().getArray();
const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{
}');
const {
code } = userInfo.ffarmRespVO;
//异步请求中
getCountByFarmCode({
farmCode:code}).then((res)=>{
let features_=layerarr[1].getSource().getFeatures()
if(features_.length=res.dcount){
let features=layerarr[1].getSource().getFeaturesAtCoordinate(coordinate)
if(features.length>0){
//删除上一个田块样式
clearselectstyle()
//重新设置样式
features[0].setStyle(selectFieldStyle(features[0]));
features[0].setId('readfeature');
formRef.setFieldsValue({
landCode: features[0].code });
}else{
message.error("坐标不位于田块内！")
}
}
})
}
ここでシーン 1 については、react で useState と useEffect を使用して最初のレンダリングを実現し、インターフェイスで取得した緯度と経度を状態値として設定し、useEffect を使用して状態値を監視して描画を完了します。
具体的なコードは次のとおりです。
const [latitude,setlatitude]=useState<any>()
const pointdrawClick = async (record: any) => {
//接口
let res=await viewDeviceInfo({
...record })
setlongitude(res.longitude)
setlatitude(res.latitude)
}
//监听
useEffect(() => {
let layerarr = hxMap.mapInstance.getLayers().getArray();
//删除多余layer
if (layerarr.length > 2) {
for (let i = 2; i < layerarr.length; i++) {
map.removeLayer(layerarr[i]);
}}
//创建一个空的Vector面图层
const mapLayer = new VectorLayer({
source: new VectorSource({
features: []
})
});
mapLayer.set('maplayer', mapLayer);
map.addLayer(mapLayer);
//创建点geometry
let point = new Point(
transform(
[Number(longitude), Number(latitude )],
'EPSG:4326',
'EPSG:3857'
)
);
// 创建feature要素，一个feature就是一个点
let pointFeature = new Feature(point);
// 设置要素的图标
pointFeature.setStyle(pointStyle);
pointFeature.setId('pointFeature');
layerarr[2].getSource().addFeatures([pointFeature]);
map
.getView()
.setCenter(
transform(
[Number(longitude), Number(latitude)],
'EPSG:4326',
'EPSG:3857'
)
);
map.getView().setZoom(17.5);
}, [longitude,latitude]);