【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)',//线条颜色
width: 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)
【05】openlayers 网格图层的更多相关文章
- openlayers自定义图层控制的实现
好久没写博文了,今天出来冒个泡. 最近一直在考虑一件事情,那就是openlayers中自定义wms的图层控制.用过openlayers的人都知道,在openlayers中有自带的图层控制的控件,调用方 ...
- openlayers筛选图层
很多时候需要筛选图层,例如选择交互(ol.interaction.Select). 图片来自官方:https://openlayers.org/en/v4.6.5/apidoc/ol.interact ...
- 【06】openlayers 切片图层
创建地图: //OSM图层 let source = new ol.source.OSM() //切片图层tilelayer let layers = new ol.layer.Tile({ sour ...
- Openlayers 3 图层探查功能
<body> <div id="map"></div> <script> var map=new ol.Map({ target:& ...
- openlayers 各种图层,持续更新
/*高德地图*/ var vectorLayerLine = new ol.layer.Tile({ source: new ol.source.XYZ({ urls: [ "http:// ...
- 【07】openlayers 矢量图层
创建地图: //创建地图 var map = new ol.Map({ //设置显示地图的视图 view: new ol.View({ center: [0, 0],//义地图显示中心于经度0度,纬度 ...
- 【09】openlayers 图片图层
效果: 创建地图: var map = new ol.Map({ //设置显示地图的视图 view: new ol.View({ projection:'EPSG:4326',//投影方式 cent ...
- Webgis中关于Openlayers入门使用(一)安装及生成基本地图
一.WebGis项目中使用的版本2.12 下载地址:https://github.com/openlayers/ol2/releases https://github.com/openlayers/o ...
- 移动端H5地图矢量SHP网格切分打包方案
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 与离线瓦片方案一样,同样是为了解决移动端网速和流量问题,但是却 ...
随机推荐
- Linux shell Script初识
shell secript: 执行方式的差异: ./ sh执行都是在创建一个子程序来执行,只会继承环境变量, 其中的变量如果export声明,子程序的子程序会继承,不会升级为环境变量 source 的 ...
- django框架基础-django模板语言-长期维护
################## 常用的模板语言 ####################### # django的模板语言, # # 只需要记两种特殊符号: # # {{ } ...
- linux系统开机静态分配ip地址
在/etc/sysconfig/network-scripts/ifcfg-eth0文件中 添加: IPADDR=192.168.1.100(设置静态地址) NETMASK=255.255.255.0 ...
- SpringMVC源码剖析1——执行流程
SpringMVC源码剖析1——执行流程 00.SpringMVC执行流程file:///C:/Users/WANGGA~1/AppData/Local/Temp/enhtmlclip/Image.p ...
- VisionPro 图标工具说明
- mudbox安装未完成,某些产品无法安装的解决方法
mudbox提示安装未完成,某些产品无法安装该怎样解决呢?,一些朋友在win7或者win10系统下安装mudbox失败提示mudbox安装未完成,某些产品无法安装,也有时候想重新安装mudbox的时候 ...
- 关于JavaScript中的typeof与instanceof
JavaScript中typeof和instanceof可以用来判断一个数据的类型,什么时候选择使用typeof?什么时候选择使用instanceof? typeof运算符 typeof运算符返回值有 ...
- python的IO
格式化输出 格式化输出是指通过print()等函数向指定的地方(比如屏幕)输出指定格式的内容 格式: age = 18 name = "xiaohua" print("我 ...
- 吴裕雄--python学习笔记:os模块函数
os.sep:取代操作系统特定的路径分隔符 os.name:指示你正在使用的工作平台.比如对于Windows,它是'nt',而对于Linux/Unix用户,它是'posix'. os.getcwd:得 ...
- [洛谷P4388] 付公主的矩形
18.09.09模拟赛T1. 一道数学题. 题目传送门 首先把对角线当成是某个点的移动轨迹,从左下到右上. 那么这个点每上升一个单位长度,就穿过一个格子. 每右移一个单位长度,也会穿过一个格子. 例外 ...