Arcgis(esri)中判断点线面之间的关系

一.预期效果

  点-面(point-polygon):在打点的时候,判断该点是否在某个面内,如果在面内取消掉打的点

  线-面(polyline-polygon):在绘制折线的时候,判断该折线是否在某个面内,或者是否相交,若在面内或者与面相交,则取消画的折线

  点-点(point-point):在已经调用出地图且地图上已经打出了点(这里因为需求我更改了打点的样式,在点上放置了小图标)的前提下,获取在地图中点击的位置,判断该位置是否在已画出的点的图片上

二.工作准备

1.调出绘制工具

  按需引入绘制工具的位置:'esri/widgets/Sketch'

  创建Sketch:这里面ViewModel是控制点线面的样式:其中url是点上添加小图标的地址(sketch的其他属性还有很多,有需要可以去官网查看)

const sketch = new Sketch({
                    view: view,
                    layer: this.graphicsLayer
                    viewModel: new SketchViewModel({
                        defaultCreateOptions: {hasZ: true},
                        defaultUpdateOptions: {enableZ: true, highlightOptions: {enabled: false}},
                        view: view,
                        layer: this.graphicsLayer,
                        polygonSymbol: {type: 'simple-fill', style: 'solid', color: [106, 183, 255, 0.5]},
                        polylineSymbol: {type: 'simple-line', color: '#4ba5f3', width: 4},
                        pointSymbol: {type: 'picture-marker', url: droneUrl, height: 30, width: 30}
                    })})

  在视图中增加sketch:view.ui.add(sketch, 'top-right');

2.实现点-面逻辑

polygon几何对象自身带有一个方法叫做contains,可以判断此点是否在(面)多边形内。

//假设存在一个面的几何对象叫做geometry_mian
//监听绘画完成
sketch.on('complete',(event)=>{
获取绘制的几何对象
const geometry = event.graphic.geometry;
if (geometry.type === 'point'){
//获取当前点的位置
const current_point = {x: geometry.longitude, y: geometry.latitude}
if (geometry_mian.contains(current_point)){
alert("画的点在此面,将取消此点")
graphicsLayer.remove(event.graphic)
}
}

}
3.实现线-面逻辑

  这里的逻辑要稍微复杂一点,咱也不知道为什么polyline的路径坐标没有用经纬度表示,用的是世界坐标去表示,这就导致去判断该折线与多边形之间的关系的时候需要转换一下,(因为点和面都是使用的经纬度去判断),如果不转换,contains和crosses方法将失效。

  这里转换坐标时需要引入'esri/geometry/support/webMercatorUtils',以及判断关系时需要引入几何引擎'esri/geometry/geometryEngine',使用他自身带的方法。

//假设存在一个面的几何对象叫做geometry_mian
//监听绘画完成
sketch.on('complete',(event)=>{
获取绘制的几何对象
const geometry = event.graphic.geometry;
if (geometry.type === 'point'){
//获取当前点的位置
const current_point = {x: geometry.longitude, y: geometry.latitude}
if (geometry_mian.contains(current_point)){
alert("画的点在此多边形")
}
}

if (geometry.type === 'polyline'){
//这里需要将获得的折线的路径转换一下坐标
let geometry_new = webMercatorUtils.webMercatorToGeographic(geometry, true);
 if (geometryEngine.crosses(geometry_new, geometry_mian)||geometryEngine.contains(geometry_mian, geometry_new)){
alert("画的折线经过了此多边形,此折线将取消")
graphicsLayer.remove(event.graphic)
}
}

}
4.实现点-点逻辑

  这里实现此逻辑是最复杂的,因为arcgis似乎没有提供判断点与点之间是否重合的方法,最简单的办法当然是拿到页面中的坐标与存在的点的坐标判断是否相等,但经纬度的小数点精确到后十几位,用此方法判断两点是否重叠几乎不可能实现。考虑到我在点上加了图标,换了一个思路去查找了图标(graphic类型)是否提供了监听的方法,但是很遗憾没有这个方法。最后经探索,发现有个方法叫做hitTest,他可以当你点击页面时拿到该点下所有图层的覆盖的几何对象。这里我们默认只有一个图层一个点对象,所以默认只拿到一个对象,所以就是results[0]。

view.on('click', (event) => {
                    view.hitTest(event)
                        .then(res => {
//判断是否有几何图形
                            if (res.results.length) {
//拿到这个几何图形
                                let geometry = res.results[0].graphic.geometry
//判断这个几何图形的类型是否是点(这里的判断逻辑还可以更精确比如去判断存在的点的经纬度)
                                if (geometry.type==='point') {
                                    alert("你点到了点上")
                                }
                            }}}

三.结语

  一旦发现hitTest我们就可以对几何图形做高亮,或者弹出菜单,或者做更复杂的逻辑,它不局限于点,还包括折线,面等。这里也给我们提供了思路,他的results是一个图形(graphic)数组,我们在自己创建任何一类几何图形的时候都可以放在一个数组里面,拿去其中一个对象的时候可以获取该对象的更多信息,去做更复杂的逻辑判断。

  值得注意的是,绘制工具,绘制的几何图形和取消的图层都应该是同一个图层,这样才支持撤销已经画出的几何图形。我自身写的逻辑很复杂,这里我只是将核心方法提供了出来,所以就不附上效果图了。学无止境,若有哪里不正确或者可以更完善的地方,期待互相交流!

  • 10
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值