背景
继上次的项目,在使用arcgis4.x(我这里使用的使arcgis4.13版本)的时候,需要使点击的点位高亮显示,但这次的arcgis4.x里面的高亮显示对于刚接触的人来说实属有点坑。在arcgis4.x自带的方法里这个高亮的方法只能在 SceneView3D里使用,下面就是在网上查找各种攻略总结的一种在MapView2D使用的方法
注意: arcgis4.x与3.x其中的不同点之一就是当你使用其中某个api市需要单独引用,而不是3.x中的全部引用
在上一篇的使用中已经写过怎么引入,这次就直接开始

// Create a MapView instance (for 2D viewing)
var view = new MapView({
map: myMap, // References a Map instance
container: "viewDiv" // References the ID of a DOM element
});
let _this=this
this.view.on(['click'], function (event) {
_this.view.hitTest(event).then(function (response) {
//如果点击在 graphic 上
if(response.results[0]){
//判断_this.highlight里面是否有高亮属性
if(_this.highlight){
_this.highlight.remove()
}
var graphic = response.results[0].graphic;
//所选graphic 高亮 “view.whenLayerView”调用这个
_this.view.whenLayerView(graphic.layer).then(function(lyrView){
highlight = lyrView.highlight(graphic)
})
}
});
这样就可以点击点位高亮了(前提你使用的是在SceneView3D)
坑点来了
ArcGIS API for JS 4.X会出现一个问题,添加进来的FeatureLayer在三维模式下,点击高亮显示,在二维下点击就无高亮的效果。当使用labelingInfo注记要素图层的时候也会出现这个问题,在三维下注记显示,在二维下注记不显示(???)
看看是啥问题
查看官方Api和大神的文档发现,这两个功能都需要WebGL的支持,三维下默认是WebGL渲染,二维下需要代码开启WebGL渲染,说是添加下面代码可以使用WebGL渲染。
var dojoConfig = {
has: {
"esri-featurelayer-webgl": 1
}
}
实际上这代码加了也没有任何用。
-
只针对托管在ArcGIS Online的地图服务,和ArcGIS Server10.6.1以上版本发布的服务。
-
对在前端页面自己代码创造的Feature组成的FeatureLayer无法使用
解决方案
可以给地图添加个点击事件,通过点击事件获取geomentry,自己在地图上画一个特殊的颜色出来
this.view.on(['click'], this.initIdentify)
initIdentify(eve){
this.view.hitTest(eve).then(function(res){
if (res.results.length > 0){
//所选graphic 高亮
let graphic = res.results[0].graphic
let xy = { x: graphic.geometry.x, y: graphic.geometry.y }
_this.highligh(xy)
}
})
}
//高亮点
highligh(graphic) {
let _this = this
let x = graphic.x
let y = graphic.y
_this.view.graphics.remove(_this.highlight)
_this.highlight = new _this.graphic({
geometry: {
type: 'point',
longitude: x,
latitude: y
},
attributes: '',
symbol: {
type: 'simple-marker',
color: '#fff',
outline: {
color: [9, 16, 211, 0.5],
width: 100
}
}
})
_this.view.graphics.add(_this.highlight)
},
还有个小坑
当你点击其它点位需要清除现有的高亮点,arcgis4.x和arcgis3.x又有不同
在arcgis3.x里有个remove()属性,可以清除所有内容,但是在arcgis4.x中
- remove(layer) 从layers集合中移除指定的层
- removeAll() 从layers集合中清除所有
这里,需要调用的是remov(layer)
remover() {
let arr = this.pointList
this.view.graphics.remove(this.highlight)
//当需要清除很多点位,但有不全部清除时
for (let i = 0; i < arr.length; i++) {
this.view.graphics.remove(arr[i])
}
},