Openlayer add mark及添加hover效果实例详解

更新时间：2022年11月17日 10:07:24 作者：uccs

这篇文章主要为大家介绍了Openlayer add mark及添加hover效果实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

add mark

方法一

如果有多个点的话，可以生成多个 feature（循环调用 addFeature）

const iconStyle = () =>
  new Style({ image: new Icon({ scale: 0.2, src: image }) });
const addFeature = (point: Coordinate) =>
  new Feature({
    geometry: new Point(Proj.fromLonLat(point)),
    properties,
    name: "当前位置",
    population: 4000,
    rainfall: 500,
  });
const pointSource = new VectorSource({
  features: [addFeature(point)],
});
const clusterSourceForLayer = new Cluster({
  source: pointSource,
  distance: 50,
});
const pointLayer = new VectorLayer({
  source: clusterSourceForLayer,
  zIndex: 3,
  style: iconStyle,
});
map.addLayer(pointLayer);
pointLayer.set("baseMap", "iconLayer");

方法二

用 geojson 去渲染 mark

const iconStyle = () =>
  new Style({ image: new Icon({ scale: 0.2, src: image }) });
const pointSource = new VectorSource({
  features: new GeoJSON().readFeatures(geojson, {
    dataProjection: "EPSG:4326",
    featureProjection: "EPSG:3857",
  }),
});
const clusterSourceForLayer = new Cluster({
  source: pointSource,
  distance: 50,
});
const pointLayer = new VectorLayer({
  source: clusterSourceForLayer,
  zIndex: 3,
  style: iconStyle,
});
map?.addLayer(pointLayer);
pointLayer.set("baseMap", "iconLayer");

geojson 格式

生成 geojson 的方式：

自己手动构建
使用 @turf/helpers，它提供了 point、featureCollection 等方法

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "id": "customer002",
        "name": "c2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [119.777738303153, 32.91324329434815]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "id": "customerId007",
        "name": "张三"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [109.54393448864997, 35.7427088696462]
      }
    }
  ]
}

hover mark

popover

overlay 需要一个 dom 元素，这里是用过 ref 获取的

const o = new Overlay({ element: ref.current });
map?.addOverlay(o);
setOverlay(o);

方法一

用 select 去做，它有个 select 事件

它事件参数中，有个 selected，如果不是空数组，说明你鼠标正在 hover mark，就可以弹出 popover，显示你想要显示的内容

const select = new Select({
  condition: pointerMove,
  hitTolerance: 1,
  layers: [iconLayer],
  style: iconStyle,
});
select.on("select", (e) => {
  const { selected } = e;
  if (selected.length) {
    const [feature] = selected;
    const _feature = feature.get("features")[0];
    const id = _feature.get("id");
    const name = _feature.get("name");
    setContent({ name, id });
    const coordinate = feature.get("geometry").flatCoordinates;
    overlay.setPosition(coordinate);
  } else {
    overlay.setPosition(undefined);
  }
});
map?.addInteraction(select);

方法二

用 select 去做，本质也是通过 pointerMove 事件，所以可以直接在 map 上监听 pointerMove 事件

具体的实现方式我没有去尝试，通过上面的推断，我觉得是可行的

map.on("pointerMove", (e) => {});

clear mark

通过 useEffect 返回的函数清理地图中的 mark

useEffect(() => {
  return () => {
    // 卸载页面中的 mark
    iconSource?.getFeatures().forEach((feature) => {
      iconSource?.removeFeature(feature);
    });
  };
}, [points, iconSource]);

方法 addInteraction、addOverlay、addLayer 区别

我没有搞清楚他们之间的区别，目前了解的是：

addLayer：是添加图层，图层分为：
- 栅格：Tile（图片）
- 矢量：Vector（geojson、lerc）
- 矢量栅格：VectorTile（pbf）
addInteraction：添加 Select 和 Modify
addOverlay：添加 Overlay 和 Control
- Popover 可以用 Overlay 去做

以上就是Openlayer add mark及添加hover效果实例详解的详细内容，更多关于Openlayer添加mark hover效果的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

微信小程序传值取值的几种方法总结
这篇文章主要介绍了微信小程序传值取值的几种方法总结的相关资料,这里对这几种方法进行了详解，并附示例代码，需要的朋友可以参考下
2017-01-01
JS数组方法some、every和find的使用详情
这篇文章要给大家介绍的是JS数组方法some、every和find的使用的一些相关资料，感兴趣的小伙伴一起来学习吧
2021-09-09
详解如何用js实现一个网页版节拍器
这篇文章主要为大家介绍了详解如何用js实现一个网页版节拍器示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
关于JavaScript轮播图的实现
这篇文章主要介绍了关于JavaScript轮播图的实现,下面文章主要是利用利用html 和 css 代码实现轮播图，详细内容请参考下面详细内容，希望对你有所帮助
2021-11-11
Three.js概述和基础知识学习
这篇文章主要为大家介绍了Three.js概述和基础知识学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
JavaScript中Map与Object应用场景
这篇文章主要为大家介绍了JavaScript中Map与Object应用场景的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
接收键盘指令的脚本
接收键盘指令的脚本...
2006-06-06
JavaScript内置对象介绍
这篇文章主要介绍了JavaScript内置对象,内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能,下面我们一起进入文章了解更多详细内容
2021-12-12
commander脚手架工具使用详解
这篇文章主要为大家介绍了commander脚手架工具使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
JS微前端MicroApp基础使用
这篇文章主要为大家介绍了JS微前端MicroApp基础使用，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08