React Native for Arcgis 地图开发 MeasureCtrl （十六）

最新推荐文章于 2024-08-06 11:09:59 发布

haibalai2009

最新推荐文章于 2024-08-06 11:09:59 发布

阅读量351

点赞数

文章标签： react native arcgis react.js

本文链接：https://blog.csdn.net/haibalai2009/article/details/127848756

版权

这个博客详细介绍了如何在移动端使用 MeasureCtrl 工具进行地图测量。通过引入 `react-native-arcgis` 库，实现了长度测量、面积测量等功能，并提供了清除测量、添加事件监听器等操作。同时，博客中还展示了如何获取和设置不同类型的测量符号，如点、线、面的样式。

摘要由CSDN通过智能技术生成

移动端MeasureCtrl 测量工具

import React, {useEffect, useState} from ‘react’;
import {DeviceEventEmitter, ScrollView, StyleSheet, Text, View, Clipboard} from ‘react-native’;
import {Button, List} from ‘@ant-design/react-native’;
import {MapManager, MapView, MeasureCtrl} from ‘@haibalai/react-native-arcgis’;
import {connect} from ‘react-redux’;
import WidthDrawer from ‘…/…/…/…/components/WithDrawer/index’;
import {MeasureEventType} from ‘…/…/…/…/…/nativeModules/core/MeasureEventType’;
const MapId = ‘baseMap’;
const TextSymbol = {
angle: 0,
backgroundColor: ‘#ffffff’,
borderLineColor: ‘#ff0000’,
borderLineSize: 0,
color: ‘green’,
font: {decoration: ‘none’, family: ‘宋体’, size: 9.75, style: ‘normal’, weight: ‘normal’},
// haloColor: ‘#0000ff’,
// haloSize: 0,
horizontalAlignment: ‘left’,
kerning: false,
type: ‘text’,
verticalAlignment: ‘middle’,
xoffset: 6,
yoffset: 12,
};
const PolygonSymbol = {color: [200, 0, 0, 125], style: ‘solid’, type: ‘esriSFS’};
const PolylineSymbol = {color: [14, 200, 230, 255], style: ‘solid’, type: ‘esriSLS’, width: 4};
const PointSymbol = {
angle: 0,
color: ‘#ff00ff’,
outline: {color: [14, 98, 230, 255], style: ‘solid’, type: ‘esriSLS’, width: 1.5},
size: 9,
style: ‘circle’,
type: ‘simple-marker’,
xoffset: 0,
yoffset: 0,
};
const LastPointSymbol = {
angle: 0,
color: [228, 71, 64, 255],
outline: {color: [255, 255, 0, 255], style: ‘solid’, type: ‘esriSLS’, width: 1.5},
size: 9,
style: ‘circle’,
type: ‘esriSMS’,
xoffset: 0,
yoffset: 0,
};
/** sideBar组件
*

@param {*} renderCb renderCb是一个函数, 每次触发并且向里面传值(对象)，content组件就以sideBarData的属性去接受
*/
const SideBar = ({renderCb, Home}: any) => {
const [content, changeContent] = useState(‘’);
const [errorContent, changeErrorContent] = useState(‘’);
const [ListenerId, setListenerId] = useState(‘’);
useEffect(() => {
renderCb({content, errorContent});
}, [content, errorContent, renderCb]);
const onClearAll = () => {
MeasureCtrl.clearAll(MapId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onAddAreaListener = () => {
MeasureCtrl.removeAllListeners(MapId, MeasureEventType.onArea)
.then((r: any) => {
console.log(r, ‘removeAllListeners成功’);
})
.catch((e: any) => {
console.log(e, ‘removeAllListeners失败’);
});
MeasureCtrl.addListener(MapId, MeasureEventType.onArea)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
setListenerId®;
DeviceEventEmitter.removeAllListeners(MeasureEventType.onArea);
DeviceEventEmitter.addListener(MeasureEventType.onArea, r => {
changeContent®;
});
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onAddLengthListener = () => {
MeasureCtrl.removeAllListeners(MapId, MeasureEventType.onLength);
MeasureCtrl.addListener(MapId, MeasureEventType.onLength)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
setListenerId®;
DeviceEventEmitter.removeAllListeners(MeasureEventType.onLength);
DeviceEventEmitter.addListener(MeasureEventType.onLength, r => {
changeContent®;
});
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onRemoveListener = () => {
MeasureCtrl.removeListener(MapId, ListenerId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onMeasureLength = () => {
MeasureCtrl.measureLength(MapId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onMeasureArea = () => {
MeasureCtrl.measureArea(MapId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onDispose = () => {
MeasureCtrl.dispose(MapId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onDoBack = () => {
MeasureCtrl.doBack(MapId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetTextSymbol = () => {
MeasureCtrl.getTextSymbol(MapId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
Clipboard.setString®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetPolygonSymbol = () => {
MeasureCtrl.getPolygonSymbol(MapId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
Clipboard.setString®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetPolylineSymbol = () => {
MeasureCtrl.getPolylineSymbol(MapId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
Clipboard.setString®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetPointSymbol = () => {
MeasureCtrl.getPointSymbol(MapId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
Clipboard.setString®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetLastPointSymbol = () => {
MeasureCtrl.getLastPointSymbol(MapId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
Clipboard.setString®;
})