Openlayers 3 图层探查功能
<body>
<div id="map"></div>
<script>
var map=new ol.Map({
target:"map",
layer:[],
view:new ol.View({
center:ol.proj.fromLonLat([-109,46.5]),
zoom:6
})
});
var key= "AuUKioHoVzV-16Ep0yv6ay21ixWZ5OZ7jDs-k7g03fiUMbN6GSH97IpRcQ_s_s3-";
var BingMapRoad=new ol.layer.Tile({
source: new ol.source.BingMaps({
key:key,
imagerySet: 'Road'
}),
name:'BingMap的道路图层'
});
var BingMapAerial=new ol.layer.Tile({
source: new ol.source.BingMaps({
key:key,
imagerySet: 'Aerial'
}),
name:'BingMap的影像图层'
});
map.addLayer(BingMapAerial);
map.addLayer(BingMapRoad);
//结合jQuery插件的方法,实现对图层的裁剪
var radius=75;//圆半径
//用keydown事件实现在键盘上通过up和down按键改变圆的半径
$(document).keydown(function(evt){
if(evt.which===38){
radius=Math.min(radius+5,150);//按up,半径扩大5px
map.render();//渲染地图
}else if(evt.which===40){
radius=Math.max(radius-5,25);
map.render();
}
});
var mousePosition=null;
$(map.getViewport()).on("mousemove",function(evt){
mousePosition=map.getEventPixel(evt.originalEvent);//获得当前鼠标的位置
map.render();
}).on("mouseout",function(){
mousePosition=null;
map.render();
});
BingMapRoad.on("precompose",function(event){
var ctx=event.context;//影像图层画布
var pixelRatio=event.frameState.pixelRatio;//像素比
ctx.save();
ctx.beginPath();
if(mousePosition){
ctx.arc(mousePosition[0]*pixelRatio,mousePosition[1]*pixelRatio,radius*pixelRatio,0,2*Math.PI);//设置画布区为一个圆
ctx.lineWidth=5*pixelRatio;
ctx.strokeStyle='rgba(0,0,0,0.5)';
ctx.stroke();
}
ctx.clip();//裁剪画布
})
BingMapRoad.on("postcompose",function(event){
var ctx=event.context;
ctx.restore();//还原画布
})
</script>
</body>
Openlayers 3 图层探查功能的更多相关文章
- leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- openlayers6结合geoserver利用WFS服务实现图层新增功能(附源码下载)
内容概览 1.openlayers6结合geoserver利用WFS服务实现图层新增功能2.源代码demo下载 效果图如下: 本篇主要是openlayers6通过调用geoserver发布的地图服务W ...
- (二十)WebGIS中图层树功能的设计和实现
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在GIS的桌面工具中,比如arcgis desktop或者S ...
- 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 各种图层,持续更新
/*高德地图*/ var vectorLayerLine = new ol.layer.Tile({ source: new ol.source.XYZ({ urls: [ "http:// ...
- leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- 【05】openlayers 网格图层
效果: 创建地图: //创建地图 var map = new ol.Map({ //设置显示地图的视图 view: new ol.View({ projection: 'EPSG:4326', //投 ...
随机推荐
- Algorithm 算法
http://www.cnblogs.com/baiboy/category/723479.html 记下来,有空去看 随笔分类 - Algorithm [项目总结]自然语言处理在现实生活中运用 ...
- CSS3背景颜色渐变效果
1.firefox浏览器: background-image: -moz-linear-gradient(top , #eef9fe, #d1ecff); 2.safari.chrome浏览器: ba ...
- oracle常用的数据字典
一.oracle数据字典主要由以下几种视图构成:1.user视图以user_为前缀,用来记录用户对象的信息 2.all视图以all_为前缀,用来记录用户对象的信息及被授权访问的对象信息 3.dba视图 ...
- Java 泛型 泛型代码和虚拟机
Java 泛型 泛型代码和虚拟机 @author ixenos 类型擦除.原始类型.给JVM的指令.桥方法.Java泛型转换的事实 l 类型擦除(type erasure) n Java泛型的处理 ...
- Servlet图片上传
package com.servlet; import java.io.DataInputStream; import java.io.FileOutputStream; import java.io ...
- Sql Server 和 Access 数据库在书写sql语句时的语法差异
sql:datediff(d,eff_time,getdate()) access: datediff('d',eff_time,getdate())
- JTAG上有多个设备时,该如何接呢?
首先要了解JTAG管脚相关定义,具有JTAG口的芯片都有如下JTAG引脚定义(是相对芯片): TCK——测试时钟输入: TDI——测试数据输入: TDO——测试数据输出: TMS——测试模式选择,TM ...
- CSS样式与选择器
CSS构造块的样式: 1. h1{color:red;background-color:yellow} 其中:h1是选择器,花括号内是声明部分.多个声明之间用分号隔开. 2.为样式规则添加注释:/* ...
- js 学习总结
new array()[] []表示数组new object(){} {}表示对象 JavaScript 对象 对象由花括号分隔.在括号内部,对象的属性以名称和值对的形式 (name : value) ...
- allocator 类
allcator是一个模板类 定义在memory头文件中,将内存分配与对象构造分开,分配的内存是原始的.未构造的 一.how to use 因其实一个类,则使用allcator时需要首先声明一个类对象 ...