// 用于设置线串所在的矢量图层样式的函数
var styleFunction = function(feature,res){
//轨迹线图形
var trackLine= feature.getGeometry();
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#2E8B57',
width: 10
})
})
];
//对segments建立btree索引
let tree= Mapbox.rbush();//路段数
trackLine.forEachSegment(function(start, end) {
var dx = end[0] - start[0];
var dy = end[1] - start[1];
//计算每个segment的方向，即箭头旋转方向
let rotation = Math.atan2(dy, dx);
let geom=new ol.geom.LineString([start,end]);
let extent=geom.getExtent();
var item = {
minX: extent[0],
minY: extent[1],
maxX: extent[2],
maxY: extent[3],
geom: geom,
rotation:rotation
};
tree.insert(item);
});
//轨迹地理长度
let length=trackLine.getLength();
//像素间隔步长
let stpes=40;//像素步长间隔
//将像素步长转实际地理距离步长
let geo_steps=stpes*res;
//箭头总数
let arrowsNum=parseInt(length/geo_steps);
for(let i=1;i1){
let results=treeSearch.filter(function(item){
//箭头点与segment相交，返回结果。该方法实测不是很准，可能是计算中间结果
//保存到小数精度导致查询有点问题
// if(item.geom.intersectsCoordinate(arraw_coor))
// return true;

              //换一种方案，设置一个稍小的容差，消除精度问题  
              let \_tol=1;//消除精度误差的容差  
              if(item.geom.intersectsExtent(\[arraw\_coor\[0\]-\_tol,arraw\_coor\[1\]-\_tol,arraw\_coor\[0\]+\_tol,arraw\_coor\[1\]+\_tol\]))  
                return true;  
            })  
            if(results.length>0)  
              arrow\_rotation=results\[0\].rotation;  
        }  
        styles.push(new ol.style.Style({  
            geometry: new ol.geom.Point(arraw\_coor),  
            image: new ol.style.Icon({  
              src: 'img/jiantou2.png',  
              anchor: \[0.75, 0.5\],  
              rotateWithView: true,  
              rotation: -arrow\_rotation  
            })  
        }));  
    }  
    return styles;  
  }

　　

引入算法库插件代码为：

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Mapbox=e():t.Mapbox=e()}(window,function(){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,i),o.l=!0,o.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)i.d(n,o,function(e){return t[e]}.bind(null,o));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){t.exports=i(3)},function(t,e,i){"use strict";t.exports=o,t.exports.default=o;var n=i(2);function o(t,e){if(!(this instanceof o))return new o(t,e);this._maxEntries=Math.max(4,t||9),this._minEntries=Math.max(2,Math.ceil(.4*this._maxEntries)),e&&this._initFormat(e),this.clear()}function r(t,e,i){if(!i)return e.indexOf(t);for(var n=0;n=t.minX&&e.maxY>=t.minY}function g(t){return{children:t,height:1,leaf:!0,minX:1/0,minY:1/0,maxX:-1/0,maxY:-1/0}}function m(t,e,i,o,r){for(var a,h=[e,i];h.length;)(i=h.pop())-(e=h.pop())<=o||(a=e+Math.ceil((i-e)/o/2)*o,n(t,a,e,i,r),h.push(e,a,a,i))}o.prototype={all:function(){return this._all(this.data,[])},search:function(t){var e=this.data,i=[],n=this.toBBox;if(!x(t,e))return i;for(var o,r,a,h,l=[];e;){for(o=0,r=e.children.length;o=0&&r[e].children.length>this._maxEntries;)this._split(r,e),e--;this._adjustParentBBoxes(o,r,e)},_split:function(t,e){var i=t[e],n=i.children.length,o=this._minEntries;this._chooseSplitAxis(i,o,n);var r=this._chooseSplitIndex(i,o,n),h=g(i.children.splice(r,i.children.length-r));h.height=i.height,h.leaf=i.leaf,a(i,this.toBBox),a(h,this.toBBox),e?t[e-1].children.push(h):this._splitRoot(i,h)},_splitRoot:function(t,e){this.data=g([t,e]),this.data.height=t.height+1,this.data.leaf=!1,a(this.data,this.toBBox)},_chooseSplitIndex:function(t,e,i){var n,o,r,a,l,s,c,p;for(s=c=1/0,n=e;n<=i-e;n++)a=d(o=h(t,0,n,this.toBBox),r=h(t,n,i,this.toBBox)),l=u(o)+u(r),a=e;o--)r=t.children[o],l(c,t.leaf?a(r):r),u+=p(c);return u},_adjustParentBBoxes:function(t,e,i){for(var n=i;n>=0;n--)l(e[n],t)},_condense:function(t){for(var e,i=t.length-1;i>=0;i--)0===t[i].children.length?i>0?(e=t[i-1].children).splice(e.indexOf(t[i]),1):this.clear():a(t[i],this.toBBox)},_initFormat:function(t){var e=["return a"," - b",";"];this.compareMinX=new Function("a","b",e.join(t[0])),this.compareMinY=new Function("a","b",e.join(t[1])),this.toBBox=new Function("a","return {minX: a"+t[0]+", minY: a"+t[1]+", maxX: a"+t[2]+", maxY: a"+t[3]+"};")}}},function(t,e,i){"use strict";function n(t,e,i){var n=t[e];t[e]=t[i],t[i]=n}function o(t,e){return te?1:0}t.exports=function t(e,i,r,a,h){r=r||0;a=a||e.length-1;h=h||o;for(;a>r;){if(a-r>600){var l=a-r+1,s=i-r+1,c=Math.log(l),u=.5*Math.exp(2*c/3),p=.5*Math.sqrt(c*u*(l-u)/l)*(s-l/2<0?-1:1),f=Math.max(r,Math.floor(i-s*u/l+p)),d=Math.min(a,Math.floor(i+(l-s)*u/l+p));t(e,i,f,d,h)}var y=e[i],x=r,g=a;for(n(e,r,i),h(e[a],y)>0&&n(e,r,a);x0;)g--}0===h(e[r],y)?n(e,r,g):n(e,++g,a),g<=i&&(r=g+1),i<=g&&(a=g-1)}}},function(t,e,i){"use strict";i.r(e);var n={};i.r(n),i.d(n,"tk",function(){return at}),i.d(n,"basicStyle",function(){return ht}),i.d(n,"lightStyle",function(){return lt}),i.d(n,"darkStyle",function(){return st}),i.d(n,"emptyStyle",function(){return ct});var o=function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t)};o.DroneParam={MAXSPEED:15,FIRINGTIME:800,LIFE:10,RANGE:.2},o.Images={Plane:"../assets/plane"},o.FileType={png:"IMG",jpg:"IMG",gif:"IMG",mp4:"VIDEO"},o.SpritesUrl="https://alex2wong.github.io/mapbox-plugins/assets/sprite",o.Sprites={"airfield-15":{width:21,height:21,x:0,y:0,pixelRatio:1},"airport-15":{width:21,height:21,x:21,y:0,pixelRatio:1},"alcohol-shop-15":{width:21,height:21,x:0,y:21,pixelRatio:1},"amusement-park-15":{width:21,height:21,x:21,y:21,pixelRatio:1},"aquarium-15":{width:21,height:21,x:42,y:0,pixelRatio:1},"art-gallery-15":{width:21,height:21,x:63,y:0,pixelRatio:1},"attraction-15":{width:21,height:21,x:42,y:21,pixelRatio:1},"bakery-15":{width:21,height:21,x:63,y:21,pixelRatio:1},"bank-15":{width:21,height:21,x:0,y:42,pixelRatio:1},"bar-15":{width:21,height:21,x:21,y:42,pixelRatio:1},"beer-15":{width:21,height:21,x:42,y:42,pixelRatio:1},"bicycle-15":{width:21,height:21,x:63,y:42,pixelRatio:1},"bicycle-share-15":{width:21,height:21,x:0,y:63,pixelRatio:1},"bus-15":{width:21,height:21,x:21,y:63,pixelRatio:1},"cafe-15":{width:21,height:21,x:42,y:63,pixelRatio:1},"campsite-15":{width:21,height:21,x:63,y:63,pixelRatio:1},"car-15":{width:21,height:21,x:84,y:0,pixelRatio:1},"castle-15":{width:21,height:21,x:105,y:0,pixelRatio:1},"cemetery-15":{width:21,height:21,x:126,y:0,pixelRatio:1},"cinema-15":{width:21,height:21,x:147,y:0,pixelRatio:1},"circle-15":{width:21,height:21,x:84,y:21,pixelRatio:1},"circle-stroked-15":{width:21,height:21,x:105,y:21,pixelRatio:1},"clothing-store-15":{width:21,height:21,x:126,y:21,pixelRatio:1},"college-15":{width:21,height:21,x:147,y:21,pixelRatio:1},"dentist-15":{width:21,height:21,x:84,y:42,pixelRatio:1},"doctor-15":{width:21,height:21,x:105,y:42,pixelRatio:1},"dog-park-15":{width:21,height:21,x:126,y:42,pixelRatio:1},"drinking-water-15":{width:21,height:21,x:147,y:42,pixelRatio:1},"embassy-15":{width:21,height:21,x:84,y:63,pixelRatio:1},"entrance-15":{width:21,height:21,x:105,y:63,pixelRatio:1},"fast-food-15":{width:21,height:21,x:126,y:63,pixelRatio:1},"ferry-15":{width:21,height:21,x:147,y:63,pixelRatio:1},"fire-station-15":{width:21,height:21,x:0,y:84,pixelRatio:1},"fuel-15":{width:21,height:21,x:21,y:84,pixelRatio:1},"garden-15":{width:21,height:21,x:42,y:84,pixelRatio:1},"golf-15":{width:21,height:21,x:63,y:84,pixelRatio:1},"grocery-15":{width:21,height:21,x:84,y:84,pixelRatio:1},"harbor-15":{width:21,height:21,x:105,y:84,pixelRatio:1},"heliport-15":{width:21,height:21,x:126,y:84,pixelRatio:1},"hospital-15":{width:21,height:21,x:147,y:84,pixelRatio:1},"ice-cream-15":{width:21,height:21,x:0,y:105,pixelRatio:1},"information-15":{width:21,height:21,x:21,y:105,pixelRatio:1},"laundry-15":{width:21,height:21,x:42,y:105,pixelRatio:1},"library-15":{width:21,height:21,x:63,y:105,pixelRatio:1},"lodging-15":{width:21,height:21,x:84,y:105,pixelRatio:1},"marker-15":{width:21,height:21,x:105,y:105,pixelRatio:1},"monument-15":{width:21,height:21,x:126,y:105,pixelRatio:1},"mountain-15":{width:21,height:21,x:147,y:105,pixelRatio:1},"museum-15":{width:21,height:21,x:0,y:126,pixelRatio:1},"music-15":{width:21,height:21,x:21,y:126,pixelRatio:1},"park-15":{width:21,height:21,x:42,y:126,pixelRatio:1},"pharmacy-15":{width:21,height:21,x:63,y:126,pixelRatio:1},"picnic-site-15":{width:21,height:21,x:84,y:126,pixelRatio:1},"place-of-worship-15":{width:21,height:21,x:105,y:126,pixelRatio:1},"playground-15":{width:21,height:21,x:126,y:126,pixelRatio:1},"police-15":{width:21,height:21,x:147,y:126,pixelRatio:1},"post-15":{width:21,height:21,x:0,y:147,pixelRatio:1},"prison-15":{width:21,height:21,x:21,y:147,pixelRatio:1},"rail-15":{width:21,height:21,x:42,y:147,pixelRatio:1},"rail-light-15":{width:21,height:21,x:63,y:147,pixelRatio:1},"rail-metro-15":{width:21,height:21,x:84,y:147,pixelRatio:1},"religious-christian-15":{width:21,height:21,x:105,y:147,pixelRatio:1},"religious-jewish-15":{width:21,height:21,x:126,y:147,pixelRatio:1},"religious-muslim-15":{width:21,height:21,x:147,y:147,pixelRatio:1},"restaurant-15":{width:21,height:21,x:168,y:0,pixelRatio:1},"rocket-15":{width:21,height:21,x:189,y:0,pixelRatio:1},"school-15":{width:21,height:21,x:210,y:0,pixelRatio:1},"shop-15":{width:21,height:21,x:231,y:0,pixelRatio:1},"stadium-15":{width:21,height:21,x:252,y:0,pixelRatio:1},"star-15":{width:21,height:21,x:273,y:0,pixelRatio:1},"suitcase-15":{width:21,height:21,x:294,y:0,pixelRatio:1},"swimming-15":{width:21,height:21,x:315,y:0,pixelRatio:1},"theatre-15":{width:21,height:21,x:168,y:21,pixelRatio:1},"toilet-15":{width:21,height:21,x:189,y:21,pixelRatio:1},"town-hall-15":{width:21,height:21,x:210,y:21,pixelRatio:1},"triangle-15":{width:21,height:21,x:231,y:21,pixelRatio:1},"triangle-stroked-15":{width:21,height:21,x:252,y:21,pixelRatio:1},"veterinary-15":{width:21,height:21,x:273,y:21,pixelRatio:1},"volcano-15":{width:21,height:21,x:294,y:21,pixelRatio:1},"zoo-15":{width:21,height:21,x:315,y:21,pixelRatio:1},"airfield-11":{width:17,height:17,x:168,y:42,pixelRatio:1},"airport-11":{width:17,height:17,x:185,y:42,pixelRatio:1},"alcohol-shop-11":{width:17,height:17,x:202,y:42,pixelRatio:1},"amusement-park-11":{width:17,height:17,x:219,y:42,pixelRatio:1},"aquarium-11":{width:17,height:17,x:236,y:42,pixelRatio:1},"art-gallery-11":{width:17,height:17,x:253,y:42,pixelRatio:1},"attraction-11":{width:17,height:17,x:270,y:42,pixelRatio:1},"bakery-11":{width:17,height:17,x:287,y:42,pixelRatio:1},"bank-11":{width:17,height:17,x:304,y:42,pixelRatio:1},"bar-11":{width:17,height:17,x:168,y:63,pixelRatio:1},"beer-11":{width:17,height:17,x:185,y:63,pixelRatio:1},"bicycle-11":{width:17,height:17,x:202,y:63,pixelRatio:1},"bicycle-share-11":{width:17,height:17,x:219,y:63,pixelRatio:1},"bus-11":{width:17,height:17,x:236,y:63,pixelRatio:1},"cafe-11":{width:17,height:17,x:253,y:63,pixelRatio:1},"campsite-11":{width:17,height:17,x:270,y:63,pixelRatio:1},"car-11":{width:17,height:17,x:287,y:63,pixelRatio:1},"castle-11":{width:17,height:17,x:304,y:63,pixelRatio:1},"cemetery-11":{width:17,height:17,x:168,y:84,pixelRatio:1},"cinema-11":{width:17,height:17,x:185,y:84,pixelRatio:1},"circle-11":{width:17,height:17,x:202,y:84,pixelRatio:1},"circle-stroked-11":{width:17,height:17,x:219,y:84,pixelRatio:1},"clothing-store-11":{width:17,height:17,x:236,y:84,pixelRatio:1},"college-11":{width:17,height:17,x:253,y:84,pixelRatio:1},"dentist-11":{width:17,height:17,x:270,y:84,pixelRatio:1},"doctor-11":{width:17,height:17,x:287,y:84,pixelRatio:1},"dog-park-11":{width:17,height:17,x:304,y:84,pixelRatio:1},"drinking-water-11":{width:17,height:17,x:168,y:105,pixelRatio:1},"embassy-11":{width:17,height:17,x:185,y:105,pixelRatio:1},"entrance-11":{width:17,height:17,x:202,y:105,pixelRatio:1},"fast-food-11":{width:17,height:17,x:219,y:105,pixelRatio:1},"ferry-11":{width:17,height:17,x:236,y:105,pixelRatio:1},"fire-station-11":{width:17,height:17,x:253,y:105,pixelRatio:1},"fuel-11":{width:17,height:17,x:270,y:105,pixelRatio:1},"garden-11":{width:17,height:17,x:287,y:105,pixelRatio:1},"golf-11":{width:17,height:17,x:304,y:105,pixelRatio:1},"grocery-11":{width:17,height:17,x:168,y:126,pixelRatio:1},"harbor-11":{width:17,height:17,x:185,y:126,pixelRatio:1},"heliport-11":{width:17,height:17,x:202,y:126,pixelRatio:1},"hospital-11":{width:17,height:17,x:219,y:126,pixelRatio:1},"ice-cream-11":{width:17,height:17,x:236,y:126,pixelRatio:1},"information-11":{width:17,height:17,x:253,y:126,pixelRatio:1},"laundry-11":{width:17,height:17,x:270,y:126,pixelRatio:1},"library-11":{width:17,height:17,x:287,y:126,pixelRatio:1},"lodging-11":{width:17,height:17,x:304,y:126,pixelRatio:1},"marker-11":{width:17,height:17,x:168,y:147,pixelRatio:1},"monument-11":{width:17,height:17,x:185,y:147,pixelRatio:1},"mountain-11":{width:17,height:17,x:202,y:147,pixelRatio:1},"museum-11":{width:17,height:17,x:219,y:147,pixelRatio:1},"music-11":{width:17,height:17,x:236,y:147,pixelRatio:1},"park-11":{width:17,height:17,x:253,y:147,pixelRatio:1},"pharmacy-11":{width:17,height:17,x:270,y:147,pixelRatio:1},"picnic-site-11":{width:17,height:17,x:287,y:147,pixelRatio:1},"place-of-worship-11":{width:17,height:17,x:304,y:147,pixelRatio:1},"playground-11":{width:17,height:17,x:0,y:168,pixelRatio:1},"police-11":{width:17,height:17,x:17,y:168,pixelRatio:1},"post-11":{width:17,height:17,x:34,y:168,pixelRatio:1},"prison-11":{width:17,height:17,x:51,y:168,pixelRatio:1},"rail-11":{width:17,height:17,x:68,y:168,pixelRatio:1},"rail-light-11":{width:17,height:17,x:85,y:168,pixelRatio:1},"rail-metro-11":{width:17,height:17,x:102,y:168,pixelRatio:1},"religious-christian-11":{width:17,height:17,x:119,y:168,pixelRatio:1},"religious-jewish-11":{width:17,height:17,x:136,y:168,pixelRatio:1},"religious-muslim-11":{width:17,height:17,x:153,y:168,pixelRatio:1},"restaurant-11":{width:17,height:17,x:170,y:168,pixelRatio:1},"rocket-11":{width:17,height:17,x:187,y:168,pixelRatio:1},"school-11":{width:17,height:17,x:204,y:168,pixelRatio:1},"shop-11":{width:17,height:17,x:221,y:168,pixelRatio:1},"stadium-11":{width:17,height:17,x:238,y:168,pixelRatio:1},"star-11":{width:17,height:17,x:255,y:168,pixelRatio:1},"suitcase-11":{width:17,height:17,x:272,y:168,pixelRatio:1},"swimming-11":{width:17,height:17,x:289,y:168,pixelRatio:1},"theatre-11":{width:17,height:17,x:306,y:168,pixelRatio:1},"toilet-11":{width:17,height:17,x:0,y:185,pixelRatio:1},"town-hall-11":{width:17,height:17,x:17,y:185,pixelRatio:1},"triangle-11":{width:17,height:17,x:34,y:185,pixelRatio:1},"triangle-stroked-11":{width:17,height:17,x:51,y:185,pixelRatio:1},"veterinary-11":{width:17,height:17,x:68,y:185,pixelRatio:1},"volcano-11":{width:17,height:17,x:85,y:185,pixelRatio:1},"zoo-11":{width:17,height:17,x:102,y:185,pixelRatio:1},"dot-11":{width:11,height:11,x:323,y:168,pixelRatio:1},"dot-10":{width:10,height:10,x:119,y:185,pixelRatio:1}},o.PK="pk.eyJ1IjoiaHVhbmd5aXhpdSIsImEiOiI2WjVWR1hFIn0.1P90Q-tkbHS38BvnrhTI6w";var r=function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.id,this.direciton=e.direction?e.direction:0,this.spoint={type:"Point",coordinates:[0,0]},this.spoint.coordinates[0]=e.lon,this.spoint.coordinates[1]=e.lat};function a(t){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function h(t,e){for(var i=0;i0?i[n]=this.deepClone(t[n]):Array.isArray(t[n])&&(i[n]=t[n].map(function(t){return"object"!==a(t)?t:e.deepClone(t)}));return i}},{key:"isChanged",value:function(t,e){return JSON.stringify(t)!=JSON.stringify(e)&&(console.warn("chartData changed.."),!0)}},{key:"setIconDiv",value:function(t,e){var i=o.Sprites;if(e&&i[e]){var n=i[e],r=document.createElement("div");r.style.width=n.width+"px",r.style.height=n.height+"px",r.style.overflow="hidden";var a=document.createElement("img");a.src=o.SpritesUrl+".png",a.style.marginLeft="-"+n.x+"px",a.style.marginTop="-"+n.y+"px",r.appendChild(a),t.appendChild(r)}}},{key:"setResource",value:function(t,e){if(e instanceof Array)for(var i=0;i0&&(this.speed-=1)}}]),t}();function u(t){return(u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function p(t,e){for(var i=0;i84||e<-84)&&(t=-t,this.direction+=180,console.warn("latitude out of bbox, turn back..")),this.lon+=Math.sin(this.direction*Math.PI/180)*this.speed*.001,this.lat+=t}},{key:"accelerate",value:function(){this.speed0&&!this.firing){var t=this;setTimeout(function(){t.firing=!1},o.DroneParam.FIRINGTIME),this.firing=!0}else if(!this.firing){for(var e=0;e1&&void 0!==arguments[1]&&arguments[1],n=new function(t){var e=t||{};this.minX=e.minX,this.minY=e.minY,this.maxX=e.maxX,this.maxY=e.maxY}(e),o=n.maxX-n.minX,r=n.maxY-n.minY;i?t.ctx.fillRect(n.minX,n.minY,o,r):t.ctx.strokeRect(n.minX,n.minY,o,r)}},{key:"drawLine",value:function(e,i,n,o){if(e instanceof Array&&e.length>0){t.ctx.strokeStyle="#FF0000",t.ctx.lineWidth=i||2,t.ctx.beginPath(),o&&t.ctx.moveTo(-100,t.height);for(var r=0;r0&&this.data[0]instanceof Array?C.drawLine(this.data,null,null):this.data instanceof Array&&this.data.length>0&&(this.url?C.drawPoint(this.data,20,null,this.url,this.rotate,this.dataName):C.drawPoint(this.data,2,null,null,this.rotate,this.dataName))}},{key:"statMax",value:function(){var t=this;return S(this.data)==Array&&this.data.length>0&&this.data.forEach(function(e){t.maxValueh.width?h.width:h.height;try{i.drawImage(h,0,0,u,u,-Y/2,-Y/2,Y,Y)}catch(t){console.warn("ctx.drawImage.. error.")}i.restore()}else i.arc(c[0],c[1],a,0,2*Math.PI),i.fill();e.keepTrack&&0==e.tracks.length?(e.initTrackCtx(),e.trackCtx.moveTo(c[0],c[1]),e.tracks.push([o,r])):e.trackCtx&&(e.trackCtx.lineTo(c[0],c[1]),e.tracks.push([o,r]),setTimeout(function(){e.trackCtx.stroke(),e.trackCtx.beginPath(),e.trackCtx.moveTo(c[0],c[1])},0)),void 0!==l&&e.labelOn&&i.strokeText(l,c[0],c[1])},r=0;r0&&void 0!==arguments[0]&&arguments[0],arguments.length>1&&void 0!==arguments[1]&&arguments[1];var t=this.map._canvasContainer,e=this.map._canvas,i=document.createElement("canvas");return i.style.position="absolute",i.className="overlay-canvas",i.width=parseInt(e.style.width),i.height=parseInt(e.style.height),t.appendChild(i),i}},{key:"_transformLnglat",value:function(){var t=this;if(Array.isArray(this.data))return console.warn("transformed lnglat data to pix.."),this.data.map(function(e){return t.lnglat2pix(e[0],e[1])})}},{key:"_initTrackCtx",value:function(){this.trackLayer&&(this.trackCtx=this.trackLayer.getContext("2d"),this.movedTo=!1,F(this.trackCtx,this.blurWidth,"rgba(255,255,255,.4"),this.trackCtx.lineWidth=this.lineWidth||3,this.trackCtx.strokeStyle=this.lineColor||"rgba(255,255,20,.6)",this.trackCtx.beginPath())}},{key:"setTracks",value:function(t){if(Array.isArray(t))return this.tracks=t,this}},{key:"getTracks",value:function(){return this.tracks}},{key:"redrawTrack",value:function(){if(this.trackCtx&&this.tracks&&this.tracks.length>0){var t=[0,0];this.trackCtx.clearRect(0,0,this.trackLayer.width,this.trackLayer.height),this.trackCtx.beginPath(),t=this.lnglat2pix(this.tracks[0][0],this.tracks[0][1]),this.trackCtx.moveTo(t[0],t[1]);for(var e=1;e2&&void 0!==arguments[2]?arguments[2]:"rgba(255,255,255,.8)";void 0!==t&&(t.linecap="round",t.shadowBlur=e,t.shadowColor=i,t.strokeStyle="rgba(255,255,255,.9)",t.fillStyle="rgba(255,240,91,.8)")}function D(t,e){for(var i=0;i coords: "+t.lon.toFixed(1)+", "+t.lat.toFixed(1)+"
speed: "+t.speed+"
direction: "+(t.direction%360).toFixed(1)},200)}catch(t){console.error(t)}console.log("dashBoard register success.")}else console.error("dashBoard must bind with a drone instance.")}},{key:"featureList",value:function(t){if(void 0==t||"string"!=typeof t)return console.warn("invalid containerId.."),null}}]),t}();function N(t){return(N="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var W={fps:30,objs:null,get:function(t){return this.objs=t,this},to:function(t,e,i){if(this.lastAniParams=[t,e],void 0!=t&&void 0!=e&&null!=W.objs){var n=function(){var t=!1,e=!1;if(a>=r)if(W.loop){a=0;for(var n=0;n",l.setIconDiv(p,a)):void 0!=c&&void 0!=u?l.isChanged(this.lastData[e],c)&&(l.setChart(p,x,u,2*K),this.lastData[e]=c):p.innerHTML=(i.content||"")+"
",void 0!=u&&$(p),f.className="dom-ele",d.className="dom-ele",f.style.left=r[0]+"px",f.style.top=r[1]-(U-10)+"px",d.style.left=r[0]-Q+"px",d.style.top=r[1]-Q+"px",void 0==this.doms[3*e])p.className="dom-popup ".concat(s),f.className=d.className="dom-ele ".concat(s),console.warn("add ".concat(s," css to dom.")),this.domContainer.appendChild(p),this.domContainer.appendChild(f),this.domContainer.appendChild(d),(y=this.doms).push.apply(y,[p,f,d])}}}}.bind(V(V(i))),i.domOpts=t.doms,t&&t.map&&(i.setMap(t.map),t.map.on("move",i.redraw)),i.doms=[],i.lastData=[],i.redraw(),console.log("Dom overlayer add to Map…"),i}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&J(t,e)}(e,I),function(t,e,i){e&&H(t.prototype,e),i&&H(t,i)}(e,[{key:"_init",value:function(){var t=this.map._canvasContainer,e=this.map._canvas,i=document.createElement("div");return i.style.position="absolute",i.className="overlay-dom",i.style.width=e.style.width,i.style.height="0",t.parentElement.appendChild(i),i}},{key:"setDoms",value:function(t){Array.isArray(t)&&(this.domOpts=t,this.clearDoms(),this.redraw())}},{key:"findDom",value:function(t){for(var e=0;e0&&void 0!==arguments[0]&&arguments[0],arguments.length>1&&arguments[1];if(this.canvas&&(t=this.canvas.getContext("2d")),t instanceof CanvasRenderingContext2D){t.clearRect(0,0,this.canvas.width,this.canvas.height),function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];t.strokeStyle="green",t.setLineDash([]),t.globalAlpha=.95,t.globalCompositeOperation="source-over",e?(console.warn("enabling line shadowBlur"),t.shadowBlur=4,t.shadowColor="#0f0"):t.shadowBlur=0;t.lineCap="round",t.lineJoin="round",t.lineWidth=12}(t);var i=[0,0];if(!Array.isArray(this.data))return;i=this.data.map(function(t){return e.lnglat2pix(t[0],t[1])}),t.beginPath(),t.moveTo(i[0][0],i[0][1]);for(var n=1;n2&&void 0!==arguments[2]?arguments[2]:30,n=arguments.length>3?arguments[3]:void 0,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:.5,r=arguments.length>5?arguments[5]:void 0,a=Math.atan((e[1]-t[1])/(e[0]-t[0]));e[0]-t[0]<0&&(a+=Math.PI);for(var h=[],l=function(t,e){return Math.sqrt(Math.pow(e[1]-t[1],2)+Math.pow(e[0]-t[0],2))}(t,e)/i,s=function(t,e){r&&n&&(n.save(),n.translate(t,e),n.rotate(a),n.drawImage(r,-r.width/2,-r.width/2),n.restore())},c=o;c<=l;c+=1){var u=Math.round(t[0]+c*i*Math.cos(a)),p=Math.round(t[1]+c*i*Math.sin(a));h.push([u,p]),s(u,p)}}(e,i,30,t,n,o)}}l&&(ut=l.debounce(function t(e,i){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],o=.5;o=o<1?o+.01:.5;for(var r=1;r<i.length;r+=1)ft(e,i[r-1],i[r],o);n&&requestAnimationFrame(t)},100)),i.d(e,"rbush",function(){return dt}),i.d(e,"Drone",function(){return x}),i.d(e,"Canvas",function(){return C}),i.d(e,"Chart",function(){return O}),i.d(e,"Util",function(){return l}),i.d(e,"Controllers",function(){return L}),i.d(e,"myTween",function(){return W}),i.d(e,"CanvasOverlayer",function(){return B}),i.d(e,"DomOverlayer",function(){return q}),i.d(e,"WindLayer",function(){return rt}),i.d(e,"Config",function(){return n}),i.d(e,"drawArrowLine",function(){return pt}),i.d(e,"xMarker",function(){return R});var dt=i(1);"undefined"!=typeof mapboxgl&&(mapboxgl.accessToken=at)}])});