Angular+arcgisjs之平面地图测距、测面积、搜索

本文代码基于Angular8和arcgis js 4.16。
代码里会涉及到一个地图变量mapView，初始化如下：

const map = new Map({basemap: 'osm',
});
this.mapView = new MapView({container: this.mapContainer.nativeElement,center: [113.280637, 23.125178],zoom: 12, map,
});

官网提供了许多小组件，很多操作不需要开发者自己实现，比如本文的测距、测面积、搜索，这些小组件均满足基本需求。

测距

平面地图测距官网：DistanceMeasurement2D

const [DistanceMeasurement2D] = await loadModules(['esri/widgets/DistanceMeasurement2D']);this.distanceWidget = new DistanceMeasurement2D({view: this.mapView,
});
this.mapView.ui.add(this.distanceWidget, 'top-right');// 清除测距小组件
// this.mapView.ui.remove(this.distanceWidget);
// this.distanceWidget = null;

测面积

平面地图测面积官网：AreaMeasurement2D

const [AreaMeasurement2D] = await loadModules(['esri/widgets/AreaMeasurement2D']);this.areaWidget = new AreaMeasurement2D({view: this.mapView,
});
this.mapView.ui.add(this.areaWidget, 'top-right');// 清除测面积小组件
// this.mapView.ui.remove(this.areaWidget);
// this.areaWidget= null;

搜索

一般图层资源数据集的每个数据会存在多个属性，比如面积、名称等等，那么用户输入关键词进行搜索时应从多个数据源属性中搜索。
多数据源搜索官网：Search

const [Search] = await loadModules(['esri/widgets/Search']);const searchSources = [];
// 遍历图层，为每个图层设置搜索数据源
if (this.mapView.map.allLayers &&this.mapView.map.allLayers.items &&this.mapView.map.allLayers.items.length > 1
) {// 排除底图，即this.mapView.map.allLayers.items[0]，索引从1开始for (let index = 1; index < this.mapView.map.allLayers.items.length; index++) {const fields = [];if (this.mapView.map.allLayers.items[index].fields &&this.mapView.map.allLayers.items[index].fields.length > 0) {this.mapView.map.allLayers.items[index].fields.forEach(f => fields.push(f['name']));}searchSources.push({layer: this.mapView.map.allLayers.items[index],searchFields: fields.slice(0, 6), // 经试验，searchFields只能设置6个，否则即使关键词存在于数据源属性中也会查不出来extractMatch: false,outFields: ['*'],placeholder: '输入关键词',});}
}this.searchWidget = new Search({view: this.mapView,sources: [...searchSources],
});this.mapView.ui.add(this.searchWidget, 'top-right');// 清除搜索小组件
// this.mapView.ui.remove(this.searchWidget);
// this.searchWidget= null;

Angular+arcgisjs之平面地图测距、测面积、搜索相关推荐

cesium 测距测面积测高
/*** 测量线段*/function MeasureTools(viewer) {var entityCollection = [];var handler=new Cesium.ScreenSpa ...
openlayers测距和测面积
初次使用openlayers地图进行开发各种地图功能,测距和测面积使用的是官方例子并进行了一些简单的修改,官方示例在测量一次之后不能停止,修改后,每点击测量,只会测量一次. 而且需要注意的是,官方例子 ...
cesium 实现测距离测面积（划线画面跟随鼠标位置）
效果图方法一:使用插件 cesium_measure.js 下载地址:https://github.com/zhangti0708/cesium-measure/blob/master/src/ce ...
ArcGIS API For Javascript 4.15 绘制地图：在地图上测距离、测面积和在不同图层上搜索
1.HTML 页面 ## index.html<!DOCTYPE html> <html lang="en"> <head><meta c ...
android 地图面积测量,Android开发自定义控件，实现Arcgis for Android测距、测面积功能...
采用Arcgis Runtime for Android 100.3.0开发. 控件的功能包括,测距.测面积.撤销.恢复.清除.完成六个功能. 测距:在地图上绘制线段进行长度测量测面积:在地图上绘制 ...
【开源】电子围栏-测距离-测面积-拉框放大-实时路况-逆地理编码的实现
最近项目上涉及到地图,考虑到精度等问题,最终选择了51ditu.要实现电子围栏等等功能,经过几天努力,大致有了个雏形,由于是第一次接触HTML和JavaScript编程,三天下来脑袋大了不少,碰到了一 ...
Leaflet中通过leaflet-measure插件实现测距测面效果
场景 Leaflet中原生方式实现测距: Leaflet中原生方式实现测距_BADAO_LIUMANG_QIZHI的博客-CSDN博客 Leaflet中原生方式实现测量面积: Leaflet中原生方式 ...
基于STM32的超声波雷达项目【可拟合构建平面地图】（代码开源）
前言:本文为手把手教学基于STM32的超声波雷达项目--HC-SR04雷达.本次项目采用的是STM32作为MCU,搭配常用的HC-SR04超声波模块与舵机SG90实现模拟雷达检测的效果 ...
Vue+Openlayer中测距测面和绘制点线面组件-LjMeasureDraw4326和LjMeasureDraw3857
地理坐标系4326 效果图: 首先下载turf.js: cnpm i -S @turf/turf 全局引入turf.js //引入turf.js import * as turf from '@tur ...

Angular+arcgisjs之平面地图测距、测面积、搜索

测距

测面积

搜索

Angular+arcgisjs之平面地图测距、测面积、搜索相关推荐

最新文章

热门文章