基于openlayers4實現(xiàn)點的擴散效果

更新時間：2020年08月17日 15:30:33 作者：嚜溟

這篇文章主要為大家詳細介紹了基于openlayers4實現(xiàn)點的擴散效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了openlayers4實現(xiàn)點的擴散效果，供大家參考，具體內(nèi)容如下

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Title</title> 
 <link rel="stylesheet"  type="text/css"> 
 <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> 
 <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.4/build/ol.js"></script> 
 <style> 
  .css_animation{ 
   height:100px; 
   width:100px; 
   border-radius: 50%; 
   background: rgba(255, 0, 0, 0.9); 
   transform: scale(0); 
   animation: myfirst 3s; 
   animation-iteration-count: infinite; 
  } 
  @keyframes myfirst{ 
   to{ 
    transform: scale(2); 
    background: rgba(0, 0, 0, 0); 
   } 
  } 
 
 </style> 
</head> 
<body> 
 <div id="map" style="width: 100%;height: 100%"></div> 
 <script> 
  var map = new ol.Map({ 
   layers:[new ol.layer.Tile({ 
    source:new ol.source.OSM() 
   })], 
   target:'map', 
   view:new ol.View({ 
    center: [12950000, 4860000], 
    zoom:7 
   }) 
  }); 
 
  var point_div = document.createElement('div'); 
  point_div.className = 'css_animation'; 
  point_overlay = new ol.Overlay({ 
   element:point_div, 
   positioning:'center-center' 
  }); 
  map.addOverlay(point_overlay); 
 
  point_overlay.setPosition([12950000, 4860000]); 
 </script> 
</body> 
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JavaScript常用數(shù)組元素搜索或過濾的四種方法詳解
這篇文章主要介紹了JavaScript常用數(shù)組元素搜索或過濾的四種方法,每種方式通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-08-08
前端實現(xiàn)文本對比并高亮顯示差異的方法
文本對比是一個常見需求,尤其在版本控制和代碼編輯中,本文介紹了如何使用jsdiff庫和diff2html工具來實現(xiàn)文本內(nèi)容的差異比較和美化顯示,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
2024-09-09
JS實現(xiàn)盒子跟著鼠標移動及鍵盤方向鍵控制盒子移動效果示例
這篇文章主要介紹了JS實現(xiàn)盒子跟著鼠標移動及鍵盤方向鍵控制盒子移動效果,涉及javascript事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
2019-01-01
javascript之典型高階函數(shù)應用介紹
這幾個方法均為javascript 1.6 數(shù)組新增的方法。是很典型的functional 函數(shù)，當然也非常實用。下面是functional的定義并不來自javascript
2013-01-01
uniapp與webview直接進行傳值的代碼示例
在使用UniApp開發(fā)應用時,經(jīng)常需要實現(xiàn)WebView與UniApp之間的數(shù)據(jù)交互,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下
2024-09-09
H5手機端多文件上傳預覽插件
這篇文章主要為大家詳細介紹了H5圖片上傳插件，基于zepto，支持多文件上傳，進度和圖片預覽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
js 用CreateElement動態(tài)創(chuàng)建標簽示例
用CreateElement動態(tài)創(chuàng)建標簽，主要是html中常用的一些標簽，在本文有詳細的示例，喜歡的朋友可以參考下
2013-11-11
使用JavaScript構建JSON格式字符串實現(xiàn)步驟
這篇文章將幫助你使用javascript來創(chuàng)建json格式字符串如果你需要通過web項目來構建json格式字符串的響應,感興趣的各位可以參考下哈，希望可以幫助到你
2013-03-03
用方法封裝javascript的new操作符(一)
雖然js是基于對象的，但在很多時候會使用到new這個操作符。
2010-12-12
web3.js增加eth.getRawTransactionByHash(txhash)方法步驟
這篇文章主要介紹了web3.js增加eth.getRawTransactionByHash(txhash)方法步驟,需要的朋友可以參考下
2018-03-03