四十五、openlayers官网示例Icon modification解析——在地图上添加标记图形并随意移动它的位置

卷新心菜

于 2024-06-14 23:30:00 发布

阅读量582

点赞数 3

CC 4.0 BY-SA版权

分类专栏： openlayers官网示例解析文章标签：前端 openlayers官方示例地图 GIS openlayers

本文链接：https://blog.csdn.net/aaa_div/article/details/139685433

官网demo地址：

Icon modification

这篇讲了如何随意移动地图上的矢量点。

先在地图上添加一个矢量点，其中anchorXUnits 和 anchorYUnits: 指定锚点的单位。'fraction' 表示相对于图标的宽度（0到1之间），'pixels' 表示以像素为单位。

const iconFeature = new Feature({
      geometry: new Point([0, 0]),
      name: "Null Island",
      population: 4000,
      rainfall: 500,
    });

    const iconStyle = new Style({
      image: new Icon({
        anchor: [0.5, 46], 
        anchorXUnits: "fraction", 
        anchorYUnits: "pixels",
        src: "https://openlayers.org/en/latest/examples/data/icon.png",

最低0.47元/天解锁文章