arcgis jsapi接口入门系列（10）：图形高亮
2024-09-04 15:49:08
jsapi也有提供高亮的实现接口，但这里没用，而用的是一种改变图形（graphic）样式的思路
本文实现效果是：地图有多个面图形，当鼠标移动到面的上方，面高亮显示，鼠标移出后高亮解除
初始化
//高亮初始化
highlightInit: function () {
//添加一个图形图层存放要高亮的图形
let layer = new this.apiInstance.GraphicsLayer({
id: "highlightLayer",
//空间参考，一般要跟地图的一样
spatialReference: this.mapView.spatialReference,
});
//图层添加到地图
this.map.add(layer); //添加两个面
let wkt = "POLYGON((113.527839 22.27028,113.527238 22.2557786,113.5437178 22.2597268,113.54423 22.2730306,113.527839 22.27028))";
let style = {
color: [50, 205, 50, 0.2],
outline: {
color: [255, 0, 0],
width: 1
}
};
let graphic = mapUtil.geometry.wktToPolygonGraphic(this.apiInstance, wkt, style, this.mapView.spatialReference, null);
layer.graphics.add(graphic); wkt = "POLYGON((113.51319 22.26819,113.51473 22.257561,113.520480 22.25747,113.519966 22.26904,113.51319 22.26819))";
graphic = mapUtil.geometry.wktToPolygonGraphic(this.apiInstance, wkt, style, this.mapView.spatialReference, null);
layer.graphics.add(graphic);
},
监听鼠标移动事件，这段代码通常在地图初始化后执行
//鼠标移动事件
this.mapView.on("pointer-move", function (event) {
this.mapView.hitTest(event).then(function (response) {
//鼠标移动到图形时高亮图形的实现
//原理：监听鼠标移动事件，当鼠标移动到某图形时，就改变改图形的样式（高亮实际是换一种更“亮”的样式），然后鼠标移出图形，就把图形样式恢复回去 //当前鼠标下的图形，也就是应该高亮的图形
let pointerFacilityGraphic = null; if (response.results[0]) {
//获取到当前鼠标下方的图形
var graphic = response.results[0].graphic; if (graphic.layer) {
if (graphic.layer.id === "highlightLayer") {
//当前鼠标下的图形，也就是应该高亮的图形
pointerFacilityGraphic = graphic;
}
}
} //实现高亮图形效果
if (pointerFacilityGraphic == null && this.highlightFacilityGraphic != null) {
//当鼠标下没有图形，当前有高亮图形，把当前高亮的效果去掉
this.setGraphicHighlight(this.highlightFacilityGraphic, false);
this.highlightFacilityGraphic = null;
}
else if (pointerFacilityGraphic != null && this.highlightFacilityGraphic == null) {
//当鼠标下有图形，当前没有高亮图形，把鼠标图形设为高亮
this.setGraphicHighlight(pointerFacilityGraphic, true);
this.highlightFacilityGraphic = pointerFacilityGraphic;
}
else if (pointerFacilityGraphic != null && this.highlightFacilityGraphic === pointerFacilityGraphic) {
//当鼠标下有图形，且跟当前高亮图形是同一个，不做任何事
}
else if (pointerFacilityGraphic != null && this.highlightFacilityGraphic !== pointerFacilityGraphic) {
//当鼠标下有图形，且跟当前高亮图形不同一个，把鼠标图形设为高亮，把当前高亮的效果去掉
this.setGraphicHighlight(this.highlightFacilityGraphic, false);
this.setGraphicHighlight(pointerFacilityGraphic, true);
this.highlightFacilityGraphic = pointerFacilityGraphic;
} }.bind(this))
}.bind(this));
设置图层高亮
//设置图形高亮效果
//参数1：图形
//参数2：是否高亮
setGraphicHighlight: function (graphic, isHighlight) {
//基础样式
//本例中，正常样式的填充透明度是0.2，高亮时透明度0.7
let style = {
type: "simple-fill",
color: [50, 205, 50, 0.2],
outline: {
color: [255, 0, 0],
width: 1
}
}; if (isHighlight) {
//高亮
style.color = [50, 205, 50, 0.7];
graphic.symbol = style;
}
else {
//不高亮
style.color = [50, 205, 50, 0.2];
graphic.symbol = style;
}
},
最新文章
- 谈谈基于OAuth 2.0的第三方认证 [上篇]
- 用Unity写一个12306验证器的恶搞图生成软件
- python学习------dictionary和set
- Python动态生成变量
- poj 3463 最短路与次短路&&统计个数
- WINDOWS黑客基础(5):利用内存来进行获取计算结果
- xml结构
- Mac OS X 10.10 Yosemite下安装java、jdk、mysql、maven、idea
- oracle 10g 恢复dmp文件。
- Swift实战-QQ在线音乐(第一版)
- 《金领简历：敲开苹果、微软、谷歌的大门》【PDF】下载
- 基于Microsoft Graph打造自己的Timeline应用
- 父元素高度设置为min-height，子元素高度设置为100%，但实际上子元素高度你知道是多少吗？
- JS this用法详解
- MySQL备份---lvm snapshot
- linux每日命令(13)：more命令
- CRC16-CCITT C语言代码
- poll() can't detect event when socket is closed locally?
- ie6的设置外边距margin变双倍的问题
- java泛型之泛型边界