Openlayers 점 반 짝 임 확산 효과 실현
5034 단어 Openlayers깜박거리다퍼지다
점 깜빡 임 스타일:
DOM 의 스타일 구현
/** */
.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 를 어떻게 사용 하 는 지 에 대해 API 설명 을 했 습 니 다.
/// overlay,element web DOM
var popup = new ol.Overlay({
element: document.getElementById('popup')
});
popup.setPosition(coordinate);// overlay
map.addOverlay(popup);// overlay
구체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" 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>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
React가 지원되지 않는 UI 라이브러리에서도 구성 요소로 그리기캔버스에서 그림과 도형을 그릴 수 있지만, 캔버스에서 Element을 그릴 수 있는 Overlay 기능이 있습니다. 다만, 오픈라이어스는 리액트를 지원하지 않기 때문에 일반적으로 설치하면 document.create...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.