编程 Javascript

基于openlayers4实现点的扩散效果

Posted in Javascript onAugust 17, 2020

本文实例为大家分享了openlayers4实现点的扩散效果，供大家参考，具体内容如下

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Title</title> 
 <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/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://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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

- Author -

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

通过url查找a元素应用案例

Apr 29 Javascript

js清空form表单中的内容示例

May 20 Javascript

JavaScript模块随意拖动示例代码

May 27 Javascript

js判断登录与否并确定跳转页面的方法

Jan 30 Javascript

javascript实现文字无缝滚动

Dec 27 Javascript

如何理解Vue的.sync修饰符的使用

Aug 17 Javascript

ajax请求data遇到的问题分析

Jan 18 Javascript

webstorm中vue语法的支持详解

May 09 Javascript

vue动画打包后失效问题的解决方法

Sep 18 Javascript

解决Vue.js应用回退或刷新界面时提示用户保存修改问题

Nov 24 Javascript

Vue基础配置讲解

Nov 29 Javascript

解决 window.onload 被覆盖的问题方法

Jan 14 Javascript

vue-cli启动本地服务局域网不能访问的原因分析

Jan 22 #Javascript

webpack引入eslint配置详解

Jan 22 #Javascript

jquery在启动页面时,自动加载数据的实例

Jan 22 #jQuery

浅谈ajax在jquery中的请求和servlet中的响应

Jan 22 #jQuery

JavaScript中EventLoop介绍

Jan 22 #Javascript

element 结合vue 在表单验证时有值却提示错误的解决办法

Jan 22 #Javascript

基于vue2.x的电商图片放大镜插件的使用

Jan 22 #Javascript