arcgis jsapi介面入門系列(10):圖形高亮
阿新 • • 發佈:2018-11-29
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; } },