zoukankan      html  css  js  c++  java
  • 【05】openlayers 网格图层

    效果:

     创建地图:

    //创建地图
    var map = new ol.Map({
        //设置显示地图的视图
        view: new ol.View({
            projection: 'EPSG:4326', //投影方式
            center: [108, 34], //定义初始显示位置
            zoom: 3 //定义地图显示层级
        }),
        //创建地图图层
        layers: [
            //创建一个使用Open Street Map地图源的瓦片图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        //让id为map的div作为地图的容器
        target: 'map',
        //控件初始默认不显示
        controls: ol.control.defaults({
            attribution: false,
            zoom: false
        }).extend([])
    });

    网格图层:Graticule

    //网格地图
    let graticule = new ol.layer.Graticule({
        opacity:1,//透明度,默认为1
        visible:true,//是否显示,默认true
        zIndex:1,//图层渲染的Z索引,默认按加载顺序叠加
        extent:[80,20,120,70],//渲染范围,默认是渲染全部
        targetSize:100,//单元格像素大小,默认100
        showLabels:true,//为每条刻度线绘制一个带有各自纬度/经度的标签,默认true
        strokeStyle: new ol.style.Stroke({//用于绘制刻度线的样式
            color: 'rgba(255,0,0,1)',//线条颜色
             2,//线条宽度
            lineDash: [4]//虚线模式,默认值为null,无虚线
        })
    })
    map.addLayer(graticule)

    Graticule关于map的方法:

    //添加网格图层
    map.addLayer(layer)
    //删除网格图层
    map.removeLayer(layer)

    Graticule自身方法:

    //获取-设置,渲染范围
    graticule.getExtent()
    graticule.setExtent([100,30,120,35])
    //获取-设置,图层最大缩放级别
    graticule.getMaxZoom()
    graticule.setMaxZoom(18)
    //获取-设置,图层最小缩放级别
    graticule.getMinZoom()
    graticule.setMinZoom(4)
    //获取-设置,图层透明度
    graticule.getOpacity()
    graticule.setOpacity(0.5)
    //获取-设置,图层可见性
    graticule.getVisible()
    graticule.setVisible(true)
    //获取-设置,图层索引
    graticule.getZIndex()
    graticule.setZIndex(1)
  • 相关阅读:
    20200630(A--E)题解 by 王文硕
    20200629(A--E)题解 by 章思航
    GC垃圾回收
    Codeforces Round #629 (Div. 3) A、B、C
    AtomicInteger的Increment方法的自己实现。
    两个线程,一个输出字母一个输出数字,输出A1B2C3....Z26
    NIO记录
    mysql优化相关
    一些Nginx的Linux命令和conf配置文件
    docker记录
  • 原文地址:https://www.cnblogs.com/MaShuai666/p/12494611.html
Copyright © 2011-2022 走看看