|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484 |
-
-
-
- var CarOverlay = T.Overlay.extend({
- initialize: function (lnglat, options) {
- this.lnglat = lnglat;
- this.setOptions(options);
- this.options = options;
- },
-
- onAdd: function (map) {
- this.map = map;
- var div = this.div = document.createElement("div");
- var img = this.img = document.createElement("img");
- div.style.position = "absolute";
- div.style.width = this.options.width + "px";
- div.style.height = this.options.height + "px";
- div.style.marginLeft = -this.options.width / 2 + 'px';
- div.style.marginTop = -this.options.height / 2 + 'px';
- div.style.zIndex = 200;
- img.style.width = this.options.width + "px";
- img.style.height = this.options.height + "px";
- img.src = this.options.iconUrl;
- div.appendChild(img);
- map.getPanes().overlayPane.appendChild(this.div);
- this.update(this.lnglat);
- },
-
- onRemove: function () {
- var parent = this.div.parentNode;
- if (parent) {
- parent.removeChild(this.div);
- this.map = null;
- this.div = null;
- }
- },
-
-
-
- CSS_TRANSFORM: function () {
- var div = document.createElement('div');
- var props = [
- 'transform',
- 'WebkitTransform',
- 'MozTransform',
- 'OTransform',
- 'msTransform'
- ];
-
- for (var i = 0; i < props.length; i++) {
- var prop = props[i];
- if (div.style[prop] !== undefined) {
- return prop;
- }
- }
- return props[0];
- },
-
-
-
- setRotate: function (rotate) {
- this.img.style[this.CSS_TRANSFORM()] = "rotate(" +
- rotate + "deg)";
- },
-
- setLnglat: function (lnglat) {
- this.lnglat = lnglat;
- this.update();
- },
- getLnglat: function () {
- return this.lnglat;
- },
- setPos: function (pos) {
- this.lnglat = this.map.layerPointToLngLat(pos)
- this.update();
- },
-
-
- update: function () {
- var pos = this.map.lngLatToLayerPoint(this.lnglat);
- this.div.style.left = pos.x + "px";
- this.div.style.top = pos.y + "px";
- }
-
-
- })
-
- T.CarTrack = function (map, opt) {
- this.map = map;
-
-
-
-
-
-
-
- this.options.polylinestyle = this.setOptions(this.options.polylinestyle, opt.polylinestyle)
- this.options.carstyle = this.setOptions(this.options.carstyle, opt.carstyle)
- this.options = this.setOptions(this.options, opt)
- this.init();
-
- }
-
- T.CarTrack.prototype = {
-
- options: {
-
- interval: 1000,
- carstyle: {
- display: true,
- iconUrl: "http://lbs.tianditu.gov.cn/images/openlibrary/car.png",
- width: 52,
- height: 26
- },
- polylinestyle: {
- display: true,
- color: "red",
- width: "3",
- opacity: 0.8,
- lineStyle: ""
- }
- },
-
-
- init: function () {
- var datas = this.options.Datas;
- this.options = this._deepCopy(this.options);
- this.options.uid=new Date().getTime();
- this.options.Datas = datas;
- if (this.options.speed > 0) {
- var dis = this.distance(this.options.Datas);
- this.options.nodeslength = dis / this.options.speed;
- }
- else {
- this.options.nodeslength = this.options.Datas.length;
- }
-
- this.options.Counter = 0;
-
-
-
- this.D3OverLayer = new T.D3Overlay(this.d3init, this.d3redraw, this.options);
- this.D3OverLayer.lineDatas = [];
-
- this.D3OverLayer.dataToLnglat = this.dataToLnglat;
- this.D3OverLayer.applyLatLngToLayer = this.applyLatLngToLayer;
-
-
- this.receiveData(this.map);
-
-
- },
-
- setOptions: function (obj, options) {
- for (var i in options) {
- if (i != "polylinestyle" && i != "carstyle")
- obj[i] = options[i];
- }
- return obj;
- },
-
-
- clear: function () {
- this.state = 4;
- this._Remove();
- delete this;
- },
-
- _Remove: function () {
- this._pause();
- delete this._timer;
- this._timer = null;
- this.map.removeOverLay(this.carMarker);
- this.map.removeOverLay(this.D3OverLayer);
- },
-
-
- receiveData: function () {
- var opt = this.options;
- var me = this;
-
- if (opt.Datas instanceof Array && opt.Datas.length > 0) {
-
- me.map.addOverLay(me.D3OverLayer)
-
- me.carMarker = new CarOverlay(me.dataToLnglat(this.options.Datas[0]), me.options.carstyle);
- if (!this.options.carstyle)
- me.carMarker.hide();
- me.map.addOverLay(this.carMarker);
-
- me.D3OverLayer.bringToBack();
- }
-
- },
-
-
- dataToLnglat: function (obj) {
- if (obj instanceof T.LngLat || ('lat' in obj && 'lng' in obj))
- return obj;
- else {
- var coordinates = obj.geometry.coordinates;
- var lnlat = new T.LngLat(coordinates[0], coordinates[1]);
- return lnlat;
- }
-
-
- },
-
- bind: function (fn, obj) {
- var slice = Array.prototype.slice;
- if (fn.bind) {
- return fn.bind.apply(fn, slice.call(arguments, 1));
- }
- },
-
-
-
-
- applyLatLngToLayer: function (d) {
-
- return this.map.lngLatToLayerPoint(this.dataToLnglat(d));
- },
-
- d3init: function (sel, transform) {
-
- sel.append("path")
- .attr("id", "polyline" + this.options.uid)
- .attr("fill", "none")
- .attr("stroke", this.options.polylinestyle.color)
- .attr("width", this.options.polylinestyle.width)
- .attr('opacity', this.options.polylinestyle.opacity)
- .attr('display', this.options.polylinestyle.display ? "block" : "none")
-
- sel.append("path")
- .attr("id", "dynamicLine" + this.options.uid)
- .attr("fill", "none")
- .attr("stroke", this.options.polylinestyle.color)
- .attr("width", this.options.polylinestyle.width)
- .attr('opacity', this.options.polylinestyle.opacity)
- .attr('display', this.options.dynamicLine && this.options.polylinestyle.display ? "block" : "none")
-
- },
-
-
- d3redraw: function () {
-
- function pointsToPath(rings, closed) {
- var str = '',
- i, j, len, len2, points, p;
-
- for (i = 0, len = rings.length; i < len; i++) {
- points = rings[i];
-
- for (j = 0, len2 = points.length; j < len2; j++) {
- p = points[j];
- str += (j ? 'L' : 'M') + p.x + ' ' + p.y;
- }
-
-
- str += closed ? (L.Browser.svg ? 'z' : 'x') : '';
- }
-
-
- return str || 'M0 0';
- }
-
- function lnglatsTopoints(map, lnglats) {
- var pts = [];
- for (var k = 0; k < lnglats.length; k++) {
- pts.push(map.lngLatToLayerPoint(lnglats[k]))
- }
- return pts;
- }
- var datasStr1 = pointsToPath([lnglatsTopoints(this.map, this.options.Datas)], false);
- var lineDatas = this.lineDatas ? this.lineDatas : this.D3OverLayer.lineDatas;
- var datasStr2 = pointsToPath([lnglatsTopoints(this.map, lineDatas)], false);
-
- d3.select("path#polyline" + this.options.uid).attr("d", datasStr1)
- .attr("stroke-width", this.options.polylinestyle.width + "px");
-
- d3.select("path#dynamicLine" + this.options.uid).attr("d", datasStr2)
- .attr("stroke-width", this.options.polylinestyle.width + "px");
-
-
- },
-
-
-
-
- update: function () {
-
- this.options.Counter++
- var linePath = d3.select('path#polyline' + this.options.uid)
- .attr('display', this.options.polylinestyle.display && !this.options.dynamicLine ?
- "block" : "none")
-
- var nodeslength = (this.options.speed > 0 ?
- Math.ceil(this.options.nodeslength) + 1 :
- Math.ceil(this.options.nodeslength)
- )
-
- if (this.options.speed > 0) {
-
- var l = linePath.node().getTotalLength();
- var s = (this.options.Counter - 1 ) / this.options.nodeslength
- var l1 = s * l;
- var p1 = linePath.node().getPointAtLength(l1);
- this.D3OverLayer.lineDatas = [];
- if (this.options.Datas[0])
- this.D3OverLayer.lineDatas.push(this.options.Datas[0]);
- var lsum = 0;
-
- for (var k = 0; k < this.options.Datas.length - 1; k++) {
- var p2 = this.map.lngLatToLayerPoint(this.options.Datas[k]);
- var p3 = this.map.lngLatToLayerPoint(this.options.Datas[k + 1]);
- var l2 = p2.distanceTo(p3);
- lsum = lsum + l2;
- if (l1 > lsum)
- this.D3OverLayer.lineDatas.push(this.options.Datas[k + 1]);
- else {
- break;
- }
- }
- if (this.options.Counter < nodeslength) {
- var lnglat = this.map.layerPointToLngLat(p1)
- this.D3OverLayer.lineDatas.push(lnglat);
- }
-
- }
- else {
- this.D3OverLayer.lineDatas = this.options.Datas.slice(0, this.options.Counter);
- }
-
- this.carMarker.setLnglat(this.D3OverLayer.lineDatas[this.D3OverLayer.lineDatas.length - 1]);
-
- if (this.options.Counter > 1) {
- var rotate = this.angle(
- this.D3OverLayer.lineDatas[this.D3OverLayer.lineDatas.length - 2],
- this.D3OverLayer.lineDatas[this.D3OverLayer.lineDatas.length - 1]);
- this.carMarker.setRotate(rotate)
- }
- else {
- this.carMarker.setRotate(0)
- }
- if (this.options.dynamicLine) this.d3redraw();
-
-
-
- if (this.options.passOneNode) this.options.passOneNode(
- this.carMarker.getLnglat(),
- this.options.Counter,
- nodeslength
- )
- if (this.options.Counter >= nodeslength) {
- this.options.Counter = 0;
- }
- },
-
-
-
-
- distance: function () {
- var d = 0;
- var datas = this.options.Datas;
- var l = datas.length;
- for (var i = 0; i < l - 1; i++) {
- var p1 = this.dataToLnglat(datas[i]);
- var p2 = this.dataToLnglat(datas[i + 1]);
- d = d + this.map.getDistance(p1, p2);
- }
- return d;
- },
-
-
-
-
- angle: function (curPos, targetPos) {
- var deg = 0;
- if (targetPos.lng != curPos.lng) {
- var tan = (targetPos.lat - curPos.lat) / (targetPos.lng - curPos.lng),
- atan = Math.atan(tan);
- deg = -atan * 360 / (2 * Math.PI);
- if (targetPos.lng < curPos.lng) {
- deg = -deg + 90 + 90;
-
- } else {
- deg = -deg;
- }
- return -deg;
- } else {
- var disy = targetPos.lat - curPos.lat;
- var bias = 0;
- if (disy > 0)
- bias = -1
- else
- bias = 1
- return (-bias * 90);
- }
- return;
-
- },
-
-
-
- start: function () {
- if (this.state == 4)return;
- this.state = 1;
- if (this.D3OverLayer && !this._timer) {
- this._timer = setInterval(this.bind(this.update, this),
- this.options.interval);
- }
- },
-
-
-
- stop: function () {
- if (this.state == 4)return;
- this.state = 2;
- this._pause();
- this._Remove();
- this.init();
-
- },
-
- _pause: function () {
- if (this._timer) {
- clearTimeout(this._timer);
- delete this._timer;
- this._timer = null;
- }
-
- return this;
- },
-
-
- pause: function () {
- if (this.state == 4)return;
- this.state = 3;
- this._pause();
- },
- _deepCopy: function (source) {
- var result = {};
- for (var key in source) {
- result[key] = typeof source[key] === 'object' ? this._deepCopy(source[key]) : source[key];
- }
- return result;
- }
-
-
- }
-
-
-
-
|