这篇文章主要介绍了arcgis js完整悬停效果实现demo的方法是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇arcgis js完整悬停效果实现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 = nullconst 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 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完整悬停效果实现demo的方法是什么”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。
