<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义闪烁点</title>
<link rel="stylesheet" href="plug-in/openlayer3/css/ol.css">
<script type="text/javascript" src="plug-in/openlayer3/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="plug-in/openlayer3/js/ol-debug.js"></script>
<script type="text/javascript" src="plug-in/openlayer3/custom/flash-marker.js"></script>
<style type="text/css">
html,body,#map{
height: 100%;
width: 100%;
margin: 0px;
padding:0px;
}
</style>
<script type="text/javascript">
function init() {
var map=new ol.Map({
target:'map',
layers:[
getTdtLayer("vec_c"),
getTdtLayer("cva_c")
],
controls: ol.control.defaults({
attribution: false,
zoom:false
}).extend([
new ol.control.Zoom({
zoomInTipLabel:"放大",
zoomOutTipLabel:"缩小",
target:document.getElementById("zoomControl")
})
]),
view:new ol.View({
projection:'EPSG:4326',
extent:[-180,-90,180,90],
center:ol.proj.transform([11.56,-23],"EPSG:3857","EPSG:4326"),
zoom:2
})
});
var markerSource=new ol.source.Vector();
var geoMarker=new ol.Feature({
type:'geoMarker',
geometry:new ol.geom.Point([116.390373,39.9078])
});
markerSource.addFeature(geoMarker);
var markerVector=new ol.layer.Vector({
source:markerSource
});
map.addLayer(markerVector);
//图层点击事件
var selectMouseClick=new ol.interaction.Select({
layers:[markerVector],
condition:ol.events.condition.click,
hitTolerance:10
});
map.addInteraction(selectMouseClick);
selectMouseClick.on("select",function (evt) {
if(evt.target.getFeatures().getArray().length>0){
alert(1);
}
});
var citys=[
{
name: '北京',
lnglat: [116.3, 39.9],
color: '#DD4E40',
type: 'circle',
speed: 0.2,
},{
name: '上海',
lnglat: [121.561,31.263],
color: '#1230DA',
type: 'ellipse',
max:50,
speed: 0.5
}
]
FlashMarker(map, citys);
}
//获取天地图图层 加载CGCS2000坐标系地图方式
function getTdtLayer(lyr) {
var url = "http://t4.tianditu.com/DataServer?T="+lyr+"&x={x}&Y={y}&L={z}";
var projection = ol.proj.get("EPSG:4326");
var projectionExtent = [ -180, -90, 180, 90 ];
var maxResolution = (ol.extent.getWidth(projectionExtent) / (256 * 2));
var resolutions = new Array(19);
for (var z = 0; z < 19; ++z) {
resolutions[z] = maxResolution / Math.pow(2, z);
}
var tileOrigin = ol.extent.getTopLeft(projectionExtent);
var layer = new ol.layer.Tile({
extent: [ -180, -90, 180, 90],
source: new ol.source.TileImage({
tileUrlFunction: function(tileCoord) {
var z = tileCoord[0]+1;
var x = tileCoord[1];
var y = -tileCoord[2]-1;
var n = Math.pow(2, z + 1);
x = x % n;
if (x * n < 0) {
x = x + n;
}
return url.replace('{z}', z.toString())
.replace('{y}', y.toString())
.replace('{x}', x.toString());
},
projection: projection,
tileGrid: new ol.tilegrid.TileGrid({
origin: tileOrigin,
resolutions: resolutions,
tileSize: 256
})
})
});
return layer;
}
</script>
</head>
<body onload="init()">
<div id="map">
<div id="zoomControl" style="position:absolute;z-index:99;top:10px;left: 25px;"></div>
</div>
</body>
</html>
olFlashMarker.rar （18个子文件） 
olFlashMarker plug-in openlayer3 css 
ol.css 3KB custom flash-marker.js 8KB js jDialog jDialog.js 1KB source jquery.dialog.js 42KB img 
dialog-btns.gif 3KB
title-bg.png 94B jDialog.css 8KB jquery.drag.js 2KB jquery.mask.js 4KB HashMap.js 3KB drawToolMap.js 23KB jquery-1.8.3.min.js 91KB listLinkMap.js 2KB toastr toastr.min.js 4KB toastr.min.css 5KB ol.js 492KB ol-debug.js 2.48MB
olFlashMarker.html 5KB资源评论
yuan_82592018-11-12基本可用有教育意义，不知ol4能用不- wapman_20002019-07-19效果是好，但是不灵活，感觉用不动。
- qitongfei20122019-01-03效果不错，谢谢分享
dreamgis2018-12-03效果很好，谢谢分享
