基于openlayers4实现点的扩散效果

2024-08-23 08:34:12

本文实例为大家分享了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" rel="external nofollow" 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>

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

使用OpenLayers3 添加地图鼠标右键菜单

添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 contextmenu 事件的回调函数中实现相应的显示菜单功能即可. 那么在 openlayers 中,在地图中添加这个事件,我们从哪里下手呢?首先我们得了解 openlayers 的初始化页面的过程. openlayers 初始化页面过程 openlayers 也是一个前端库,那么它肯定离不开 html 的运用
使用OPENLAYERS3实现点选的方法

WebGIS开发中,点击查询是最常用的一种查询方式,在ArcGIS api 中,这种查询叫IdentifyTask,主要作用是前台提交参数,交ArcServer查询分析返回.本文从开源框架的角度,从前台到服务端到数据库等多个角度,多种方式实现点击查询.干货如下: 1.1 Select控制器对于矢量数据,Ol3中的官网demo提供了一个Select控件,实现鼠标的选择查询,代码如下: //定义select控制器 var select= new ol.interaction.Select(); m
基于openlayers4实现点的扩散效果

本文实例为大家分享了openlayers4实现点的扩散效果,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://openlayers.org/en
Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效

今年春节晚会没看尽兴,被支付宝集福给添了一段插曲,朋友们都在那数定时间段不停的咻一咻,哇,我咻到一个敬业福,不可能的,哈哈.那么咻一咻功能基于程序代码是怎么实现的呢?下面我们小编给大家分享本教程帮助大家学习Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效,具体内容如下所示: 先来看看这个效果这是我的在Only上添加的效果,说实话,Only现在都还只是半成品,台面都上不了,怪自己技术不行,也太懒了 PS:这个view也是我模仿了人家的效果,参考了人家的思路写的,不是纯手撸,罪过罪过
openlayers4实现点动态扩散

本文实例为大家分享了openlayers4实现的点动态扩散的具体代码,供大家参考,具体内容如下原理:连续刷新地图,并且刷新时,修过点样式的半径大小,来实现扩散效果: //定义底图 var baseLayer = new ol.layer.Vector({ renderMode: 'image', source: new ol.source.Vector({ url:'/data/shengjie.geojson', format: new ol.format.GeoJSON() }), sty
基于jQuery实现图片推拉门动画效果的两种方法

''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换. 实现方法一:改变图片宽度 html+css代码 <body> <div class="box"> <ul>  <li&g
Python基于pygame实现的弹力球效果(附源码)

本文实例讲述了Python基于pygame实现的弹力球效果.分享给大家供大家参考,具体如下: 运行效果: 代码部分如下: #A bouncing ball import sys, pygame __author__ = {'name' : 'Hongten', 'mail' : 'hongtenzone@foxmail.com', 'QQ' : '648719819', 'Version' : '1.0'} pygame.init() size = width, height = 600, 50
Android基于TextView实现的跑马灯效果实例

本文实例讲述了Android基于TextView实现的跑马灯效果.分享给大家供大家参考,具体如下: package sweet.venst.act; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException; import java.io.InputStrea
JS基于Mootools实现的个性菜单效果代码

本文实例讲述了JS基于Mootools实现的个性菜单效果代码.分享给大家供大家参考,具体如下: 这里演示基于Mootools做的带动画的垂直型菜单,是一个初学者写的,用来学习Mootools的使用有帮助,下载时请注意要将外部引用的mootools.1.11.js一并下载到本地.注意,如果看不到效果请刷新网页. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mootools-style-menu-codes/ 具体代码如下: <!DOCTY
python实现基于两张图片生成圆角图标效果的方法

本文实例讲述了python实现基于两张图片生成圆角图标效果的方法.分享给大家供大家参考.具体分析如下: 使用pil的蒙版功能,将原图片和圆角图片进行叠加,并将圆角图片作为mask,生成新的圆角图片 from PIL import Image flower = Image.open('flower.png') border = Image.open('border.png') source = border.convert('RGB') flower.paste(source, mask=bord
JS基于Ajax实现的网页Loading效果代码

本文实例讲述了JS基于Ajax实现的网页Loading效果代码.分享给大家供大家参考,具体如下: 这是一款很不错的网页Loading效果,常用于Ajax交互式网页设计中,点击按钮即可弹出Loading框,若Loading框未加载完成时关闭网页,会弹出确认提示框,用于一些对安全性能要求高的网页交互处理中,比如付款操作. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ajax-web-loading-style-codes/ 具体代码如下:
基于javascript实现随机颜色变化效果

本文实例讲解了基于javascript实现随机颜色变化效果,分享给大家供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>随机颜色变化效果</title> <style type="text/css"> #thediv{

基于openlayers4实现点的扩散效果

相关推荐

随机推荐