欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Openlayers實現(xiàn)點閃爍擴散效果

 更新時間:2020年09月24日 13:55:59   作者:gw依舊愛學(xué)習(xí)  
這篇文章主要為大家詳細介紹了Openlayers實現(xiàn)點閃爍擴散效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

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

點閃爍樣式:

DOM的樣式實現(xiàn)

/**橙色點擴散閃爍樣式*/
.point_animation{
 background: #ff9900;
 width: 6px;
 height: 6px;
 border: 2px #ff9900 solid;
 border-radius: 50%;
 position: absolute;
}
.point_animation p, .point_animation span{
 position: absolute;
 width: 4px;
 height: 4px;
 animation: point_animation 1.5s infinite;
 box-shadow: 0px 0px 1px #ff9900; 
 margin: 0px;
 border-radius: 50%;
}
.point_animation span{
 animation-delay: 0.8s;
}
@keyframes point_animation{
 10% {
 transform: scale(1);
 }
 100% {
 transform: scale(8);
 }
}
/**紅色點擴散閃爍樣式*/
.css_animation{
 height:50px; 
 width:50px;
 border-radius: 25px; 
 background: rgba(255, 0, 0, 0.9);
 transform: scale(0);
 animation: mypoint 3s;  
 animation-iteration-count: infinite;
}
@keyframes mypoint{
 to{
 transform: scale(1.5);
 background: rgba(0, 0, 0, 0);
 }
}

在地圖上添加點—采用overlay添加DOM元素

需要用到Openlayers中的overlay元素,官方對于如何使用overlay做出了相關(guān)API說明

///創(chuàng)建overlay,element傳入的是存在于web中的DOM元素
var popup = new ol.Overlay({
 element: document.getElementById('popup')
});
popup.setPosition(coordinate);//設(shè)置overlay的位置
map.addOverlay(popup);//講overlay添加到地圖上

具體代碼

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>點擴散</title>
 <link rel="stylesheet"  type="text/css">
  <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
 <style>
 .point_animation{
  background: #ff9900;
  width: 6px;
  height: 6px;
  border: 2px #ff9900 solid;
  border-radius: 50%;
  position: absolute;
 }

 .point_animation p, .point_animation span{
  position: absolute;
  width: 4px;
  height: 4px;
  animation: point_animation 1.5s infinite;
  box-shadow: 0px 0px 1px #ff9900; 
  margin: 0px;
  border-radius: 50%;
 }
 .point_animation span{
  animation-delay: 0.8s;
 }
 @keyframes point_animation{
  10% {
  transform: scale(1);
  }
  100% {
  transform: scale(8);
  }
 }
 .css_animation{
  height:50px; 
  width:50px;
  border-radius: 25px; 
  background: rgba(255, 0, 0, 0.9);
  transform: scale(0);
  animation: mypoint 3s;   
  animation-iteration-count: infinite;
 }
 @keyframes mypoint{
  to{
  transform: scale(1.5);
  background: rgba(0, 0, 0, 0);
  }
 }
 </style>
</head>
 
<body>
 <div id="container"></div>
 <script type="text/javascript">
 var baseLayer = new ol.layer.Tile({
  source: new ol.source.XYZ({
  url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
  }),
 });
 
 var map = new ol.Map({
  layers: [baseLayer],
  view: new ol.View({
  center: [104.5602,32.4070],
  projection: 'EPSG:4326',
  zoom: 4,
  extent: [-180, -90, 180, 90]
  }),
  target: "container",
  interactions:ol.interaction.defaults({
  doubleClickZoom: false
  }),
  controls:ol.control.defaults({
  zoom:false,
  attribution: false,
  }),
 });
 setFlashPoint()
 function setFlashPoint(){
  //第一種樣式
  var element = document.createElement("div");
  element.className = "point_animation";
  var p = document.createElement("p");
  var span = document.createElement("span");
  element.appendChild(p);
  element.appendChild(span);
  var point_overlay = new ol.Overlay({
  element: element,
  positioning: 'center-center',
  });
  map.addOverlay(point_overlay);
  point_overlay.setPosition([120,30]);
  //第二種樣式
  var ele = document.createElement("div");
  ele.className = "css_animation";
  var point_overlay2 = new ol.Overlay({
  element: ele,
  positioning: 'center-center',
  });
  map.addOverlay(point_overlay2);
  point_overlay2.setPosition([110,30]);
 }
 </script>
</body>
</html>

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

相關(guān)文章

  • JS實現(xiàn)百度新聞導(dǎo)航欄效果

    JS實現(xiàn)百度新聞導(dǎo)航欄效果

    這篇文章主要為大家詳細介紹了JS實現(xiàn)百度新聞導(dǎo)航欄效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • 原生JavaScript實現(xiàn)輪播圖效果

    原生JavaScript實現(xiàn)輪播圖效果

    這篇文章主要為大家詳細介紹了原生JavaScript實現(xiàn)輪播圖效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • 基于jquery ajax的多文件上傳進度條過程解析

    基于jquery ajax的多文件上傳進度條過程解析

    這篇文章主要介紹了基于jquery ajax的多文件上傳進度條過程解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-09-09
  • JS對象數(shù)組去重的3種方法示例及對比

    JS對象數(shù)組去重的3種方法示例及對比

    這篇文章主要給大家介紹了關(guān)于JS對象數(shù)組去重的3種方法,三種方法分別包括使用filter和Map、使用reduce以及for循環(huán),文中每個方法都給出了示例代碼,需要的朋友可以參考下
    2021-07-07
  • 微信域名檢測接口調(diào)用演示步驟(含PHP、Python)

    微信域名檢測接口調(diào)用演示步驟(含PHP、Python)

    這篇文章主要介紹了微信域名檢測接口調(diào)用演示步驟(含PHP、Python),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-12-12
  • 一文帶你搞懂JavaScript中的原型和原型鏈

    一文帶你搞懂JavaScript中的原型和原型鏈

    JavaScript是基于原型繼承的語言,每個對象都有一個原型(prototype),本文則是重點對prototype相關(guān)知識點做拆解和梳理,感興趣的可以了解下
    2023-08-08
  • Javascript驗證Visa和MasterCard信用卡號的方法

    Javascript驗證Visa和MasterCard信用卡號的方法

    這篇文章主要介紹了Javascript驗證Visa和MasterCard信用卡號的方法,涉及javascript正則驗證的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-07-07
  • Javascript編程之繼承實例匯總

    Javascript編程之繼承實例匯總

    這篇文章主要介紹了Javascript編程之繼承實現(xiàn)方法,結(jié)合實例形式分析匯總了五種常見的繼承技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-11-11
  • JS中比Switch...Case更優(yōu)雅的多條件判斷寫法

    JS中比Switch...Case更優(yōu)雅的多條件判斷寫法

    這篇文章主要給大家介紹了關(guān)于JS中比Switch...Case更優(yōu)雅的多條件判斷寫法,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • JS在一定時間內(nèi)跳轉(zhuǎn)頁面及各種刷新頁面的實現(xiàn)方法

    JS在一定時間內(nèi)跳轉(zhuǎn)頁面及各種刷新頁面的實現(xiàn)方法

    這篇文章主要介紹了JS在一定時間內(nèi)跳轉(zhuǎn)頁面及各種刷新頁面的實現(xiàn)方法的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-05-05

最新評論