目录
- arcgis 中的悬停效果
- 1、获取鼠标悬停事件回调
- 2、悬停时修改鼠标指针
- 3、悬停时显示标签名称
- 4、悬停时图标放大
- arcgis 为什么这么设计
- 完整 demo 代码：
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 => {
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 悬停效果的资料请关注我们其它相关文章！
评论(0)