Question

通过矢量图层的queryRenderedFeatures或者querySourceFeatures方法，获取到了对应的特征列表，想要高亮其中某个符号元素。官方实例给的是创建一个临时图层，然后修改图层样式，隐藏不需要显示的达到这个效果。

经过测试对Circle、line、fill都可以，但是对于symbol无法出现选中的那种高亮底色，这种如何实现呢？

Answer 1

您好，

您这边有相关的symbol 测试代码吗？能否方便提供一下截图？

Comments

let arr = [];
          for (let i = 0; i < range.length - 1; i = i + 1) {
            arr.push(
              Cesium.Cartesian3.fromDegrees(range[i][0], range[i][1], 0)
            );
          }
          let mvtLayers = mapViewer.scene._vectorTileMaps._layerQueue; //获取所有的mvt图层
          for (let w = 0; w < mvtLayers.length; w++) {
            let mvtMap = mvtLayers[w];
            // let mvtMap = this.mvtMap;
            let selectLayer = mvtMap.mapboxStyle.layers[0];
            let ids = [];
            mvtMap.mapboxStyle.layers.forEach((layer) => {
              ids.push(layer.id);
            });
            var features = mvtMap.queryRenderedFeatures(arr, {
              layers: ids,
            });
            if (this.highlightLayers == undefined) this.highlightLayers = {};

            let highlightLayers = this.highlightLayers;
            var layerSetting = selectLayer;
            var highlightLayerID = selectLayer.id + "_highlight";
            var highlightLayer = highlightLayers[highlightLayerID];
            if (selectLayer.type == "fill" || selectLayer.type == "circle") {
              mapViewer.entities.removeAll();
            }
            if (!Cesium.defined(highlightLayer)) {
              var highlightLayerSetting = Cesium.clone(layerSetting, true);
              highlightLayerSetting.id = highlightLayerID;
              if (highlightLayerSetting.paint == undefined)
                highlightLayerSetting.paint = {};
              if (selectLayer.type == "line") {
                highlightLayerSetting.paint["line-width"] = 6.0;
                highlightLayerSetting.paint["line-color"] =
                  "rgba(255,0,0,1.00)";
              } else if (selectLayer.type == "fill") {
                highlightLayerSetting.paint["fill-color"] = "rgba(0,0,255,1)";
                highlightLayerSetting.paint["fill-outline-color"] =
                  "rgba(0,0,255,1.00)";
                highlightLayerSetting.paint["fill-opacity"] = 0.5;
              } else if (selectLayer.type == "circle") {
                highlightLayerSetting.paint["circle-color"] =
                  "rgba(255,0,0,1.00)";
              } else if (selectLayer.type == "symbol") {
                highlightLayerSetting.layout["icon-size"] = 3;
                highlightLayerSetting.paint["icon-color"] =
                  "rgba(0,0,255,1.00)";
                highlightLayerSetting.paint["icon-halo-color"] =
                  "rgba(0,0,255,1.00)";
              }
              highlightLayers[highlightLayerID] = highlightLayerSetting;
              mvtMap.addLayer(highlightLayerSetting, selectLayer.id);
            }
            var filter = features.reduce(
              function (memo, feature) {
                memo.push(feature.feature.id);
                return memo;
              },
              ["in", "$id"]
            );
            mvtMap.setFilter(highlightLayerID, filter);
            mvtMap.refresh();
          }

---

对于symbol，想要筛选高亮，发现筛选不了。

除了这个外，我们也尝试了另一种高亮方法。使用后台返回symbol坐标，使用cesium绘制billboard，盖上去，但是2个会有位置偏差。不知道为啥

---

billboard经常会有位置偏差的现象，像https://blog.csdn.net/supermapsupport/article/details/103694193博客中这种情况也可能导致偏差。

高亮的本质其实就是在选中时更换选中的颜色，您也可以尝试，先读取 symbol 的颜色，在点击之后更换颜色，取消选中之后，再把之前的颜色赋予回去。

如果修改不了颜色，可以看看这个https://blog.csdn.net/sinat_41806435/article/details/99973292

---

queryRenderedFeatures这个还是无法查询到symbol，换了querySourceFeatures这个是可以查询到的。但是无法满足我的框选高亮符号的需求。

目前我使用了另一种办法解决，通过观察图层的变量，找到了存储symbol的地方，直接修改了符号的颜色。通过下面这种办法间接解决了。