mapbox 與 openlayers 實現晨昏線效果
阿新 • • 發佈:2019-01-10
轉自https://blog.csdn.net/u014529917/article/details/77506542
替換mapbox access_token
<!DOCTYPE html> <html> <head> <title>Mapbox Vector Tiles</title> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src='http://momentjs.cn/downloads/moment.js'></script> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script> <script src="https://openlayers.org/en/v4.6.5/examples/resources/mapbox-streets-v6-style.js"></script> <style> .map { background: #f8f4f0; } </style> </head> <body> <div id="map" class="map"></div> <script> var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}?access_token=*********************' }) }) ], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); </script> <script type="text/javascript"> $(function (){ alert(11); addDayNightTerminator(); }) </script> <script type="text/javascript"> function addDayNightTerminator(){ var twilightWidth = 667918; var twilightSteps = 13; var points = 288; var maxDimension = ol.proj.get('EPSG:3857').getExtent()[3]; var minDimension = ol.proj.get('EPSG:3857').getExtent()[1]; this.dayFeatures = []; this.nightFeatures = []; this._terminatorCurveSetCache = {}; this._generateTerminatorCurveSet = function(dayOfYear) { offsetX = maxDimension; var declination = 0.40927971 * Math.sin((2 * Math.PI / 365) * (dayOfYear - 81.5)); var termFunction = function(lon) { var cosFactor = -Math.cos((lon + offsetX) * (Math.PI / maxDimension)); return (2 * maxDimension / Math.PI) * Math.atan(cosFactor / Math.tan(declination)); }; var lonPrimeFunction = function(t) { return (maxDimension - minDimension) / points; }; var latPrimeFunction = function(t) { var aFactor = 2 * maxDimension / Math.PI; var bFactor = offsetX; var cFactor = Math.PI / maxDimension; var dFactor = Math.tan(declination); var cosOperand = ((minDimension + (((maxDimension - minDimension) / points) * t)) + bFactor) * cFactor; return (aFactor / (1 + Math.pow((-Math.cos(cosOperand) / dFactor), 2))) * (Math.sin(cosOperand) / dFactor) * (cFactor * (maxDimension - minDimension)) / points; }; var lonParallelFunction = function(dist, t) { return (dist * latPrimeFunction(t)) / Math.sqrt(Math.pow(lonPrimeFunction(t), 2) + Math.pow(latPrimeFunction(t), 2)); } var latParallelFunction = function(dist, t) { return (dist * lonPrimeFunction(t)) / Math.sqrt(Math.pow(lonPrimeFunction(t), 2) + Math.pow(latPrimeFunction(t), 2)); } var lineCoords = []; for (var i = 0; i < twilightSteps; i++) { lineCoords.push([]); } for (var i = 0; i < points; i++) { var lon = minDimension + ((maxDimension - minDimension) / points * i); var lat = termFunction(lon); lineCoords[0].push([lon, lat]); var latDeg = ol.proj.toLonLat([lon, lat])[1]; var latRad = latDeg * Math.PI / 180; var baseDist = (twilightWidth / (twilightSteps - 1)) / Math.cos(latRad); var steps = (twilightSteps - 1) / 2 for (var j = 1; j <= steps; j++) { var dist = baseDist * j; lineCoords[j].push([lon + lonParallelFunction(dist, i), Math.max(lat - latParallelFunction(dist, i), minDimension)]); lineCoords[j + steps].push([lon - lonParallelFunction(dist, i), Math.min(lat + latParallelFunction(dist, i), maxDimension)]); } } var dayShimCoord = (declination < 0) ? minDimension : maxDimension; var nightShimCoord = (declination < 0) ? maxDimension : minDimension; return { curves: lineCoords, dayShimCoord: dayShimCoord, nightShimCoord: nightShimCoord }; }; this.getTerminatorCurveSet = function(dayOfYear) { if (!(dayOfYear in this._terminatorCurveSetCache)) { this._terminatorCurveSetCache[dayOfYear] = this._generateTerminatorCurveSet(dayOfYear); } return $.extend(true, {}, this._terminatorCurveSetCache[dayOfYear]); }; this.setClock = function(clock) { var now = moment.unix(clock).utc(); var baseCurveData = this.getTerminatorCurveSet(now.dayOfYear()); var dayFraction = (now.hour() * 3600 + now.minute() * 60 + now.second()) / 86400; var offsetX = dayFraction * 2 * maxDimension; offsetX = Math.round(offsetX / ((2 * maxDimension) / points)) * ((2 * maxDimension) / points); $.each(baseCurveData.curves, $.proxy(function(k1, curve) { $.each(curve, function(k2, coord) { curve[k2][0] -= offsetX; }); var count = 0; while (true) { if (count > curve.length) { break; } if (curve[0][0] < minDimension) { var coord = curve.shift(); coord[0] += (maxDimension - minDimension); curve.push(coord); } else { break; } count++; } curve.push([curve[0][0] + (maxDimension - minDimension), curve[0][1]]); var nightCoords = curve.slice(0); nightCoords.push([maxDimension, baseCurveData.nightShimCoord], [minDimension, baseCurveData.nightShimCoord], curve[0]); /*$.each(nightCoords, function(i, coord) { //如果地圖是4326座標系,需要在這裡轉化 nightCoords[i] = ol.proj.transform(nightCoords[i],'EPSG:3857','EPSG:4326') });*/ var nightGeometry = new ol.geom.Polygon([nightCoords]); this.nightFeatures[k1].setGeometry(nightGeometry); }, this)); }; for (var i = 0; i < twilightSteps; i++) { this.nightFeatures.push(new ol.Feature({ type: 'night' })); } this.setClock(Math.round(new Date().getTime()/1000));//設定時間,不設定則為當前時間 '2017-03-22 12:00' var twilightLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [].concat(this.nightFeatures) }), opacity:0.1, style:new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(0,0,0,0.4)' }) }) }); map.addLayer(twilightLayer); }; </script> </body> </html>