功能需求
绘制区域,查询该区域内的存在的设备(此功能涉及空间查询算法,故而使用gis厂商——超图)。
加载依赖
Openlayers
因为 ol 的源码 index 文件,其导出模块方式是这样的:
所以项目加载 ol 模块的时候,必须指定类级别,按需加载,如此十分麻烦。
我的做法是将其模块二次封装,使 ol 依赖只有一个出口,而项目使用引用此文件即可。
SuperMap
SuperMap 的源码 index 文件如下,将所有的模块都封装成一个出口。
使用十分方便。
import {
FeatureService, SuperMap} from '@supermap/iclient-ol';
实现步骤
- 初始化Map,创建Layer作为绘图层和 Source接收绘制源。
- 创建Draw控件和Snap控件捕捉绘图。
- Draw控件绘制监听,获取绘制源Features。
- 通过绘制元素的Coordinates,实现范围查询和缓冲区查询。
import {
OLDrawArea} from '../gis-core/drawArea';
penOptions = [
{
value:'LineString', name: '线'},
{
value:'Polygon', name: '多边形'},
{
value:'Square', name: '正方形'},
{
value:'Rectangle', name: '长方形'},
{
value:'Clear', name: '清空'},
{
value:'None', name: '无'}
]; // 绘制图形集合
// 初始化地图
initMap() {
// 地图实例*
this.map = new Map({
target: 'map',
layers: this.layersData,
view: new View({
center: this.mapAttr.projection === 'EPSG:3857' ? fromLonLat([this.mapAttr.x, this.mapAttr.y]) : [this.mapAttr.x, this.mapAttr.y],
projection: this.mapAttr.projection,
zoom: this.mapAttr.scale,
}),
// 比例尺:ScaleLine({units: 'metric'}),全屏按钮:FullScreen
controls: defaultControls().extend([new ScaleLine({
units: 'metric' })]),
});
}
// penOptions选择绘制类型
drawQueryArea(drawType) {
// 实例化绘图
this.OLDrawArea = new OLDrawArea(drawType, this.sharedService);
// 创建Layer作为绘图层和 Source接收绘制源
this.map.