本文主要是介绍Dynamic Data——动态数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Example of dynamic data.
动态数据的例子。
代码：
动态数据的例子。
代码：
<!DOCTYPE html>
<html><head><title>Dynamic Data</title><link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/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.2.0/build/ol.js"></script></head><body><div id="map" class="map"></div><script>var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()})],target: 'map',view: new ol.View({center: [0, 0],zoom: 2})});// 点样式var imageStyle = new ol.style.Style({image: new ol.style.Circle({radius: 5,// 使用精确渲染
snapToPixel: false,fill: new ol.style.Fill({color: 'yellow'}),stroke: new ol.style.Stroke({color: 'red', width: 1})})});// 头部里面点样式var headInnerImageStyle = new ol.style.Style({image: new ol.style.Circle({radius: 2,snapToPixel: false,fill: new ol.style.Fill({color: 'blue'})})});// 头部外面点样式var headOuterImageStyle = new ol.style.Style({image: new ol.style.Circle({radius: 5,snapToPixel: false,fill: new ol.style.Fill({color: 'black'})})});var n = 200;var omegaTheta = 30000; // Rotation period in ms // 毫秒旋转周期var R = 7e6;var r = 2e6;var p = 2e6;// map的postcompose事件
map.on('postcompose', function(event) {var vectorContext = event.vectorContext;var frameState = event.frameState;var theta = 2 * Math.PI * frameState.time / omegaTheta;var coordinates = [];var i;for (i = 0; i < n; ++i) {var t = theta + 2 * Math.PI * i / n;var x = (R + r) * Math.cos(t) + p * Math.cos((R + r) * t / r);var y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r);coordinates.push([x, y]);}vectorContext.setStyle(imageStyle);vectorContext.drawGeometry(new ol.geom.MultiPoint(coordinates));var headPoint = new ol.geom.Point(coordinates[coordinates.length - 1]);vectorContext.setStyle(headOuterImageStyle);vectorContext.drawGeometry(headPoint);vectorContext.setStyle(headInnerImageStyle);vectorContext.drawGeometry(headPoint);map.render();});map.render();</script></body>
</html>这篇关于Dynamic Data——动态数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
