arcgis js完整懸停效果實現demo

2023-02-24 06:02:30

arcgis 中的懸停效果

arcgis 中的懸停效果並不如想象中那麼容易實現，本文會介紹如何完整的實現如下懸停效果，並對相關的技術細節進行解釋，講解如何避免一些小坑。讓你不僅知其然，更知其所以然。

文章正文主要涉及對細節和原理的講解，如果你著急的話，文末有完整的使用 demo，需要自取。

效果拆分

從上面的 gif 裡可以看的，一個完整的懸停效果包含三部分：

滑鼠指標變為小手（pointer）
顯示標籤名稱
懸停圖示放大

在網上有很多的文章都只是簡單的解釋了某一種效果（大多數都只是簡單的更新下滑鼠樣式），但是大概率是滿足不了需求的，下面咱們來一一介紹一下：

1、獲取滑鼠懸停事件回撥

arcgis 中並不能通過類似 .addEventListener 或者 .on('hover-icon') 的形式直接監聽圖示的懸停事件，所以我們把這部分內容單獨拿出來講。

我們知道 arcgis js 的範例化分兩部分：地圖建立和檢視建立：

const map = new Map({ layers: [baseMap] });
const view = new MapView({ container: "viewDiv", map });

map 物件就是地圖範例，包含了核心的地圖實現，是不包含任何與顯示相關的功能的。而 view 則是檢視範例，負責把一個數位化的地圖顯示在我們眼前的，例如這裡使用的 MapView 就是 2D 渲染，而 SceneView 則是負責 3D 地圖的渲染。

所以，我們可以通過 view.on('pointer-move', callback) 來監聽滑鼠在檢視上的移動操作，並通過另一個方法 view.hitTest 來檢測某個事件和那些地圖元素重合：

view.on('pointer-move', async e => {
  const { results = [] } = await view.hitTest(e);
  console.log('懸停到的元素', results);
});

這裡可以優化一下，使用 lodash 的 throttle 做一個節流，因為 hitTest 畢竟也是有一定消耗的非同步操作，如果頻繁觸發的話不僅會導致卡頓，也會因為非同步返回導致已經從元素上移走了，懸停效果卻出現的問題。注意這裡不能用 arcgis 自帶的 promiseUtils.debounce 因為防抖並不適合這個場景，並且它還會阻塞非同步事件，會導致懸停效果不跟手。

view.on('pointer-move', _.throttle(async e => {
  const { results = [] } = await view.hitTest(e);
  if (results.length <= 0) return;
  // 後續邏輯
}, 50));

由於 result 是個陣列，因為滑鼠有可能同時經過了多個元素，所以說我們要在這裡元素裡匹配到我們要實現懸停效果的那部分。

注意，這裡不能直接取 result[0]，因為滑鼠可能會觸及多種型別的元素，例如底圖圖層、或者懸停後顯示的名稱，所以有可能會出現懸停到了名字上，擋住了後面的圖示的情況：

view.on('pointer-move', _.throttle(async e => {
  const { results = [] } = await view.hitTest(e);
  if (results.length <= 0) return;
  // 找到第一個圖示，因為有可能懸停到了上一個圖示的名稱 label 上
  const { graphic } = results.find(hit => {
    // 注意這裡判斷了是否有 name 這個屬性，你的場景可能和我不同
    return hit?.graphic?.attributes?.name;
  }) || {};
  if (!graphic) return;
  // 後續邏輯
}, 50));

現在我們就能準確且輕量的獲取到當前懸停到了哪個圖示上。

2、懸停時修改滑鼠指標

這個效果其實是最簡單的，在懸停時修改 css 的 cursor 屬性就行了，我們可以封裝一下：

const setCoursor = (type) => {
  // 這個 viewDiv 要換成你的
  const containerDom = document.getElementById('viewDiv');
  if (containerDom) containerDom.style.cursor = type;
}

注意，這裡獲取的目標 dom 是地圖的容器，不是 document.body，網上有很多文章都是直接設定 body 或其他全域性樣式，這其實是不太合適的，因為總會出現滑鼠樣式沒有正確復原的情況，例如點選地圖圖示後彈出一個 html 的彈窗，此時是不會觸發 pointer-leave 事件的，如果這時候通過彈窗跳轉到的地圖之外的路由，就會發現滑鼠指標會一直卡在小手的樣式。

話說回來，封裝好後我們在對應的地方都呼叫一下這個方法就可以了：

view.on('pointer-move', _.throttle(async e => {
  const { results = [] } = await view.hitTest(e);
  if (results.length <= 0) {
    setCoursor('default');
    return;
  }
  // 找到第一個圖示，因為有可能懸停到了上一個圖示的名稱 label 上
  const { graphic } = results.find(hit => {
    return hit.graphic && hit.graphic.attributes && hit.graphic.attributes.name;
  }) || {};
  if (!graphic) {
    setCoursor('default');
    return;
  }
  setCoursor('pointer');
}, 50));
view.on('pointer-leave', () => {
  setCoursor('default');
});

然後就可以實現第一個效果了：

3、懸停時顯示標籤名稱

這個的思路就是懸停時新建一個 text symbol，進行偏移並把圖示的名稱設定上去，並在離開圖示的時候移除這個 symbol。

首先實現新增名字標籤的方法，接受一個 graphic 並生成對應位置的名稱標籤：

currentHoverLabel = null
const createHoverLabel = graphic =&gt; {
  const symbol = {
    type: 'text',
    text: graphic.attributes.name,
    font: { size: 14 },
    haloColor: 'white',
    haloSize: 2,
    color: 'black',
    // 這裡進行了偏移
    yoffset: -30,
  };
  // 如果已經有了就複用之前的懸停圖例
  if (currentHoverLabel) {
    currentHoverLabel.geometry = graphic.geometry;
    currentHoverLabel.symbol = symbol;
  } else {
    currentHoverLabel = new Graphic({
      geometry: graphic.geometry,
      symbol,
    });
    view.graphics.add(currentHoverLabel);
  }
}

注意這裡使用了快取，如果已經存在標籤的話，就更新其位置和內容而不是直接銷燬。

然後實現移除名稱的方法：

const removeHover = () => {
  view.graphics.remove(currentHoverLabel);
  currentHoverLabel = null;
}

最後塞進我們剛才的回撥裡：

view.on('pointer-move', _.throttle(async e => {
  const { results = [] } = await view.hitTest(e);
  if (results.length <= 0) {
    setCoursor('default');
    removeHover();
    return;
  }
  const { graphic } = results.find(hit => {
    return hit.graphic && hit.graphic.attributes && hit.graphic.attributes.name;
  }) || {};
  if (!graphic) {
    setCoursor('default');
    removeHover();
    return;
  }
  setCoursor('pointer');
  createHoverLabel(graphic);
}, 50));
view.on('pointer-leave', () => {
  setCoursor('default');
  removeHover();
});

第二個效果也就做好了：

4、懸停時圖示放大

這個效果會麻煩一點。首先明確一點，懸停時不是修改 FeatureLayer 裡的被懸停的圖示，而是在相同的位置放置一個更大的相同圖示，所以這裡要求圖示內部不能是透明的，起碼放大後的圖示要能整個覆蓋掉原先的圖示，不然就露餡了。

至於為什麼我們下面會解釋，這裡首先講解怎麼實現。

如果你的圖示型別都是一樣的話，那麼就很簡單了，和上面建立名字標籤一樣就行。

但是事與願違，大多數場景下我們都會通過 UniqueValueRenderer 針對不同型別的元素顯示不同的圖示。比如裝置的型別、是否線上。所以說這裡需要模擬 UniqueValueRenderer 的行為，讓顯示的大圖示可以和原來一致。

有人可能會想，那我通過懸停事件拿到當前懸停的圖示物件，然後就可以直接調整大小或者複製，其實並不行，我們可以看到懸停事件裡拿到的 graphic 並沒有對應的 symbol：

因為 FeatureLeayer 並不是把每個 symbol 和其對應的要素繫結在一起的，而是交由 renderer 統一繪製，所以我們並不能在這裡控制其顯示圖示。

迴歸正題，要想實現手動區分顯示圖示，首先要把 UniqueValueRenderer 裡控制渲染的欄位獨立出來以便複用：

// 渲染使用的欄位
const RENDER_FIELDS = ['f1', 'f2'];
// 渲染設定項
const RENDER_CONFIG = [
  { value: '1, 2', color: 'green' },
  { value: '2, 1', color: 'red' },
  { value: '1, 1', color: 'yellow' },
  { value: '2, 2', color: 'blue' },
]
// 生成渲染器
const renderer = new UniqueValueRenderer({
  field: RENDER_FIELDS[0],
  field2: RENDER_FIELDS[1],
  fieldDelimiter: ', ',
  defaultSymbol: { type: "simple-fill" },
  uniqueValueInfos: RENDER_CONFIG.map(({ value, color }) => {
    return {
      value,
      symbol: { type: "simple-marker", color },
    };
  }),
});
// 生成圖層
const pointLayer = new FeatureLayer({
  renderer,
  // ...
});

核心就是上面的 RENDER_FIELDS 和 RENDER_CONFIG，這一部分相對成熟的專案基本都有對應的封裝了。接下來則是使用這兩個設定項渲染對應的圖示：

const createHoverLegend = graphic => {
  const graphicMarkValue = RENDER_FIELDS
    .map(key => graphic.attributes[key])
    .filter(Boolean)
    .join(', ');
  const matchedLegend = RENDER_CONFIG.find(item => item.value === graphicMarkValue);
  if (!matchedLegend) return;
  const symbol = { type: "simple-marker", color: matchedLegend.color, size: 20 };
  // 如果已經有了就複用之前的懸停圖例
  if (currentHoverLegend) {
    currentHoverLegend.geometry = graphic.geometry;
    currentHoverLegend.symbol = symbol;
  } else {
    currentHoverLegend = new Graphic({
      geometry: graphic.geometry,
      symbol,
    });
    view.graphics.add(currentHoverLegend);
  }
}

簡單來說就是按照這些欄位名把值組裝起來，然後根據設定項找到對應的圖示，並用剛才標籤名字那一套新增到地圖裡。

刪除懸停圖例的方法也要修改下：

const removeHover = () => {
  const needRemoveItem = [
    currentHoverLabel,
    currentHoverLegend,
  ].filter(Boolean);
  if (needRemoveItem.length <= 0) return;
  view.graphics.removeMany(needRemoveItem);
  currentHoverLabel = null;
  currentHoverLegend = null;
}

操作時儘量使用一個 removeMany 而不是多個 remove，這樣效能會更好點。最後把 createHoverLegend 新增到對應的位置就行了。

arcgis 為什麼這麼設計

現在來介紹下為什麼不能直接修改 FeatureLayer 中的點位，其實修改是可以修改的，通過 FeatureLayer.applyEdits 可以更新一個要素的屬性。

但是一方面這個修改是非同步的，可能要很久才能看到效果，另一方面這個操作的效能損耗也不小，所以並不適合這個場景。

而從本質上來說，arcgis js 是 web 版本的 arcgis server。所以你在 arcgis 的檔案裡能看到很多 server 端實現 / client 端實現。

server-side 是指直接通過 url 連線到對應的 arcgis server 服務，而 client-side 則是指在本地模擬建立一個 arcgis server 的對應服務，這也是為什麼其他的前端地相簿建立圖層很快而 arcgis 建立圖層就要好幾秒的原因，arcgis 會完整的模擬一個龐大的 FeatureLayer。

這裡就能發現一點端倪了，arcgis server 在釋出時可以執行很多“預烘焙”處理，這樣在查詢時就可以效率更高，但是這種操作在提升查詢速度的同時也降低了更新效率，所以沒法提供細粒度和快速的更新操作。

完整 demo 程式碼：

下面程式碼直接塞到一個 html 裡執行即可：

<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="initial-scale=1,maximum-scale=1,user-scalable=no"
  />
  <title>
    懸停效果 demo
  </title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
  <link
    rel="stylesheet"
    href="https://js.arcgis.com/4.25/esri/themes/light/main.css" rel="external nofollow" 
  />
  <script src="https://js.arcgis.com/4.25/"></script>
</head>
<script>
  require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/TileLayer",
    "esri/renderers/UniqueValueRenderer",
    "esri/Graphic",
    "esri/layers/FeatureLayer",
  ], (Map, MapView, TileLayer, UniqueValueRenderer, Graphic, FeatureLayer) => {
    // 當前懸停的圖示名稱
    let currentHoverLabel = null
    // 當前懸停的圖示
    let currentHoverLegend = null
    const baseMap = new TileLayer({
      url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer',
    });
    const map = new Map({ layers: [baseMap] });
    const view = new MapView({
      container: "viewDiv",
      map,
      zoom: 7,
      center: [110, 36]
    });
    // 所有點位
    const POINTS = [
      { geo: { longitude: 110, latitude: 36 }, attr: { f1: '1', f2: '2', name: '綠色的標籤' } },
      { geo: { longitude: 111, latitude: 36 }, attr: { f1: '2', f2: '1', name: '紅色的標籤' } },
      { geo: { longitude: 110, latitude: 36.3 }, attr: { f1: '1', f2: '1', name: '黃色的標籤' } },
      { geo: { longitude: 111, latitude: 36.3 }, attr: { f1: '2', f2: '2', name: '藍色的標籤' } },
    ]
    const source = POINTS.map((item, index) => new Graphic({
      geometry: { type: 'point', ...item.geo },
      attributes: { pointId: index, ...item.attr },
    }))
    // 渲染使用的欄位
    const RENDER_FIELDS = ['f1', 'f2'];
    // 渲染設定項
    const RENDER_CONFIG = [
      { value: '1, 2', color: 'green' },
      { value: '2, 1', color: 'red' },
      { value: '1, 1', color: 'yellow' },
      { value: '2, 2', color: 'blue' },
    ]
    // 生成渲染器
    const renderer = new UniqueValueRenderer({
      field: RENDER_FIELDS[0],
      field2: RENDER_FIELDS[1],
      fieldDelimiter: ', ',
      defaultSymbol: { type: "simple-fill" },
      uniqueValueInfos: RENDER_CONFIG.map(({ value, color }) => {
        return {
          value,
          symbol: { type: "simple-marker", color },
        };
      }),
    });
    // 生成圖層
    const pointLayer = new FeatureLayer({
      source,
      objectIdField: 'pointId',
      renderer,
      fields: [
        { name: 'pointId', type: 'oid' },
        { name: 'f1', type: 'string' },
        { name: 'f2', type: 'string' },
        { name: 'name', type: 'string' },
      ],
      outFields: ['*'],
    });
    map.add(pointLayer);
    const setCoursor = (type) => {
      const containerDom = document.getElementById('viewDiv');
      if (containerDom) containerDom.style.cursor = type;
    }
    /**
     * 建立懸停名稱提示
     */
    const createHoverLabel = graphic => {
      const symbol = {
        type: 'text',
        text: graphic.attributes.name,
        font: { size: 14 },
        haloColor: 'white',
        haloSize: 2,
        color: 'black',
        yoffset: -30,
      };
      // 如果已經有了就複用之前的懸停圖例
      if (currentHoverLabel) {
        currentHoverLabel.geometry = graphic.geometry;
        currentHoverLabel.symbol = symbol;
      } else {
        currentHoverLabel = new Graphic({
          geometry: graphic.geometry,
          symbol,
        });
        view.graphics.add(currentHoverLabel);
      }
    }
    /**
     * 建立懸停圖例
     * 這裡會找到對應的圖例，建立一個新的圖例然後新增到地圖上
     */
    const createHoverLegend = graphic => {
      const graphicMarkValue = RENDER_FIELDS
        .map(key => graphic.attributes[key])
        .filter(Boolean)
        .join(', ');
      const matchedLegend = RENDER_CONFIG.find(item => item.value === graphicMarkValue);
      if (!matchedLegend) return;
      const symbol = { type: "simple-marker", color: matchedLegend.color, size: 20 };
      // 如果已經有了就複用之前的懸停圖例
      if (currentHoverLegend) {
        currentHoverLegend.geometry = graphic.geometry;
        currentHoverLegend.symbol = symbol;
      } else {
        currentHoverLegend = new Graphic({
          geometry: graphic.geometry,
          symbol,
        });
        view.graphics.add(currentHoverLegend);
      }
    }
    /**
     * 移除懸停展示的圖示和名稱
     */
    const removeHover = () => {
      const needRemoveItem = [
        currentHoverLabel,
        currentHoverLegend,
      ].filter(Boolean);
      if (needRemoveItem.length <= 0) return;
      view.graphics.removeMany(needRemoveItem);
      currentHoverLabel = null;
      currentHoverLegend = null;
    }
    view.on('pointer-move', _.throttle(async e => {
      const { results = [] } = await view.hitTest(e);
      if (results.length <= 0) {
        setCoursor('default');
        removeHover();
        return;
      }
      // 找到第一個圖示，因為有可能懸停到了上一個圖示的名稱 label 上
      const { graphic } = results.find(hit => {
        return hit.graphic && hit.graphic.attributes && hit.graphic.attributes.name;
      }) || {};
      if (!graphic) {
        setCoursor('default');
        removeHover();
        return;
      }
      setCoursor('pointer');
      createHoverLabel(graphic);
      createHoverLegend(graphic);
    }, 50));
    view.on('pointer-leave', () => {
      setCoursor('default');
      removeHover();
    });
  });
</script>
<body>
  <div id="viewDiv"></div>
</body>
</html>

以上就是arcgis js完整懸停效果實現demo的詳細內容，更多關於arcgis js 懸停效果的資料請關注it145.com其它相關文章！