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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PhpZendo

使用 Laravel 5.5+ 更好的来实现 404 响应

Laravel 5.5.10 封装了两个有用的路由器方法,可以帮助我们为用户提供更好的 404 页面。现在,当抛出 404 异常时,Laravel 会显示一个漂...

1092
来自专栏林德熙的博客

win10 uwp 模拟网页输入 使用 cookie

首先创建一个 WebView ,接下来的所有输入都需要在 NavigationCompleted 之后才可以使用。

802
来自专栏游戏杂谈

as3加载外部资源

在as3的开发中,经常会加载外部共用资源,比如某一个公用的图片或者其它小特效。这时候为了避免重复请求,一般会将这些资源放在一个fla文件中,为每一个资源添加链接...

884
来自专栏移动开发

SwipeRefreshLayout和RecyclerView使用的小问题

SwipeRefreshLayout是官方提供的下拉刷新控件,在使用过程碰到一些小问题和大家分享下. 下面的代码只能监听下拉手势所引发的事件

3874
来自专栏Flutter入门到实战

开发工具总结(1)之图文并茂全面总结上百个AS好用的插件(上)

俗话说得好,工欲善其事,必先利其器。做开发时间长了,总想找一些快捷方法,只有拥有好用的工具,才能节省开发时间,提高工作效率。我就是一个 追(喜)求(欢)高(偷)...

1911
来自专栏Android填坑指南

Android设备屏幕方向的一二事

orientation的取值为: - 横屏:Configuration.ORIENTATION_LANDSCAPE - 竖屏:Configuration.O...

62828
来自专栏我就是马云飞

ViewGroup源码解读

我们之前刚刚分析完事件传递机制和view的源码,如果没有看过的,建议看完View的事件拦截机制浅析以及View的事件源码解析。这次我们来分析下viewgroup...

1948
来自专栏刘望舒

Android解析WindowManager(二)Window的属性

前言 在上一篇文章我们学习了WindowManager体系,了解了Window和WindowManager之间的关系,这一篇我们接着来学习Window的属性。 ...

2368
来自专栏Android先生

Android 9.0适配及部分新特性介绍

在最开始针对速贷进行Android9.0版本的适配时,我使用的是真机是vivo X21A,将targetSdkVersion升到28,运行发现网络请求全报400...

1.3K4
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native0.50+开发指导

概要 本文主要对React Native 0.50的关键性的更新做个讲解和开发适配指导,希望能对从事React Native开发的你有所帮助: 在兼容性方面新增...

2814

扫码关注云+社区

领取腾讯云代金券