放棄openlayers3自帶軌跡回放效果、H5實現完美實現
阿新 • • 發佈:2019-02-14
1直感覺OL3的軌跡回放使用度不高,在點的數量變少的時候開始跳動,很不唯美,,所以結合百度路數的開放原始碼實現軌跡回放的完美滑動,如下圖:
附上程式碼(程式碼複製即可執行):
<!DOCTYPE html> <html> <head> <title>Accessible Map</title> <link rel="stylesheet" href="https://openlayers.org/en/v3.19.1/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/v3.19.1/build/ol.js"></script> <style> a.skiplink { position: absolute; clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; } a.skiplink:focus { clip: auto; height: auto; width: auto; background-color: #fff; padding: 0.3em; } #map:focus { outline: #4A74A8 solid 0.15em; } </style> </head> <body> <a class="skiplink" href="#map">Go to map</a> <div id="map" class="map" tabindex="0"></div> <button id="zoom-out">Zoom out</button> <button id="zoom-in">Zoom in</button> <script> var _map; function lu_LngLat(lng, lat) { //如果有座標偏移,你可以在這做 var lnglat = { "lng": lng, "lat": lat }; //經緯度座標轉換到高斯座標 return ol.proj.fromLonLat([lnglat.lng, lnglat.lat]); } //------------------------------// /** * 軌跡回放 * @constructor */ function lu_LocusOption(data) { this.locusData = { locusId: null, label: null, icon: "http://webapi.amap.com/images/car.png", lnglat: [], lineType: "solid", lineWidth: 3, nodeIcon: null, lineOpacity: 0.6, lineColor: "#0000ff" } this.locusState = { moveSpeed: 100, isSetView: true, syncEvent: null, circlable: false, overlayEvent: null } if (data) { if (data.locusData) { if (data.locusData.locusId) this.locusData.locusId = data.locusData.locusId; if (data.locusData.icon) this.locusData.icon = data.locusData.icon; if (data.locusData.label) this.locusData.label = data.locusData.label; if (data.locusData.lnglat) this.locusData.lnglat = data.locusData.lnglat; if (data.locusData.lineType) this.locusData.lineType = data.locusData.lineType; if (data.locusData.nodeIcon) this.locusData.nodeIcon = data.locusData.nodeIcon; if (data.locusData.lineWidth) this.locusData.lineWidth = data.locusData.lineWidth; if (data.locusData.lineColor) this.locusData.lineColor = data.locusData.locusData.lineColor; if (data.locusState) { if (data.locusState.moveSpeed) this.locusState.moveSpeed = data.locusState.moveSpeed; if (data.locusState.isSetView != undefined) this.locusState.isSetView = data.locusState.isSetView; if (data.locusState.syncEvent) this.locusState.syncEvent = data.locusState.syncEvent; if (data.locusState.circlable != undefined) this.locusState.circlable = data.locusState.circlable; if (data.locusState.overlayEvent) this.locusState.overlayEvent = data.locusState.overlayEvent; } } } } var _lu_locus; var lu_MoveLocus = function(LocusOption, isfor) { if (_lu_locus) { _lu_locus.stop(); } try { var _locusState = LocusOption.locusState; var _locusData = LocusOption.locusData; if (_locusState.isClearOverlay) { //清空 } lu_DrawLinesAndMarkers(_locusData, _locusState); //開啟路書 _lu_locus = new TYMapLib.lu_track(_map, _locusData.lnglat, { defaultContent: _locusData.label, autoView: _locusState.isSetView, //是否開啟自動視野調整,如果開啟那麼路書在運動過程中會根據視野自動調整 speed: _locusState.moveSpeed, enableRotation: true, //是否設定marker隨著道路的走向進行旋轉 circlable: _locusState.circlable }); } catch (e) { console.log(e.message); } } function lu_DrawLinesAndMarkers(locusData, _locusState) { if (locusData) { if (locusData.nodeIcon) image = locusData.nodeIcon; if (locusData.label) text = locusData.label.content; if (locusData.label) offset = locusData.label.offset; } var styles = { 'route': new ol.style.Style({ stroke: new ol.style.Stroke({ width: 2, color: [237, 212, 0, 0.8] }) }), 'node': new ol.style.Style({ image: new ol.style.Circle({ radius: 5, stroke: new ol.style.Stroke({ color: "#ffffff", width: 2 }), fill: new ol.style.Fill({ color: "#000000" }) }) }), 'icon1': new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 1], src: image }), text: new ol.style.Text({ font: "13px Microsoft Yahei", text: "起點", fill: new ol.style.Fill({ color: "#aa3300" }), stroke: new ol.style.Stroke({ color: "#fff", width: 2 }), textAlign: "left" }) }), 'icon2': new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 1], src: image }), text: new ol.style.Text({ font: "13px Microsoft Yahei", text: "終點", fill: new ol.style.Fill({ color: "#aa3300" }), stroke: new ol.style.Stroke({ color: "#fff", width: 2 }), textAlign: "left" }) }), 'geoMarker': new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 0.5], rotation: 0, size: [52, 26], src: 'http://webapi.amap.com/images/car.png' }), text: new ol.style.Text({ font: "13px Microsoft Yahei", text: text, fill: new ol.style.Fill({ color: "#aa3300" }), stroke: new ol.style.Stroke({ color: "#fff", width: 2 }), offsetX: offset[0], offsetY: offset[1], textAlign: "left" }) }) }; var locussff = [], star, stop; var style = new ol.style.Style({ stroke: new ol.style.Stroke({ width: 5, color: [237, 212, 0, 0.8] }) }); var lineFeature = new ol.Feature(new ol.geom.LineString(locusData.lnglat)); lineFeature.setId(locusData.locusId); lineFeature.setStyle(style); locussff.push(lineFeature); //節點列印 var arrLngLat = locusData.lnglat; var arrX = [], arrY = []; for (var i in arrLngLat) { //console.log(i) if (i > 0 && i < arrLngLat.length - 1) { var nodeMarker = new ol.Feature({ type: 'node', geometry: new ol.geom.Point(locusData.lnglat[i]) }); locussff.push(nodeMarker); } else { if (i == 0) { var starMarker = new ol.Feature({ type: 'node', geometry: new ol.geom.Point(arrLngLat[i]) }); locussff.push(starMarker); } else if (i == arrLngLat.length - 1) { var startMarker = new ol.Feature({ type: 'node', geometry: new ol.geom.Point(arrLngLat[i]) }); locussff.push(startMarker); } } arrX.push(arrLngLat[i][0]); arrY.push(arrLngLat[i][1]); } var routeCoords = arrLngLat; var routeLength = arrLngLat.length; var vectorLayer = new ol.layer.Vector({ zIndex: 50000, source: new ol.source.Vector({ features: locussff }), style: function(feature) { // hide geoMarker if animation is active if (feature.get('type') === 'geoMarker') return null; return styles[feature.get('type')]; } }); _map.addLayer(vectorLayer); //標題 var mp2 = document.createElement("div"); mp2.id = "mycar_title"; mp2.innerHTML = text; var title = new ol.Overlay({ id: "_ty_lj_key_title", //autoPan: true, position: [arrX[0][0], arrY[0][1]], stopEvent: false, offset: offset, positioning: "bottom-left", element: mp2 }); _map.addOverlay(title); //視野 _lu_box(arrX, arrY); /** * 獲取最好視野 * @param __boxX * @param __boxY * @author luwenjun 2016-9-22 * @returns */ function _lu_box(__boxX, __boxY) { try { var sort1 = [__boxX.sort()[0], __boxX.sort()[__boxX.sort().length - 1]]; var sort2 = [__boxY.sort()[0], __boxY.sort()[__boxY.sort().length - 1]]; _map.getView().fit([sort1[0], sort2[0], sort1[1], sort2[1]], _map.getSize()); } catch (e) { console.log(e.message); } } //新增事件 if (_locusState.overlayEvent) { var keys__ = _map.on(_locusState.overlayEvent.mouseEvent, function(evt) { var feature = _map.forEachFeatureAtPixel(evt.pixel, function(feature) { return feature; }); if (feature) { var mkNew = new Object(); var coord = feature.getGeometry().getCoordinates(); var newcoord = new GPSLngLat(coord[0], coord[1]); mkNew.lng = newcoord.GPSLng; mkNew.lat = newcoord.GPSLat; _locusState.overlayEvent.mouseFunc(mkNew); } }); _ty_point.push(keys__); } } function TYCar(lnglat, config) { var mp = document.createElement("div"); mp.id = "mymovecar"; mp.style.position = "absolute"; var mimg = document.createElement("img"); if (config.icon) mimg.src = config.icon; mp.appendChild(mimg); var TYMarker = new ol.Overlay({ id: "_ty_lj_key_car", stopEvent: false, offset: [-26, -13], positioning: "center-center", element: mp }); TYMarker.setPosition(lnglat); //console.log(config); TYMarker.setRotation = function(a) { if (!isNaN(a)) { if (a <= 360 && a >= 0) { var x = document.getElementById("mymovecar"); x.style.transform = "rotate(" + a + "deg)"; } } } return TYMarker; } /** * @namespace BMap的所有library類均放在TYMapLib名稱空間下 */ var TYMapLib = window.TYMapLib = TYMapLib || {}; (function() { /** * @exports lu_track as TYMapLib.lu_track */ var lu_track = TYMapLib.lu_track = function(map, path, opts) { if (!path || path.length < 1) { return; } this.ismove = false; this._cc = 0; this._map = map; //儲存一條路線 this._path = path; //移動到當前點的索引 this.i = 0; //控制暫停後開始移動的佇列的陣列 this._setTimeoutQuene = []; //進行座標轉換的類 // this._projection = this._map.getMapType().getProjection(); this._opts = { icon: null, //預設速度 米/秒 speed: 400, defaultContent: '' }; this._setOptions(opts); this._rotation = 0; //小車轉動的角度 //如果不是預設例項,則使用預設的icon instanceof BMap.Icon if (!this._opts.icon) { this._opts.icon = "http://webapi.amap.com/images/car.png"; } } /** * 根據使用者輸入的opts,修改預設引數_opts * @param {Json Object} opts 使用者輸入的修改引數. * @return 無返回值. */ lu_track.prototype._setOptions = function(opts) { if (!opts) { return; } for (var p in opts) { if (opts.hasOwnProperty(p)) { this._opts[p] = opts[p]; } } } /** * @description 開始運動 * @param none * @return 無返回值. * * @example <b>參考示例:</b><br /> * lu_track.start(); */ lu_track.prototype.start = function() { this.ismove = true; var me = this, len = me._path.length; //不是第一次點選開始,並且小車還沒到達終點 if (me.i && me.i < len - 1) { //沒按pause再按start不做處理 if (!me._fromPause) { return; } else if (!me._fromStop) { //按了pause按鈕,並且再按start,直接移動到下一點 //並且此過程中,沒有按stop按鈕 //防止先stop,再pause,然後連續不停的start的異常 me._moveNext(++me.i); } } else { //第一次點選開始,或者點了stop之後點開始 me._addMarker(); //等待marker動畫完畢再載入infowindow me._timeoutFlag = setTimeout(function() { //彈出視窗 //me._addInfoWin(); if (me._opts.defaultContent == "") { // me.hideInfoWindow(); } me._moveNext(me.i); }, 400); } //重置狀態 this._fromPause = false; this._fromStop = false; }, /** * 結束運動 * @return 無返回值. * * @example <b>參考示例:</b><br /> * lu_track.stop(); */ lu_track.prototype.stop = function() { this.ismove = false; this.i = 0; this._fromStop = true; clearInterval(this._intervalFlag); this._clearTimeout(); //重置landmark裡邊的poi為未顯示狀態 /* for (var i = 0, t = this._opts.landmarkPois, len = t.length; i < len; i++) { t[i].bShow = false; }*/ }; /** * 暫停運動 * @return 無返回值. */ lu_track.prototype.pause = function() { clearInterval(this._intervalFlag); //標識是否是按過pause按鈕 this._fromPause = true; this._clearTimeout(); }; /** * 隱藏上方overlay * @return 無返回值. * * @example <b>參考示例:</b><br /> * lu_track.hideInfoWindow(); */ lu_track.prototype.hideInfoWindow = function() { this._overlay._div.style.visibility = 'hidden'; }; /** * 顯示上方overlay * @return 無返回值. * * @example <b>參考示例:</b><br /> * lu_track.showInfoWindow(); */ lu_track.prototype.showInfoWindow = function() { this._overlay._div.style.visibility = 'visible'; }; //lu_track私有方法 /** * 新增marker到地圖上 * @param {Function} 回撥函式. * @return 無返回值. */ lu_track.prototype._addMarker = function(callback) { if (this._marker) { this.stop(); this._marker.setMap(null); clearTimeout(this._timeoutFlag); } //移除之前的overlay this._overlay && this._overlay.setMap(null); var marker = new TYCar(this._path[0], this._opts); //this._opts.icon && marker.setIcon(this._opts.icon); // this._opts.icon && marker.setIcon(this._opts.icon); _map.addOverlay(marker); //if (this._opts.defaultContent && this._opts.defaultContent != "") this._marker = marker; // var adiv = this._marker.getIcon().containerDiv; //adiv.innerHTML = adiv.innerHTML + "<br/>" + this._opts.defaultContent; }, /** * 新增上方overlay * @return 無返回值. 暫時無用 */ lu_track.prototype._addInfoWin = function() { var me = this; //if(me._opts.defaultContent!== ""){ var overlay = new CustomOverlay(me._marker.getLngLat(), me._opts.defaultContent); //將當前類的引用傳給overlay。 overlay.setRelatedClass(this); this._overlay = overlay; this._map.TYaddOverLay(overlay); //} }, /** * 計算兩點間的距離 * @param {Point} poi 經緯度座標A點. * @param {Point} poi 經緯度座標B點. * @return 無返回值. */ lu_track.prototype._getDistance = function(pxA, pxB) { return formatLength([pxA, pxB]) }, //目標點的 當前的步長,position,總的步長,動畫效果,回撥 /** * 移動小車 * @param {Number} poi 當前的步長. * @param {Point} initPos 經緯度座標初始點. * @param {Point} targetPos 經緯度座標目標點. * @param {Function} effect 緩動效果. * @return 無返回值. */ lu_track.prototype._move = function(initPos, targetPos, effect, currentCount) { var me = this; me.ismove = true; //當前的幀數 if (!currentCount) currentCount = 0; //步長,米/秒 var timer = 10, step = this._opts.speed / (1000 / timer), //初始座標 init_pos = this._map.getPixelFromCoordinate(initPos), //獲取結束點的(x,y)座標 target_pos = this._map.getPixelFromCoordinate(targetPos), //總的步長 count = Math.round(me._getDistance(init_pos, target_pos) / step); //如果小於1直接移動到下一點 if (count < 1) { me._moveNext(++me.i); return; } //兩點之間勻速移動 setInterval me._intervalFlag = setInterval(function() { //兩點之間當前幀數大於總幀數的時候,則說明已經完成移動 if (currentCount >= count) { clearInterval(me._intervalFlag); //移動的點已經超過總的長度 if (me.i > me._path.length) { return; } //執行下一個點 me._moveNext(++me.i); } else { currentCount++; me._cc = currentCount; var x = effect(init_pos[0], target_pos[0], currentCount, count), y = effect(init_pos[1], target_pos[1], currentCount, count), pos = me._map.getCoordinateFromPixel([x, y]); //console.log(pos); //設定marker if (currentCount == 1) { var proPos = null; if (me.i - 1 >= 0) { proPos = me._path[me.i - 1]; } if (me._opts.enableRotation == true) { me.setRotation(proPos, initPos, targetPos); } if (me._opts.autoView) { } } var extent = _map.getView().calculateExtent(_map.getSize()); var bl = ol.extent.getBottomLeft(extent); var tr = ol.extent.getTopRight(extent); var bb = ol.extent.containsCoordinate([bl[0], bl[1], tr[0], tr[1]], pos); //移動中的label var overs = _map.getOverlayById("_ty_lj_key_title"); overs.setPosition(pos); if (!bb) { if (me._opts.autoView) { clearInterval(me._intervalFlag); _map.getView().setCenter(pos); me._move(initPos, targetPos, me._tween.linear); } else { me._marker.setPosition(pos); } } else { me._marker.setPosition(pos); } } }, timer); }, /** *在每個點的真實步驟中設定小車轉動的角度 */ lu_track.prototype.setRotation = function(prePos, curPos, targetPos) { //console.log(prePos);console.log(curPos); var me = this; curPos = me._map.getPixelFromCoordinate(curPos); targetPos = me._map.getPixelFromCoordinate(targetPos); curPos = { x: curPos[0], y: curPos[1] }; targetPos = { x: targetPos[0], y: targetPos[1] } var x = Math.abs(targetPos.x - curPos.x); var y = Math.abs(targetPos.y - curPos.y); var z = Math.sqrt(x * x + y * y); var ration = Math.round((Math.asin(y / z) / Math.PI * 180)); var a = 0; if (targetPos.y < curPos.y && targetPos.x == curPos.x) { a = 270; // (180 - ration); } else if (targetPos.y > curPos.y && targetPos.x == curPos.x) a = 90///ration; else if (targetPos.y == curPos.y && targetPos.x < curPos.x) a = 180//(180 - ration); else if (targetPos.y == curPos.y && targetPos.x > curPos.x) a = 0//ration; else if (targetPos.y > curPos.y && targetPos.x > curPos.x) a = ration; else if (targetPos.y > curPos.y && targetPos.x < curPos.x) a = 180 - ration; else if (targetPos.y < curPos.y && targetPos.x < curPos.x) a = 180 + ration; else if (targetPos.y < curPos.y && targetPos.x > curPos.x) a = 360 - ration; this._marker.setRotation(a); //console.log(a) return; }, lu_track.prototype.linePixellength = function(from, to) { return Math.sqrt(Math.abs(from.x - to.x) * Math.abs(from.x - to.x) + Math.abs(from.y - to.y) * Math.abs(from.y - to.y)); }, lu_track.prototype.pointToPoint = function(from, to) { return Math.abs(from.x - to.x) * Math.abs(from.x - to.x) + Math.abs(from.y - to.y) * Math.abs(from.y - to.y) }, /** * 移動到下一個點 * @param {Number} index 當前點的索引. * @return 無返回值. */ lu_track.prototype._moveNext = function(index) { this.ismove = true; if (this._opts.func && this._opts.func != "") _opts.func(index); var me = this; if (index == me._path.length - 1 && me._opts.circlable) { index = 0; me.i = 0; } if (index < this._path.length - 1) { //判斷是否需要螢幕暫停,移動中心 var ifXYZ1 = me._path[index]; var ifXYZ2 = me._path[index + 1]; var extent = _map.getView().calculateExtent(_map.getSize()); var bl = ol.extent.getBottomLeft(extent); var tr = ol.extent.getTopRight(extent); tr = [_map.getPixelFromCoordinate(tr)[0] - 30, _map.getPixelFromCoordinate(tr)[1] + 30]; bl = [_map.getPixelFromCoordinate(bl)[0] + 30, _map.getPixelFromCoordinate(tr)[1] - 30]; tr = _map.getCoordinateFromPixel(tr); bl = _map.getCoordinateFromPixel(bl); var extentA = ol.extent.containsCoordinate([bl[0], bl[1], tr[0], tr[1]], ifXYZ1); var extentB = ol.extent.containsCoordinate([bl[0], bl[1], tr[0], tr[1]], ifXYZ2); //console.log(extentA, extentB); if (extentA == false || extentB == false) { if (me._opts.autoView) { clearInterval(_lu_locus._intervalFlag); var centerA = (ifXYZ2[0] - ifXYZ1[0]) / 2 + ifXYZ2[0]; var centerB = (ifXYZ2[1] - ifXYZ1[1]) / 2 + ifXYZ2[1]; if (extentA == false && extentB == false) { _map.getView().setCenter([centerA, centerB]); } else if (extentA == false) { _map.getView().setCenter(ifXYZ1); } else if (extentB == false) { _map.getView().setCenter(ifXYZ2); } else { console.log("#1005853"); return; } setTimeout(function() { me._move(me._path[index], me._path[index + 1], me._tween.linear); }, 100); } else { me._move(me._path[index], me._path[index + 1], me._tween.linear); } } else { me._move(me._path[index], me._path[index + 1], me._tween.linear); } } }, /** * 設定小車上方infowindow的內容,位置等 * @param {Point} pos 經緯度座標點. * @return 無返回值. */ lu_track.prototype._setInfoWin = function(pos) { //設定上方overlay的position var me = this; if (!me._overlay) { return; } me._overlay.setPosition(pos, me._marker.getIcon().size); var index = me._troughPointIndex(pos); if (index != -1) { clearInterval(me._intervalFlag); // me._overlay.setHtml(me._opts.landmarkPois[index].html); me._overlay.setPosition(pos, me._marker.getIcon().getSize()); me._pauseForView(index); } else { me._overlay.setHtml(me._opts.defaultContent); } }, /** * 在某個點暫停的時間 * @param {Number} index 點的索引. * @return 無返回值. */ lu_track.prototype._pauseForView = function(index) { var me = this; var t = setTimeout(function() { //執行下一個點 me._moveNext(++me.i); }, me._opts.landmarkPois[index].pauseTime * 1000); me._setTimeoutQuene.push(t); }, //清除暫停後再開始執行的timeout lu_track.prototype._clearTimeout = function() { for (var i in this._setTimeoutQuene) { clearTimeout(this._setTimeoutQuene[i]); } this._setTimeoutQuene.length = 0; }, //緩動效果 lu_track.prototype._tween = { //初始座標,目標座標,當前的步長,總的步長 linear: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; return c * t / d + b; } }, /** * 否經過某個點的index * @param {Point} markerPoi 當前小車的座標點. * @return 無返回值. */ lu_track.prototype._troughPointIndex = function(markerPoi) { var t = this._opts.landmarkPois, distance; for (var i = 0, len = t.length; i < len; i++) { //landmarkPois中的點沒有出現過的話 if (!t[i].bShow) { distance = markerPoi.distance(new AMap.LngLat(t[i].lng, t[i].lat)); //兩點距離小於10米,認為是同一個點 if (distance < 10) { t[i].bShow = true; return i; } } } return -1; } })(); function LocusStart() { if (_lu_locus) _lu_locus.start(); } function LocusStop() { if (_lu_locus) _lu_locus.stop() } function LocusPause() { if (_lu_locus) _lu_locus.pause() } /** * 求多點間距離 * @param hex * @param opacity * @author luwenjun 2016-9-22 * @returns */ var formatLength = function(coordinates) { var wgs84Sphere = new ol.Sphere(6378137), length = 0; var sourceProj = _map.getView().getProjection(); for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) { var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326'); var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326'); length += wgs84Sphere.haversineDistance(c1, c2); } return length; }; _map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], target: 'map', controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */({ collapsible: false }) }), view: new ol.View({ center: [0, 0], zoom: 2 }) }); //軌跡回放 //------軌跡回放------// var lineArr = new Array(); var lngX = 116.397428, latY = 39.90923; //陣列中新增座標 lineArr.push(new lu_LngLat(lngX, latY)); //隨機生成座標點 for (var i = 1; i < 10; i++) { lngX = lngX + Math.random() * 0.1; if (i % 2) { latY = latY + Math.random() * 0.1; } else { latY = latY + Math.random() * 0.6; } lineArr.push(new lu_LngLat(lngX, latY)); } //建立入參方法 var p = new lu_LocusOption({ locusData: { locusId: 1, //路徑點id nodeIcon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", //路徑點圖示 label: new Object({//加入label物件 offset: [15, 0], //修改label相對於maker的位置 偏移 content: "軌跡回放 " //顯示內容,也可以為html }), lnglat: lineArr//路徑點陣列 }, locusState: { circlable: true//是否迴圈播放,false只做一次 } }) lu_MoveLocus(p); //執行建構函式,接收返回引數lu_MoveLocus LocusStart(); //開始動畫 //LocusStop();//停止動畫 //LocusPause();//暫停動畫,呼叫LocusStart()方法繼續 function setvalue1(e) { alert("點選成功,觸發了回撥函式") } </script> </body> </html>
可以的話給個贊吧
最近使用了下OL3 感覺還是蠻吊,希望共同進步