Openlayers3中实现地图的切割
概述：
本文讲述如何在Openlayers3中结合canvas实现对地图的切割。
效果：
全图
切割北京区域
切割河北区域
实现：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ol3 wms</title>
<link rel="stylesheet" type="text/css" href="../../../plugin/ol3/css/ol.css"/>
<style type="text/css">
body, #map {
border: 0px;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-size: 13px;
}
</style>
<script type="text/javascript" src="../../../plugin/ol3/build/ol-debug.js"></script>
<script type="text/javascript" src="../../../plugin/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
function init(){
var bounds = [73.4510046356223, 18.1632471876417,
134.976797646506, 53.5319431522236];
var vec_c = getTdtLayer("vec_c");
var cva_c = getTdtLayer("cva_c");
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}),
target: 'map',
layers: [vec_c, cva_c],
view: new ol.View({
projection: 'EPSG:4326'
})
});
map.getView().fit(bounds, map.getSize());
function getTdtLayer(lyr){
var url = "http://t0.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}";
var projection = ol.proj.get("EPSG:4326");
var projectionExtent = [ -180, -90, 180, 90 ];
var maxResolution = (ol.extent.getWidth(projectionExtent) / (256 * 2));
var resolutions = new Array(16);
var z;
for (z = 0; z < 16; ++z) {
resolutions[z] = maxResolution / Math.pow(2, z);
}
var tileOrigin = ol.extent.getTopLeft(projectionExtent);
var layer = new ol.layer.Tile({
extent: [ -180, -90, 180, 90 ],
source: new ol.source.TileImage({
tileUrlFunction: function(tileCoord) {
var z = tileCoord[0]+1;
var x = tileCoord[1];
var y = -tileCoord[2]-1;
var n = Math.pow(2, z + 1);
x = x % n;
if (x * n < 0) {
x = x + n;
}
return url.replace('{z}', z.toString())
.replace('{y}', y.toString())
.replace('{x}', x.toString());
},
projection: projection,
tileGrid: new ol.tilegrid.TileGrid({
origin: tileOrigin,
resolutions: resolutions,
tileSize: 256
})
})
});
return layer;
}
$.get("data/province.geojson",null,function(result){
var image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'red', width: 1})
});
var styles = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0)'
})
});
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(result)
});
var vector = new ol.layer.Vector({
source: vectorSource,
style: styles
});
map.addLayer(vector);
var _styles = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#00ffff',
lineDash: [4],
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
});
var select = new ol.interaction.Select({
condition: ol.events.condition.click,
style: _styles
});
map.addInteraction(select);
var highlight;
select.on('select', function (e) {
var feature = e.target.getFeatures().item(0);
if (feature) {
highlight = feature;
var _coord = feature.getGeometry().getCoordinates();
console.log(_coord);
map.render();
map.on('precompose',clip)
}
});
var center,pixelScale,offsetX,offsetY,rotation;
function clip(evt) {
var canvas=evt.context;
canvas.save();
var coords=highlight.getGeometry().getCoordinates();
var frameState = evt.frameState;
var pixelRatio = frameState.pixelRatio;
var viewState = frameState.viewState;
center = viewState.center;
var resolution = viewState.resolution;
rotation = viewState.rotation;
var size = frameState.size;
var size1=map.getSize();
offsetX = Math.round(pixelRatio * size[0] / 2);
offsetY = Math.round(pixelRatio * size[1] / 2);
pixelScale = pixelRatio / resolution;
canvas.beginPath();
if(highlight.getGeometry().getType() == 'MultiPolygon'){
for(var i=0;i<coords.length;i++){
createClip(coords[i][0], canvas);
}
}
else if(highlight.getGeometry().getType() == 'Polygon'){
createClip(coords[0], canvas);
}
canvas.clip();
}
function createClip(coords, canvas) {
for (var i = 0, cout = coords.length; i < cout; i++) {
var xLen = Math.round((coords[i][0] - center[0]) * pixelScale);
var yLen = Math.round((center[1] - coords[i][1]) * pixelScale);
var x = offsetX;
var y = offsetY;
if (rotation) {
x = xLen * Math.cos(rotation) - yLen * Math.sin(rotation) + offsetX;
y = xLen * Math.sin(rotation) + yLen * Math.cos(rotation) + offsetY;
} else {
x = xLen + offsetX;
y = yLen + offsetY;
}
if (i == 0) {
canvas.moveTo(x, y);
} else {
canvas.lineTo(x, y);
}
}
canvas.closePath();
}
map.on('postcompose', function(event) {
var ctx = event.context;
ctx.restore();
});
});
}
</script>
</head>
<body onLoad="init()">
<div id="map">
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------- 技术博客 CSDN：http://blog.csdn.NET/gisshixisheng 博客园：http://www.cnblogs.com/lzugis/ 在线教程 http://edu.csdn.Net/course/detail/799 Github https://github.com/lzugis/ 联系方式 q q:1004740957 e-mail:niujp08@qq.com 公众号:lzugis15 Q Q 群:452117357(webgis) 337469080(Android)
Openlayers3中实现地图的切割的更多相关文章
- iOS中的地图和定位
文章摘自http://www.cnblogs.com/kenshincui/p/4125570.html#location 如有侵权,请联系删除. 概览 现在很多社交.电商.团购应用都引入了地图和定 ...
- WP8中的地图和导航
原文 WP8中的地图和导航 代码示例 源文件: Media:MapSample.zip 测试基于 SDK: Windows Phone SDK 8.0 兼容于 平台: Windows Phone 8 ...
- EChart中使用地图方式总结（转载）
EChart中使用地图方式总结 2018年02月06日 22:18:57 来源:https://blog.csdn.net/shaxiaozilove/article/details/79274772 ...
- 在Microsoft Power BI中创建地图的10种方法
今天,我们来简单聊一聊“地图”. 在我们日常生活中,地图地位已经提升的越来越高,出门聚餐.驾驶.坐车.旅行......应运而生的就是各种Map APP. 作为数据分析师,我们今天不讲生活地图,要跟大家 ...
- PHP 中使用explode()函数切割字符串为数组
explode()函数的作用:使用一个字符串分割另一个字符串,打散为数组. 例如: 字符串 $pizza = "第1 第2 第3 第4 第5 第6"; 根据空格分割后:$piece ...
- openlayers3中应用proj4js
要在openlayers3中应用proj4js,需要在html中引用proj4js,然后在引用所需要的projection的js定义,如 http://epsg.io/21781-1753.js 然后 ...
- Vue3.0中引入地图（谷歌+高德+腾讯+百度）
1 概述 项目需求需要引入地图,对于目前最新的Vue3.0,无论是百度/高德/腾讯地图目前还没有适配,只有Vue 2.x版本的: 目前只有谷歌地图的Vue3.0适配: 但是没有适配并不代表不能使用,本 ...
- EXCEL技能 | EXCEL中实现地图快照，截大图、加水印、保存PNG、TIF、HTML文件
1 应用场景 本文分享笔者使用EXCEL制作地图的体验. 之前网上有人介绍使用小O地图EXCEL插件版能够在EXCEL中标注地图.绘制地图.可视化数据等操作.如下截图.笔者通过实验,其软件保存方式只能 ...
- 在网页中嵌入地图API
1.登录百度地图api,地址:http://api.map.baidu.com/lbsapi/creatmap/index.html 2.设置你的地理位置 3.简单设置下地图功能.地图的宽度和高度根据 ...
随机推荐
- 20145303 《Java程序设计》第六周学习总结
20145303 <Java程序设计>第六周学习总结 教材学习内容总结 第十章:输入/输出 (InputStream与OutputStream) 1.Java将输入/输出抽象化为串流,数据 ...
- 《JAVA程序设计》第五次实验报告
20145333 实验五 Java网络编程及安全 北京电子科技学院(BESTI)实验报告 课程:Java程序设计 班级:1453 指导教师:娄嘉鹏 实验日期:2016.05.06 18:30-21:3 ...
- SQL系列 - SQL语句优化个人总结
关于SQL语句优化方法 有些是通用的(如避免Select *): 有些不同的数据库管理系统有所区别(如Where子句顺序): 然后必须根据实际环境进行调优,因为即使是相同的数据库和表,在数据量或其他环 ...
- 混合开发的大趋势之一React Native与Android联调
转载请注明出处:王亟亟的大牛之路 先安利,有空我都会更,看到的好东西都会放进来:https://github.com/ddwhan0123/Useful-Open-Source-Android 公司某 ...
- tsar的使用
项目地址https://github.com/alibaba/tsar 安装 $ git clone git://github.com/kongjian/tsar.git $ cd tsar $ ma ...
- RocketMQ 自己的整理和理解
每个人的想法不同, RocketMQ 介绍的时候就说 是阿里从他们使用的上 解耦出来 近一步简化 便捷的 目的当然是 让其能快速入手和开发 如果不是在项目设计层面上 只是使用的话 从Git上下载该项目 ...
- Mysql uploader File
前几天和哥们做一次渗透测试,内网情况.防护相当严格. 内网不允许访问DMZ,DMZ不允许访问内网,除了服务端口,比如80,3306. 经过长时间的分析,就发现本机连接了内网的一个MYQL,发现WEB开 ...
- git开发错分支
1,代码未提交时: 使用以下命令即可解决. git add . (把所有改动暂存) git stash (把暂存的文件提交到git的暂存栈) git checkout 本该提交代码的 ...
- codeforces741D Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...
- nmap 端口扫描王，查看端口是否可访问，是否对外开放
NMap,也就是Network Mapper,最早是Linux下的网络扫描和嗅探工具包. 1 安装 apt-get install nmap 2 使用,查看ip下所有对外的端口 $ sudo nmap ...