1. 程式人生 > >arcgis jsapi介面入門系列(10):圖形高亮

arcgis jsapi介面入門系列(10):圖形高亮

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;
            }
        },