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,它提供了 pointfeatureCollection 等方法
{
  "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(图片)
    • 矢量:Vectorgeojsonlerc
    • 矢量栅格:VectorTilepbf
  • addInteraction:添加 SelectModify
  • addOverlay:添加 OverlayControl
    • Popover 可以用 Overlay 去做

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

相关文章

  • 通过修改referer下载文件的方法

    通过修改referer下载文件的方法

    遇到了一个郁闷的事:如果让Http对象作全局变量,那么onreadystatechange只会在第一次执行时触发,以后都不会触发这个事件了。 只好在每次Down文件时重新创建一个XmlHttp对象。
    2008-05-05
  • TS 项目中高效处理接口返回数据方法详解

    TS 项目中高效处理接口返回数据方法详解

    这篇文章主要为大家介绍了TS 项目中如何高效的处理接口返回的数据的方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • js封装一个websocket实现及使用详解

    js封装一个websocket实现及使用详解

    这篇文章主要为大家介绍了js封装一个websocket实现示例及使用方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • JavaScript Page Visibility API检测页面是否可见方法详解

    JavaScript Page Visibility API检测页面是否可见方法详解

    这篇文章主要为大家介绍了JavaScript Page Visibility API检测页面是否可见方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 微信小程序之picker日期和时间选择器

    微信小程序之picker日期和时间选择器

    本篇文章主要介绍了微信小程序之picker选择器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 详解lodash中的cloneDeep使用细节

    详解lodash中的cloneDeep使用细节

    这篇文章主要为大家介绍了详解lodash中的cloneDeep使用细节,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 开发效率翻倍的Web API使用技巧

    开发效率翻倍的Web API使用技巧

    这篇文章主要为大家介绍了开发效率翻倍的Web API使用技巧详解,主要选取了一些有趣且有用的 Web API 进行介绍,并且 API 可以在线运行预览
    2023-05-05
  • 动态引入DynamicImport实现原理

    动态引入DynamicImport实现原理

    这篇文章主要为大家介绍了动态引入DynamicImport实现原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • JSON stringify及parse方法实现数据深拷贝

    JSON stringify及parse方法实现数据深拷贝

    这篇文章主要为大家介绍了JSON.stringify递归及JSON.parse有限状态自动机实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 使用JavaScript破解web

    使用JavaScript破解web

    今天小编就为大家分享一篇关于使用JavaScript破解web的文章,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-09-09

最新评论