【openlayers-3】加载图标

2023-12-30 13:30:41

在OpenLayer3中添加图标有两种方式,一种是通过overlay方式,另一种是通过Feature + Style的方式。?

1、通过overlay方式添加

<div id="mapCon" style="width: 100%; height: 100%; position: absolute;"></div>
<div id="testpng"><img src="../testdata/data.png" alt="示例锚点"/></div>
<script type="text/javascript">

var url = 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}';

var map = new ol.Map({
  // 设置地图图层
  layers: [
	new ol.layer.Tile({ source: new ol.source.XYZ({ url: url }) })
  ],
  // 设置显示地图的视图
  view: new ol.View({
	center: [117.23, 36.43],
	zoom: 10,
	projection: 'EPSG:4326'//设置坐标系,地图本身3857坐标系,即横轴墨卡托投影,因为中心点用的度,所以设置成wgs84代号是4326
  }),
  // 让id为map的div作为地图的容器
  target: 'mapCon',
});

// 把上面的图标附加到地图上,需要一个ol.Overlay
var anchor = new ol.Overlay({
  element: document.getElementById('testpng')
});
// 关键的一点,需要设置附加到地图上的位置
anchor.setPosition([117.26, 37.2]);
// 然后添加到map上
map.addOverlay(anchor);
</script>

2、通过?Feature + Style方式

实现代码和上述方式一致,在body中添加style。

<!--定义动画,图标先放大,再缩小-->
<style type="text/css">
@keyframes zoom
{
  from {top: 0; left: 0; width: 32px; height: 32px;}
  50% {top: -16px; left: -16px; width: 64px; height: 64px;}
  to {top: 0; left: 0; width: 32px; height: 32px;}
}

@-moz-keyframes zoom /* Firefox */
{
  from {top: 0; left: 0; width: 32px; height: 32px;}
  50% {top: -16px; left: -16px; width: 64px; height: 64px;}
  to {top: 0; left: 0; width: 32px; height: 32px;}
}

@-webkit-keyframes zoom /* Safari 和 Chrome */
{
  from {top: 0; left: 0; width: 32px; height: 32px;}
  50% {top: -16px; left: -16px; width: 64px; height: 64px;}
  to {top: 0; left: 0; width: 32px; height: 32px;}
}

@-o-keyframes zoom /* Opera */
{
  from {top: 0; left: 0; width: 32px; height: 32px;}
  50% {top: -16px; left: -16px; width: 64px; height: 64px;}
  to {top: 0; left: 0; width: 32px; height: 32px;}
}

/* 应用css动画到图标元素上 */
#taiyang
{
  display: block;
  position: absolute;
  animation: zoom 5s;
  animation-iteration-count: infinite; /* 一直重复动画 */
  -moz-animation: zoom 5s; /* Firefox */
  -moz-animation-iteration-count: infinite; /* 一直重复动画 */
  -webkit-animation: zoom 5s;  /* Safari 和 Chrome */
  -webkit-animation-iteration-count: infinite; /* 一直重复动画 */
  -o-animation: zoom 5s; /* Opera */
  -o-animation-iteration-count: infinite; /* 一直重复动画 */
}
</style>

为image添加id:

<div id="testpng"><img id="taiyang" src="../testdata/1.png" alt="示例锚点"/></div>

文章来源:https://blog.csdn.net/WXG1011/article/details/135303156
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。