美文网首页
OpenLayers创建一个新的Vector图层并添加覆盖物,并

OpenLayers创建一个新的Vector图层并添加覆盖物,并

作者: 朱凤丽 | 来源:发表于2020-08-28 10:20 被阅读0次

1、创建图层并添加到地图上

var layer = map.getLayersBy("name",'基础图层');

//1.设置图层默认样式
let baseStyle = new OpenLayers.Style({
    fillColor: '#0be14e',
    fillOpacity: 0.2,
    strokeWidth: 2,
    strokeColor: '#0be14e',
    strokeOpacity: 1,
    pointRadius: 8,
});

//2.判断图层不存在时创建
if(layer.length == 0){
    layer = new OpenLayers.Layer.Vector(
        '基础图层',
        {
            styleMap:new OpenLayers.StyleMap({
                "default": baseStyle
            })
        });
        
    //3.把图层添加到地图上
    map.addLayer(layer);
}

2、给图层添加覆盖物Feature

// 1.从后台获取面的信息polygon
var polygon = "POLYGON((12621138.5917948 2647048.59995726,12621138.5917948 2646988.07768547,12621090.3890413 2647018.33879317,12621138.5917948 2647048.59995726))";

// 2.转换成feature
var feature = new OpenLayers.Format.WKT().read(polygon);

// 3.通过图层添加覆盖物Feature
map.getLayersBy("name",'基础图层')[0].addFeatures(feature);

3、监听图层事件

layer.events.register('moveend', layer, function (e) {
    console.log(e);
});

// 如果需要监听多个事件,可以写成这样
layer.events.on({
    "move": function(e){
        console.log('移动')
    },
    "moveend": function(e){
        console.log('移动完成')
    }
});
其中图层事件有
  • loadstart - 在图层加载开始时触发
  • loadend - 在图层加载结束时触发
  • visibilitychanged - 更改图层的可见性属性时触发
  • move - 当图层移动时触发(在拖动过程中每次鼠标移动触发)。
  • moveend - 当图层移动完成时触发,作为参数传递的对象具有zoomChanged布尔属性,该属性指示缩放已更改。
  • added - 将图层添加到地图后触发
  • removed - 从地图上删除图层后触发

:一般情况下我用的最多的是"moveend"事件,为什么呢,有些时候请求的数据太多,几万甚至几十万几百万,这个时候不可能是把这些数据全部渲染到地图上,那么我们只需要渲染当前屏幕的数据就可以,也就是按需加载,移动完成一次就请求一次当前屏幕的数据渲染。

相关文章

  • OpenLayers创建一个新的Vector图层并添加覆盖物,并

    1、创建图层并添加到地图上 2、给图层添加覆盖物Feature 3、监听图层事件 其中图层事件有 loadstar...

  • 图层相关

    ⒈添加图层样式 添加图层蒙版 颜色调整 创建新组 创建新图层 删除图层 ⒉把两个图层放到一个组里: ①选择一个图层...

  • OpenLayers3学习

    在OpenLayers3中有两种加载图层的方法:ol.layer.Tile()和ol.layer.Vector()...

  • AE

    一. 瘦脸操作 1. 导入视频,创建合成 2. 添加追踪并修正 3. 新建空对象存储追踪信息 4. 创建调整图层 ...

  • 百度地图api关于标注和覆盖物

    添加跳跃的标识 添加圆形覆盖物 移入显示标签移出移除标签 如果想要创建多个覆盖物或者标签,直接把他们塞到一个for...

  • 渲染原理学后简短笔记

    UIView和CALayer的关系 其中,视图的职责是 创建并管理 图层,以确保当子视图在层级关系中 添加或被移除...

  • 第十八节 实现下落方块

    01.使用新的图层 在这之前,所有方块都是直接添加到了默认图层上,但是现在,我们要创建一个新的图层,用于放置方块,...

  • 八 Vector ArrayList LinkedList

    Vector和Arraylist作为动态数组(使用对数组来保存, 数组已满时,会创建新的数组, 并拷贝原有数组数据...

  • vue中openlayers图层添加

    1、首先需要在geoserver或者arcgisserver发布服务,获取url 2、定义图层 3、给地图加上图层

  • vue项目中实现高德地图实时定位,并计算当前定位与目标点之间的距

    简述 业务需求:新增导览页面,在地图图层上添加手绘图层并打点,实时定位当前位置,并计算当前位置与目标点之间的距离 ...

网友评论

      本文标题:OpenLayers创建一个新的Vector图层并添加覆盖物,并

      本文链接:https://www.haomeiwen.com/subject/hwnksktx.html