mapbox 与 openlayers 实现晨昏线效果
2024-06-05 06:26:30
博客地址：博客地址
转自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>
<scriptsrc="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><scriptsrc="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) / 2for (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>mapbox 与 openlayers 实现晨昏线效果相关推荐
- Mapbox HTML可视化点，线，多线，面带底图
Mapbox HTML可视化点,线,多线,面带底图 1. 效果图 2. 源码 参考 1. 效果图 如下所示:可显示蓝色点.红色线.红色多线.浅紫色多边形面: 2. 源码 <!DOCTYPE ht ...
- html怎么在字体中加波浪线,CSS3实现文字波浪线效果
前言 css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言.这波浪线,取巧的运用了linear-gradient属性,合角度.颜色.位置于一体,配合background-size,backgr ...
- echart实现3d地图_3D飞线效果——让线“飞”起来的秘密
在城市规划.统计.交通等行业,地图可视化已成为最直接也最吸引眼球的一种表达方式.例如人群迁徙.人口流动.OD出行.职住分析.客流来源等众多场景都需要用到飞线效果呈现. 2D飞线效果图 随着可视化技术的 ...
- canvas绘制飞线效果
在我们做的可视化大屏项目中,经常会遇到飞线的效果. 在我们的大屏编辑器中,可以通过拖拽+配置参数的方式很快就能够实现.下面是我们使用大屏编辑器实现的一个项目效果: 中间地图就有飞线的效果. 抛开编辑器 ...
- shader实现飞线效果(three.js练习)
一.先看看效果 二.实现方法: 1.飞线的相关配置数据准备 // 飞线效果的相关配置数据 const flyData = [{start: { //起始点位置x: 0,y: 0,z: 0},end: ...
- php加波浪线不解析,给文字加波浪线效果
这次给大家带来给文字加波浪线效果,给文字加波浪线效果的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言.这波浪线,取巧的运用了lin ...
- android 图片底部波浪线,Android实现波浪线效果（xml bitmap）
我们要实现的效果如下: 在这之前先带大家了解一下xml bitmap,何为xml bitmap? xml bitmap是一个用xml定义的文件放在资源目录,定义的对象是图片,为bitmap定义别名,这 ...
- html怎么下划波浪线,CSS3如何实现文字波浪线效果
CSS3如何实现文字波浪线效果 发布时间:2021-06-29 11:40:23 来源:亿速云 阅读:92 作者:小新 这篇文章主要介绍CSS3如何实现文字波浪线效果,文中介绍的非常详细,具有一定的参 ...
- Echarts实现3d 地图实现飞线效果
Echarts实现3d 地图实现飞线效果 注意:重点关注data中的数据格式 在lines3D中symbol不能设置指定样式,echarts官网也没有这个参数,所以对于lines3D飞线如何实现飞机航 ...
最新文章
- LeetCode简单题之设计停车系统
- aa bb ccc java,TinyTemplate(Velocity Plus版)即将火热推出~~~
- Android Retrofit @Streaming 注解失效（二）
- opencv 标记有数字的区域
- 贡献分选择结果——Teamwork
- sql 数据库维护索引_SQL索引维护
- Chrome浏览器快速获取静态控件的XPATH
- ethtool---查看网卡
- 《计算机系统：系统架构与操作系统的高度集成》——2.5 高级数据抽象
- NetworkComms.Net github下载地址
- 树莓派用python一键签到百度贴吧
- 马氏距离(Mahalanobis Distance)
- Unity单机手游逆向破解思路(仅供学习参考，禁止用于非法行为)
- 麻吉宝创世内测开启，阿里区块链邀请码AP751K
- 简单的Wifi网络概念
- 虚拟现实、增强现实与全息投影的区别
- vrchat新手教程_VRChat入门指南| 最新电脑资讯
- 初识CMake，如何编写一个CMake工程（下）
- matlab蠓虫分类问题,蠓的分类问题.doc
- Mysql安装步骤方法