Openlayers3中實現地圖的切割

阿新 • • 發佈：2019-02-06

概述：

本文講述如何在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:[email protected]

公眾號:lzugis15

Q Q 群:452117357(webgis)

337469080(Android)

Openlayers3中實現地圖的切割

概述：本文講述如何在Openlayers3中結合canvas實現對地圖的切割。效果：全圖切割北京區域切割河北區域實現：<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e

openLayers3 中實現多個Overlay

openLayers3 中實現多個Overlay 此篇的目的是為了記錄下用Overlay的一些操作。其實實現多個就是建立多個div,然後給每個div繫結Overlay。 1 //頁面載入完函式 --顯示個關鍵點的 2 window.onload

openlayers3+中實現點選、圈選、多邊形選擇點要素

點選、圈選、多邊形選擇也是地圖中比較基礎的功能了，只是一直沒有需求，最近兩天把這個功能從頁面到功能完整的做了一遍。我使用的方法是使用ol4的API加一些js演算法，這裡記錄一下。 1、需求點選：點選

微信小程式中實現地圖導航

<map id="map" longitude="116.715790" latitude="23.362490" markers="{{markers}}" scale="18" style="width: 100%; height: 300px;" bindta

Shell_Linux Shell 中實現字串切割的幾種方法

我們在shell 指令碼程式設計中，經常需要用到字串切割，即將字串切割為一個數組，類似java 中的split 函式，下面對幾種常見的方式做一個總結。參考文章：shell 使用指定的分割符來分割字串目錄方法一：利用shell 中變數的字串替換方法二：設定分隔符，

js中實現高德地圖坐標經緯度轉百度地圖坐標

math.sqrt pan poi 結果 mat blog 筆記百度說明 1 function tobdMap(x, y) { 2 var x_pi = 3.14159265358979324 * 3000.0 / 180.0; 3

vue中實現百度地圖拖拽地圖定位功能

.com 元素偏移量 locals 進行函數 nco 查看 page 效果如果所示，拖動地圖。中間圖標不動，並且自動獲取地圖當前中心點的經緯度。然後就可以用經緯度做其他的操作了。。。首先查看了百度地圖的api。能實現這個功能最貼近的就是marker。marker

vue中使用raphael.js實現地圖繪制

proc -c ima order ont .text mov += svg 一、效果圖二、在vue中引入raphael.js npm i raphael -S 三、封裝一個名為StreetMap的組件，代碼如下 1 <template> 2

運維中的日誌切割操作梳理（Logrotate/python/shell指令碼實現）

對於Linux系統安全來說，日誌檔案是極其重要的工具。不知為何，我發現很多運維同學的伺服器上都執行著一些諸如每天切分Nginx日誌之類的CRON指令碼，大家似乎遺忘了Logrotate，爭相發明自己的輪子，這真是讓人沮喪啊！就好比明明身邊躺著現成的性感美女，大家卻忙著自娛自樂，罪過！logrotate程式是一

OpenLayers3基礎教程之實現地圖鷹眼以及地圖比例尺的新增

1. 前言地圖鷹眼就是地圖的鳥瞰圖，就是通常所說的小地圖，我們可以通過鷹眼得到當前地圖的顯示位置，也可以在鷹眼上單擊、拖動或移動到想要檢視的位置，鷹眼的可見區域比我們所看的主視區的範圍要大，鷹眼的中心框就是主視區的可視範圍， Openlayers 3 封裝的

vue專案中實現maptalks地圖上彈框使用videojs播放實時視訊rtmp流

不限制於vue專案，區別只是相關檔案的引入最終實現效果如下： 1、首先引入需要的資源：vue-video-player、maptalks相關 npm install vue-video-player --save npm install maptalks -

OpenLayers3基礎教程之實現地圖顯示功能

1.配置開發環境使用OpenLayers 3開發WebGIS應用，我們首先需要配置開發環境，首先我們需要在openlayers官網獲取OpenLayers 3的開發庫。下載連結：官網。開啟後如圖所示：需要注意的是這裡下載有兩個版本，①：僅包括開

高德地圖中實現實時定位、駕車路線規劃，點間距

/** * 實現地圖的載入 * @author 木蘭綴露 *對於標記點過多的顯示問題，將定位點的經緯度傳至伺服器的方法內增加減少經緯度，然後好資料庫標記點進行經緯度比對，如果有則載入到前臺，如果沒則擴大載入範圍 */ public class MapActi

Unity中判斷地圖上兩點之間相對於正北方向的角度 c#實現

由於最近專案需要一些關於地理位置展示方面的需要，需要牽涉到地理位置方面與角度之間的計算。文章中參考了大神的程式碼，但是其是java程式碼實現的，無法在unity中直接使用。有興趣的可以直接閱讀原文http://blog.csdn.net/liang5630/article/

Java中實現String.padLeft和String.padRight

toc 還要 color for 失去 1-1 arraycopy ace pre 因為習慣了C#中的padLeft和padRight，接觸Java後突然失去這兩個功能，覺得別扭，就試著實現了這兩個方法。 Java中String.format()中帶有字符串對齊功能如下

php中實現頁面跳轉的幾種方式

腳本 timeout location clas replace asc idt lee 實現親測，not復制粘貼 PHP中實現頁面跳轉有一下幾種方式，看了幾個人寫的不是很條理，自己整理一下在PHP腳本代碼中實現 <?php header("locati

關於java中實現在oracle數據庫中實現對中文首字母進行排序的解決方案

capital obj create team capi substr order ring 一個首先介紹Oracle 9i新增加的一個系統自帶的排序函數 1、按首字母排序在oracle9i中新增了按照拼音、部首、筆畫排序功能。設置NLS_SORT值 SCHIN

Quick-Cocos2d3.2RC1在Code IDE中實現代碼提示

ref 使用分享 tin doc tails 位置壓縮包 http 之前寫Lua最痛苦的就是代碼提示問題，如今官方給了IDE很好用。以下說Quick使用IDE加入代碼提示問題。第一步：制作api提示壓縮包。須要使用控制臺實現方法例如以下： 1、找到framew

ASP.NET MVC & WebApi 中實現Cors來讓Ajax可以跨域訪問（轉載）

詳細簡介 part bsp bob 打印不能 res user 什麽是Cors？ CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了

在Android中實現陰影效果

sta 技術 wid 語言 mat floating 大表 ado sch 在Android L推出後，Google提出了全新的設計語言：材質設計。其中很重要的一點就是陰影效果的使用，你可以為每一個View設置一個elevation值，相當於除了x、y之外的z值，z值決定

Openlayers3中實現地圖的切割

相關推薦