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