Dreamview: draw lane id (#6759)

modules/dreamview/frontend/dist/1.bundle.js

-webpackJsonp([1],{681:function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var l=n(230),a=o(l),i=n(0),r=o(i),s=n(1),u=o(s),c=n(229),p=function(){function e(){(0,r.default)(this,e),this.map=null,this.controls=[]}return(0,u.default)(e,[{key:"isInitialized",value:function(){return null!==this.map}},{key:"loadMap",value:function(e,t){var n={center:e,zoom:20,mapTypeId:google.maps.MapTypeId.ROADMAP,fullscreenControl:!1};this.map=new google.maps.Map(document.getElementById(t),n)}},{key:"setCenter",value:function(e){this.map.setCenter(e)}},{key:"setZoom",value:function(e){this.map.setZoom(e)}},{key:"addEventHandler",value:function(e,t){google.maps.event.addListener(this.map,e,function(e){var n=e.latLng;t(n)})}},{key:"createPoint",value:function(e){var t=e.lat,n=e.lng;return new google.maps.LatLng(t,n)}},{key:"createMarker",value:function(e,t){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];return new google.maps.Marker({position:e,label:t,draggable:n,map:this.map})}},{key:"createPolyline",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:2;return new google.maps.Polyline({path:e,geodesic:!0,strokeColor:t,strokeOpacity:n,strokeWeight:o,map:this.map})}},{key:"createControl",value:function(e){var t=e.text,n=e.tip,o=e.color,l=(e.offsetX,e.offsetY,e.onClickHandler),a=document.createElement("div"),i=document.createElement("div");i.style.backgroundColor=o,i.style.border="2px solid #fff",i.style.borderRadius="3px",i.style.boxShadow="0 2px 6px rgba(0,0,0,.3)",i.style.cursor="pointer",i.style.marginBottom="22px",i.style.textAlign="center",i.title=n,a.appendChild(i);var r=document.createElement("div");r.style.color="rgb(25,25,25)",r.style.fontFamily="Roboto,Arial,sans-serif",r.style.fontSize="16px",r.style.lineHeight="38px",r.style.paddingLeft="5px",r.style.paddingRight="5px",r.innerHTML=t,i.appendChild(r),i.addEventListener("click",function(){l(r)}),this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(a),this.controls.push(a)}},{key:"disableControls",value:function(){this.controls.forEach(function(e){e.style.display="none"})}},{key:"enableControls",value:function(){this.controls.forEach(function(e){e.style.display="block"})}},{key:"getMarkerPosition",value:function(e){var t=e.getPosition();return{lat:t.lat(),lng:t.lng()}}},{key:"updatePolyline",value:function(e,t){e.setPath(t)}},{key:"removePolyline",value:function(e){e.setMap(null)}},{key:"applyCoordinateOffset",value:function(e){var t=(0,a.default)(e,2),n=t[0],o=t[1];return(0,c.WGS84ToGCJ02)(n,o)}}]),e}();t.default=p}});
+webpackJsonp([1],{681:function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var l=n(231),a=o(l),i=n(0),r=o(i),s=n(1),u=o(s),c=n(230),p=function(){function e(){(0,r.default)(this,e),this.map=null,this.controls=[]}return(0,u.default)(e,[{key:"isInitialized",value:function(){return null!==this.map}},{key:"loadMap",value:function(e,t){var n={center:e,zoom:20,mapTypeId:google.maps.MapTypeId.ROADMAP,fullscreenControl:!1};this.map=new google.maps.Map(document.getElementById(t),n)}},{key:"setCenter",value:function(e){this.map.setCenter(e)}},{key:"setZoom",value:function(e){this.map.setZoom(e)}},{key:"addEventHandler",value:function(e,t){google.maps.event.addListener(this.map,e,function(e){var n=e.latLng;t(n)})}},{key:"createPoint",value:function(e){var t=e.lat,n=e.lng;return new google.maps.LatLng(t,n)}},{key:"createMarker",value:function(e,t){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];return new google.maps.Marker({position:e,label:t,draggable:n,map:this.map})}},{key:"createPolyline",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:2;return new google.maps.Polyline({path:e,geodesic:!0,strokeColor:t,strokeOpacity:n,strokeWeight:o,map:this.map})}},{key:"createControl",value:function(e){var t=e.text,n=e.tip,o=e.color,l=(e.offsetX,e.offsetY,e.onClickHandler),a=document.createElement("div"),i=document.createElement("div");i.style.backgroundColor=o,i.style.border="2px solid #fff",i.style.borderRadius="3px",i.style.boxShadow="0 2px 6px rgba(0,0,0,.3)",i.style.cursor="pointer",i.style.marginBottom="22px",i.style.textAlign="center",i.title=n,a.appendChild(i);var r=document.createElement("div");r.style.color="rgb(25,25,25)",r.style.fontFamily="Roboto,Arial,sans-serif",r.style.fontSize="16px",r.style.lineHeight="38px",r.style.paddingLeft="5px",r.style.paddingRight="5px",r.innerHTML=t,i.appendChild(r),i.addEventListener("click",function(){l(r)}),this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(a),this.controls.push(a)}},{key:"disableControls",value:function(){this.controls.forEach(function(e){e.style.display="none"})}},{key:"enableControls",value:function(){this.controls.forEach(function(e){e.style.display="block"})}},{key:"getMarkerPosition",value:function(e){var t=e.getPosition();return{lat:t.lat(),lng:t.lng()}}},{key:"updatePolyline",value:function(e,t){e.setPath(t)}},{key:"removePolyline",value:function(e){e.setMap(null)}},{key:"applyCoordinateOffset",value:function(e){var t=(0,a.default)(e,2),n=t[0],o=t[1];return(0,c.WGS84ToGCJ02)(n,o)}}]),e}();t.default=p}});
 //# sourceMappingURL=1.bundle.js.map
\ No newline at end of file

modules/dreamview/frontend/dist/1.bundle.js.map

-{"version":3,"file":"1.bundle.js","sources":["webpack:///1.bundle.js"],"sourcesContent":["webpackJsonp([1],{681:function(e,t,n){\"use strict\";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,\"__esModule\",{value:!0}),t.default=void 0;var l=n(230),a=o(l),i=n(0),r=o(i),s=n(1),u=o(s),c=n(229),p=function(){function e(){(0,r.default)(this,e),this.map=null,this.controls=[]}return(0,u.default)(e,[{key:\"isInitialized\",value:function(){return null!==this.map}},{key:\"loadMap\",value:function(e,t){var n={center:e,zoom:20,mapTypeId:google.maps.MapTypeId.ROADMAP,fullscreenControl:!1};this.map=new google.maps.Map(document.getElementById(t),n)}},{key:\"setCenter\",value:function(e){this.map.setCenter(e)}},{key:\"setZoom\",value:function(e){this.map.setZoom(e)}},{key:\"addEventHandler\",value:function(e,t){google.maps.event.addListener(this.map,e,function(e){var n=e.latLng;t(n)})}},{key:\"createPoint\",value:function(e){var t=e.lat,n=e.lng;return new google.maps.LatLng(t,n)}},{key:\"createMarker\",value:function(e,t){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];return new google.maps.Marker({position:e,label:t,draggable:n,map:this.map})}},{key:\"createPolyline\",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:2;return new google.maps.Polyline({path:e,geodesic:!0,strokeColor:t,strokeOpacity:n,strokeWeight:o,map:this.map})}},{key:\"createControl\",value:function(e){var t=e.text,n=e.tip,o=e.color,l=(e.offsetX,e.offsetY,e.onClickHandler),a=document.createElement(\"div\"),i=document.createElement(\"div\");i.style.backgroundColor=o,i.style.border=\"2px solid #fff\",i.style.borderRadius=\"3px\",i.style.boxShadow=\"0 2px 6px rgba(0,0,0,.3)\",i.style.cursor=\"pointer\",i.style.marginBottom=\"22px\",i.style.textAlign=\"center\",i.title=n,a.appendChild(i);var r=document.createElement(\"div\");r.style.color=\"rgb(25,25,25)\",r.style.fontFamily=\"Roboto,Arial,sans-serif\",r.style.fontSize=\"16px\",r.style.lineHeight=\"38px\",r.style.paddingLeft=\"5px\",r.style.paddingRight=\"5px\",r.innerHTML=t,i.appendChild(r),i.addEventListener(\"click\",function(){l(r)}),this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(a),this.controls.push(a)}},{key:\"disableControls\",value:function(){this.controls.forEach(function(e){e.style.display=\"none\"})}},{key:\"enableControls\",value:function(){this.controls.forEach(function(e){e.style.display=\"block\"})}},{key:\"getMarkerPosition\",value:function(e){var t=e.getPosition();return{lat:t.lat(),lng:t.lng()}}},{key:\"updatePolyline\",value:function(e,t){e.setPath(t)}},{key:\"removePolyline\",value:function(e){e.setMap(null)}},{key:\"applyCoordinateOffset\",value:function(e){var t=(0,a.default)(e,2),n=t[0],o=t[1];return(0,c.WGS84ToGCJ02)(n,o)}}]),e}();t.default=p}});\n\n\n// WEBPACK FOOTER //\n// 1.bundle.js"],"mappings":"AAAA","sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"1.bundle.js","sources":["webpack:///1.bundle.js"],"sourcesContent":["webpackJsonp([1],{681:function(e,t,n){\"use strict\";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,\"__esModule\",{value:!0}),t.default=void 0;var l=n(231),a=o(l),i=n(0),r=o(i),s=n(1),u=o(s),c=n(230),p=function(){function e(){(0,r.default)(this,e),this.map=null,this.controls=[]}return(0,u.default)(e,[{key:\"isInitialized\",value:function(){return null!==this.map}},{key:\"loadMap\",value:function(e,t){var n={center:e,zoom:20,mapTypeId:google.maps.MapTypeId.ROADMAP,fullscreenControl:!1};this.map=new google.maps.Map(document.getElementById(t),n)}},{key:\"setCenter\",value:function(e){this.map.setCenter(e)}},{key:\"setZoom\",value:function(e){this.map.setZoom(e)}},{key:\"addEventHandler\",value:function(e,t){google.maps.event.addListener(this.map,e,function(e){var n=e.latLng;t(n)})}},{key:\"createPoint\",value:function(e){var t=e.lat,n=e.lng;return new google.maps.LatLng(t,n)}},{key:\"createMarker\",value:function(e,t){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];return new google.maps.Marker({position:e,label:t,draggable:n,map:this.map})}},{key:\"createPolyline\",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:2;return new google.maps.Polyline({path:e,geodesic:!0,strokeColor:t,strokeOpacity:n,strokeWeight:o,map:this.map})}},{key:\"createControl\",value:function(e){var t=e.text,n=e.tip,o=e.color,l=(e.offsetX,e.offsetY,e.onClickHandler),a=document.createElement(\"div\"),i=document.createElement(\"div\");i.style.backgroundColor=o,i.style.border=\"2px solid #fff\",i.style.borderRadius=\"3px\",i.style.boxShadow=\"0 2px 6px rgba(0,0,0,.3)\",i.style.cursor=\"pointer\",i.style.marginBottom=\"22px\",i.style.textAlign=\"center\",i.title=n,a.appendChild(i);var r=document.createElement(\"div\");r.style.color=\"rgb(25,25,25)\",r.style.fontFamily=\"Roboto,Arial,sans-serif\",r.style.fontSize=\"16px\",r.style.lineHeight=\"38px\",r.style.paddingLeft=\"5px\",r.style.paddingRight=\"5px\",r.innerHTML=t,i.appendChild(r),i.addEventListener(\"click\",function(){l(r)}),this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(a),this.controls.push(a)}},{key:\"disableControls\",value:function(){this.controls.forEach(function(e){e.style.display=\"none\"})}},{key:\"enableControls\",value:function(){this.controls.forEach(function(e){e.style.display=\"block\"})}},{key:\"getMarkerPosition\",value:function(e){var t=e.getPosition();return{lat:t.lat(),lng:t.lng()}}},{key:\"updatePolyline\",value:function(e,t){e.setPath(t)}},{key:\"removePolyline\",value:function(e){e.setMap(null)}},{key:\"applyCoordinateOffset\",value:function(e){var t=(0,a.default)(e,2),n=t[0],o=t[1];return(0,c.WGS84ToGCJ02)(n,o)}}]),e}();t.default=p}});\n\n\n// WEBPACK FOOTER //\n// 1.bundle.js"],"mappings":"AAAA","sourceRoot":""}
\ No newline at end of file

modules/dreamview/frontend/dist/2.bundle.js

-webpackJsonp([2],{680:function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=n(3),i=a(o),l=n(5),r=a(l),s=n(4),u=a(s),d=n(230),c=a(d),p=n(0),f=a(p),h=n(1),v=a(h),y=n(229),C=function(){function e(){(0,f.default)(this,e),this.map=null,this.controls=[],this.initializedCenter=!1}return(0,v.default)(e,[{key:"isInitialized",value:function(){return null!==this.map}},{key:"loadMap",value:function(e,t){this.map=new BMap.Map(t,{enableMapClick:!1}),this.map.enableScrollWheelZoom(),this.map.addControl(new BMap.MapTypeControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_SMALL})),this.map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,type:BMAP_NAVIGATION_CONTROL_SMALL,enableGeolocation:!1}))}},{key:"setCenter",value:function(e){this.initializedCenter?this.map.setCenter(e):(this.map.centerAndZoom(e,19),this.initializedCenter=!0)}},{key:"setZoom",value:function(e){this.map.setZoom(e)}},{key:"addEventHandler",value:function(e,t){this.map.addEventListener(e,function(e){var n=e.point;t(n)})}},{key:"createPoint",value:function(e){var t=e.lat,n=e.lng;return new BMap.Point(n,t)}},{key:"createMarker",value:function(e,t){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],a=null;t&&(a=new BMap.Label(t,{point:e,offset:new BMap.Size(15,-15)}));var o=new BMap.Marker(e,{label:a,enableDragging:n,rotation:5});return o.setLabel(a),this.map.addOverlay(o),o}},{key:"createPolyline",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:2,o={geodesic:!0,strokeColor:t,strokeOpacity:n,strokeWeight:a},i=new BMap.Polyline(e,o);return this.map.addOverlay(i),i}},{key:"createControl",value:function(e){var t=e.text,n=e.tip,a=e.color,o=e.offsetX,i=e.offsetY,l=e.onClickHandler,r=new m(t,n,a,new BMap.Size(o,i),l);this.map.addControl(r),this.controls.push(r)}},{key:"disableControls",value:function(){var e=this;this.controls.forEach(function(t){e.map.removeControl(t)})}},{key:"enableControls",value:function(){var e=this;this.controls.forEach(function(t){e.map.addControl(t)})}},{key:"getMarkerPosition",value:function(e){return e.getPosition()}},{key:"updatePolyline",value:function(e,t){e.setPath(t)}},{key:"removePolyline",value:function(e){this.map.removeOverlay(e)}},{key:"applyCoordinateOffset",value:function(e){var t=(0,c.default)(e,2),n=t[0],a=t[1];return(0,y.WGS84ToBD09LL)(n,a)}}]),e}();t.default=C;var m=function(e){function t(e,n,a,o,l){var s;(0,f.default)(this,t);for(var u=arguments.length,d=Array(u>5?u-5:0),c=5;c<u;c++)d[c-5]=arguments[c];var p=(0,r.default)(this,(s=t.__proto__||(0,i.default)(t)).call.apply(s,[this].concat(d)));return p.defaultAnchor=BMAP_ANCHOR_TOP_LEFT,p.defaultOffset=o,p.onClickHandler=l,p.title=n,p.text=e,p.backgroundColor=a,p}return(0,u.default)(t,e),(0,v.default)(t,[{key:"initialize",value:function(e){var t=this,n=document.createElement("div"),a=document.createElement("div");a.style.backgroundColor=this.backgroundColor,a.style.border="2px solid #fff",a.style.borderRadius="3px",a.style.boxShadow="0 2px 6px rgba(0,0,0,.3)",a.style.cursor="pointer",a.style.marginBottom="22px",a.style.textAlign="center",a.title=this.title,n.appendChild(a);var o=document.createElement("div");return o.style.color="rgb(25,25,25)",o.style.fontFamily="Roboto,Arial,sans-serif",o.style.fontSize="16px",o.style.lineHeight="38px",o.style.paddingLeft="5px",o.style.paddingRight="5px",o.innerHTML=this.text,a.appendChild(o),e.getContainer().appendChild(n),a.addEventListener("click",function(){t.onClickHandler(o)}),n}}]),t}(BMap.Control)}});
+webpackJsonp([2],{680:function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=n(3),i=a(o),l=n(5),r=a(l),s=n(4),u=a(s),d=n(231),c=a(d),p=n(0),f=a(p),h=n(1),v=a(h),y=n(230),C=function(){function e(){(0,f.default)(this,e),this.map=null,this.controls=[],this.initializedCenter=!1}return(0,v.default)(e,[{key:"isInitialized",value:function(){return null!==this.map}},{key:"loadMap",value:function(e,t){this.map=new BMap.Map(t,{enableMapClick:!1}),this.map.enableScrollWheelZoom(),this.map.addControl(new BMap.MapTypeControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_SMALL})),this.map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,type:BMAP_NAVIGATION_CONTROL_SMALL,enableGeolocation:!1}))}},{key:"setCenter",value:function(e){this.initializedCenter?this.map.setCenter(e):(this.map.centerAndZoom(e,19),this.initializedCenter=!0)}},{key:"setZoom",value:function(e){this.map.setZoom(e)}},{key:"addEventHandler",value:function(e,t){this.map.addEventListener(e,function(e){var n=e.point;t(n)})}},{key:"createPoint",value:function(e){var t=e.lat,n=e.lng;return new BMap.Point(n,t)}},{key:"createMarker",value:function(e,t){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],a=null;t&&(a=new BMap.Label(t,{point:e,offset:new BMap.Size(15,-15)}));var o=new BMap.Marker(e,{label:a,enableDragging:n,rotation:5});return o.setLabel(a),this.map.addOverlay(o),o}},{key:"createPolyline",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:2,o={geodesic:!0,strokeColor:t,strokeOpacity:n,strokeWeight:a},i=new BMap.Polyline(e,o);return this.map.addOverlay(i),i}},{key:"createControl",value:function(e){var t=e.text,n=e.tip,a=e.color,o=e.offsetX,i=e.offsetY,l=e.onClickHandler,r=new m(t,n,a,new BMap.Size(o,i),l);this.map.addControl(r),this.controls.push(r)}},{key:"disableControls",value:function(){var e=this;this.controls.forEach(function(t){e.map.removeControl(t)})}},{key:"enableControls",value:function(){var e=this;this.controls.forEach(function(t){e.map.addControl(t)})}},{key:"getMarkerPosition",value:function(e){return e.getPosition()}},{key:"updatePolyline",value:function(e,t){e.setPath(t)}},{key:"removePolyline",value:function(e){this.map.removeOverlay(e)}},{key:"applyCoordinateOffset",value:function(e){var t=(0,c.default)(e,2),n=t[0],a=t[1];return(0,y.WGS84ToBD09LL)(n,a)}}]),e}();t.default=C;var m=function(e){function t(e,n,a,o,l){var s;(0,f.default)(this,t);for(var u=arguments.length,d=Array(u>5?u-5:0),c=5;c<u;c++)d[c-5]=arguments[c];var p=(0,r.default)(this,(s=t.__proto__||(0,i.default)(t)).call.apply(s,[this].concat(d)));return p.defaultAnchor=BMAP_ANCHOR_TOP_LEFT,p.defaultOffset=o,p.onClickHandler=l,p.title=n,p.text=e,p.backgroundColor=a,p}return(0,u.default)(t,e),(0,v.default)(t,[{key:"initialize",value:function(e){var t=this,n=document.createElement("div"),a=document.createElement("div");a.style.backgroundColor=this.backgroundColor,a.style.border="2px solid #fff",a.style.borderRadius="3px",a.style.boxShadow="0 2px 6px rgba(0,0,0,.3)",a.style.cursor="pointer",a.style.marginBottom="22px",a.style.textAlign="center",a.title=this.title,n.appendChild(a);var o=document.createElement("div");return o.style.color="rgb(25,25,25)",o.style.fontFamily="Roboto,Arial,sans-serif",o.style.fontSize="16px",o.style.lineHeight="38px",o.style.paddingLeft="5px",o.style.paddingRight="5px",o.innerHTML=this.text,a.appendChild(o),e.getContainer().appendChild(n),a.addEventListener("click",function(){t.onClickHandler(o)}),n}}]),t}(BMap.Control)}});
 //# sourceMappingURL=2.bundle.js.map
\ No newline at end of file

modules/dreamview/frontend/dist/2.bundle.js.map

-{"version":3,"file":"2.bundle.js","sources":["webpack:///2.bundle.js"],"sourcesContent":["webpackJsonp([2],{680:function(e,t,n){\"use strict\";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,\"__esModule\",{value:!0}),t.default=void 0;var o=n(3),i=a(o),l=n(5),r=a(l),s=n(4),u=a(s),d=n(230),c=a(d),p=n(0),f=a(p),h=n(1),v=a(h),y=n(229),C=function(){function e(){(0,f.default)(this,e),this.map=null,this.controls=[],this.initializedCenter=!1}return(0,v.default)(e,[{key:\"isInitialized\",value:function(){return null!==this.map}},{key:\"loadMap\",value:function(e,t){this.map=new BMap.Map(t,{enableMapClick:!1}),this.map.enableScrollWheelZoom(),this.map.addControl(new BMap.MapTypeControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_SMALL})),this.map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,type:BMAP_NAVIGATION_CONTROL_SMALL,enableGeolocation:!1}))}},{key:\"setCenter\",value:function(e){this.initializedCenter?this.map.setCenter(e):(this.map.centerAndZoom(e,19),this.initializedCenter=!0)}},{key:\"setZoom\",value:function(e){this.map.setZoom(e)}},{key:\"addEventHandler\",value:function(e,t){this.map.addEventListener(e,function(e){var n=e.point;t(n)})}},{key:\"createPoint\",value:function(e){var t=e.lat,n=e.lng;return new BMap.Point(n,t)}},{key:\"createMarker\",value:function(e,t){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],a=null;t&&(a=new BMap.Label(t,{point:e,offset:new BMap.Size(15,-15)}));var o=new BMap.Marker(e,{label:a,enableDragging:n,rotation:5});return o.setLabel(a),this.map.addOverlay(o),o}},{key:\"createPolyline\",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:2,o={geodesic:!0,strokeColor:t,strokeOpacity:n,strokeWeight:a},i=new BMap.Polyline(e,o);return this.map.addOverlay(i),i}},{key:\"createControl\",value:function(e){var t=e.text,n=e.tip,a=e.color,o=e.offsetX,i=e.offsetY,l=e.onClickHandler,r=new m(t,n,a,new BMap.Size(o,i),l);this.map.addControl(r),this.controls.push(r)}},{key:\"disableControls\",value:function(){var e=this;this.controls.forEach(function(t){e.map.removeControl(t)})}},{key:\"enableControls\",value:function(){var e=this;this.controls.forEach(function(t){e.map.addControl(t)})}},{key:\"getMarkerPosition\",value:function(e){return e.getPosition()}},{key:\"updatePolyline\",value:function(e,t){e.setPath(t)}},{key:\"removePolyline\",value:function(e){this.map.removeOverlay(e)}},{key:\"applyCoordinateOffset\",value:function(e){var t=(0,c.default)(e,2),n=t[0],a=t[1];return(0,y.WGS84ToBD09LL)(n,a)}}]),e}();t.default=C;var m=function(e){function t(e,n,a,o,l){var s;(0,f.default)(this,t);for(var u=arguments.length,d=Array(u>5?u-5:0),c=5;c<u;c++)d[c-5]=arguments[c];var p=(0,r.default)(this,(s=t.__proto__||(0,i.default)(t)).call.apply(s,[this].concat(d)));return p.defaultAnchor=BMAP_ANCHOR_TOP_LEFT,p.defaultOffset=o,p.onClickHandler=l,p.title=n,p.text=e,p.backgroundColor=a,p}return(0,u.default)(t,e),(0,v.default)(t,[{key:\"initialize\",value:function(e){var t=this,n=document.createElement(\"div\"),a=document.createElement(\"div\");a.style.backgroundColor=this.backgroundColor,a.style.border=\"2px solid #fff\",a.style.borderRadius=\"3px\",a.style.boxShadow=\"0 2px 6px rgba(0,0,0,.3)\",a.style.cursor=\"pointer\",a.style.marginBottom=\"22px\",a.style.textAlign=\"center\",a.title=this.title,n.appendChild(a);var o=document.createElement(\"div\");return o.style.color=\"rgb(25,25,25)\",o.style.fontFamily=\"Roboto,Arial,sans-serif\",o.style.fontSize=\"16px\",o.style.lineHeight=\"38px\",o.style.paddingLeft=\"5px\",o.style.paddingRight=\"5px\",o.innerHTML=this.text,a.appendChild(o),e.getContainer().appendChild(n),a.addEventListener(\"click\",function(){t.onClickHandler(o)}),n}}]),t}(BMap.Control)}});\n\n\n// WEBPACK FOOTER //\n// 2.bundle.js"],"mappings":"AAAA","sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"2.bundle.js","sources":["webpack:///2.bundle.js"],"sourcesContent":["webpackJsonp([2],{680:function(e,t,n){\"use strict\";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,\"__esModule\",{value:!0}),t.default=void 0;var o=n(3),i=a(o),l=n(5),r=a(l),s=n(4),u=a(s),d=n(231),c=a(d),p=n(0),f=a(p),h=n(1),v=a(h),y=n(230),C=function(){function e(){(0,f.default)(this,e),this.map=null,this.controls=[],this.initializedCenter=!1}return(0,v.default)(e,[{key:\"isInitialized\",value:function(){return null!==this.map}},{key:\"loadMap\",value:function(e,t){this.map=new BMap.Map(t,{enableMapClick:!1}),this.map.enableScrollWheelZoom(),this.map.addControl(new BMap.MapTypeControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_SMALL})),this.map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,type:BMAP_NAVIGATION_CONTROL_SMALL,enableGeolocation:!1}))}},{key:\"setCenter\",value:function(e){this.initializedCenter?this.map.setCenter(e):(this.map.centerAndZoom(e,19),this.initializedCenter=!0)}},{key:\"setZoom\",value:function(e){this.map.setZoom(e)}},{key:\"addEventHandler\",value:function(e,t){this.map.addEventListener(e,function(e){var n=e.point;t(n)})}},{key:\"createPoint\",value:function(e){var t=e.lat,n=e.lng;return new BMap.Point(n,t)}},{key:\"createMarker\",value:function(e,t){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],a=null;t&&(a=new BMap.Label(t,{point:e,offset:new BMap.Size(15,-15)}));var o=new BMap.Marker(e,{label:a,enableDragging:n,rotation:5});return o.setLabel(a),this.map.addOverlay(o),o}},{key:\"createPolyline\",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:2,o={geodesic:!0,strokeColor:t,strokeOpacity:n,strokeWeight:a},i=new BMap.Polyline(e,o);return this.map.addOverlay(i),i}},{key:\"createControl\",value:function(e){var t=e.text,n=e.tip,a=e.color,o=e.offsetX,i=e.offsetY,l=e.onClickHandler,r=new m(t,n,a,new BMap.Size(o,i),l);this.map.addControl(r),this.controls.push(r)}},{key:\"disableControls\",value:function(){var e=this;this.controls.forEach(function(t){e.map.removeControl(t)})}},{key:\"enableControls\",value:function(){var e=this;this.controls.forEach(function(t){e.map.addControl(t)})}},{key:\"getMarkerPosition\",value:function(e){return e.getPosition()}},{key:\"updatePolyline\",value:function(e,t){e.setPath(t)}},{key:\"removePolyline\",value:function(e){this.map.removeOverlay(e)}},{key:\"applyCoordinateOffset\",value:function(e){var t=(0,c.default)(e,2),n=t[0],a=t[1];return(0,y.WGS84ToBD09LL)(n,a)}}]),e}();t.default=C;var m=function(e){function t(e,n,a,o,l){var s;(0,f.default)(this,t);for(var u=arguments.length,d=Array(u>5?u-5:0),c=5;c<u;c++)d[c-5]=arguments[c];var p=(0,r.default)(this,(s=t.__proto__||(0,i.default)(t)).call.apply(s,[this].concat(d)));return p.defaultAnchor=BMAP_ANCHOR_TOP_LEFT,p.defaultOffset=o,p.onClickHandler=l,p.title=n,p.text=e,p.backgroundColor=a,p}return(0,u.default)(t,e),(0,v.default)(t,[{key:\"initialize\",value:function(e){var t=this,n=document.createElement(\"div\"),a=document.createElement(\"div\");a.style.backgroundColor=this.backgroundColor,a.style.border=\"2px solid #fff\",a.style.borderRadius=\"3px\",a.style.boxShadow=\"0 2px 6px rgba(0,0,0,.3)\",a.style.cursor=\"pointer\",a.style.marginBottom=\"22px\",a.style.textAlign=\"center\",a.title=this.title,n.appendChild(a);var o=document.createElement(\"div\");return o.style.color=\"rgb(25,25,25)\",o.style.fontFamily=\"Roboto,Arial,sans-serif\",o.style.fontSize=\"16px\",o.style.lineHeight=\"38px\",o.style.paddingLeft=\"5px\",o.style.paddingRight=\"5px\",o.innerHTML=this.text,a.appendChild(o),e.getContainer().appendChild(n),a.addEventListener(\"click\",function(){t.onClickHandler(o)}),n}}]),t}(BMap.Control)}});\n\n\n// WEBPACK FOOTER //\n// 2.bundle.js"],"mappings":"AAAA","sourceRoot":""}
\ No newline at end of file

modules/dreamview/frontend/dist/parameters.json

@@ -252,6 +252,10 @@
 		"showMapParkingSpace": {
 			"default": true,
 			"menuId": "mapParkingSpace"
+		},
+		"showMapLaneId": {
+			"default": false,
+			"menuId": "mapLaneId"
 		}
 	},
 	"routingEditor": {

modules/dreamview/frontend/src/renderer/map.js

@@ -8,6 +8,7 @@ import {
     drawDashedLineFromPoints,
     drawShapeFromPoints
 } from "utils/draw";
+import Text3D, { TEXT_ALIGN } from "renderer/text3d";
 
 import stopSignMaterial from "assets/models/stop_sign.mtl";
 import stopSignObject from "assets/models/stop_sign.obj";
@@ -46,6 +47,7 @@ const EPSILON = 1e-9;
 
 export default class Map {
     constructor() {
+        this.textRender = new Text3D();
         this.hash = -1;
         this.data = {};
         this.initialized = false;
@@ -58,7 +60,7 @@ export default class Map {
         let empty = true;
 
         for (const kind in elementIds) {
-            if (!this.shouldDrawThisElementKind(kind)) {
+            if (!this.shouldDrawObjectOfThisElementKind(kind)) {
                 continue;
             }
 
@@ -147,6 +149,34 @@ export default class Map {
         return drewObjects;
     }
 
+    addLaneId(lane, coordinates, scene) {
+        const centralLine = lane.centralCurve.segment;
+        let position = _.get(centralLine, '[0].startPosition');
+        if (position) {
+            position.z = 0.04;
+            position = coordinates.applyOffset(position);
+        }
+
+        const rotation = { x: 0.0, y: 0.0, z: 0.0 };
+        const points = _.get(centralLine, '[0].lineSegment.point', []);
+        if (points.length >= 2) {
+            const p1 = points[0];
+            const p2 = points[1];
+            rotation.z = Math.atan2(p2.y - p1.y, p2.x - p1.x);
+        }
+
+        const text = this.textRender.drawText(
+            lane.id.id, scene, colorMapping.WHITE, TEXT_ALIGN.LEFT);
+        if (text) {
+            text.position.set(position.x, position.y, position.z);
+            text.rotation.set(rotation.x, rotation.y, rotation.z);
+            text.visible = false;
+            scene.add(text);
+        }
+
+        return text;
+    }
+
     addRoad(road, coordinates, scene) {
         const drewObjects = [];
 
@@ -245,7 +275,7 @@ export default class Map {
         const orthogonalX = (boundary2.x - boundary1.x) * (boundary3.z - boundary1.z)
             - (boundary3.x - boundary1.x) * (boundary2.z - boundary1.z);
         const orthogonalY = (boundary2.y - boundary1.y) * (boundary3.z - boundary1.z)
-             - (boundary3.y - boundary1.y) * (boundary2.z - boundary1.z);
+            - (boundary3.y - boundary1.y) * (boundary2.z - boundary1.z);
         const orthogonalConstant = -orthogonalX * boundary1.x - orthogonalY * boundary1.y;
         // get the stop line
         const stopLine = _.get(signal, 'stopLine[0].segment[0].lineSegment.point', '');
@@ -367,6 +397,13 @@ export default class Map {
         return drewObjects;
     }
 
+    removeDrewText(textMesh, scene) {
+        if (textMesh) {
+            textMesh.children.forEach(c => c.visible = false);
+            scene.remove(textMesh);
+        }
+    }
+
     removeDrewObjects(drewObjects, scene) {
         if (drewObjects) {
             drewObjects.forEach(object => {
@@ -389,7 +426,7 @@ export default class Map {
         const newData = {};
 
         for (const kind in this.data) {
-            const drawThisKind = this.shouldDrawThisElementKind(kind);
+            const drawThisKind = this.shouldDrawObjectOfThisElementKind(kind);
             newData[kind] = [];
             const oldDataOfThisKind = this.data[kind];
             const currentIds = elementIds[kind];
@@ -398,6 +435,7 @@ export default class Map {
                     newData[kind].push(oldData);
                 } else {
                     this.removeDrewObjects(oldData.drewObjects, scene);
+                    this.removeDrewText(oldData.text, scene);
                 }
             });
         }
@@ -423,7 +461,8 @@ export default class Map {
                     case "lane":
                         const lane = newData[kind][i];
                         this.data[kind].push(Object.assign(newData[kind][i], {
-                            drewObjects: this.addLane(lane, coordinates, scene)
+                            drewObjects: this.addLane(lane, coordinates, scene),
+                            text: this.addLaneId(lane, coordinates, scene)
                         }));
                         break;
                     case "clearArea":
@@ -488,7 +527,7 @@ export default class Map {
         }
     }
 
-    shouldDrawThisElementKind(kind) {
+    shouldDrawObjectOfThisElementKind(kind) {
         // Ex: mapping 'lane' to 'showMapLane' option
         const optionName = `showMap${kind[0].toUpperCase()}${kind.slice(1)}`;
 
@@ -496,13 +535,34 @@ export default class Map {
         return STORE.options[optionName] !== false;
     }
 
+    shouldDrawTextOfThisElementKind(kind) {
+        // Ex: mapping 'lane' to 'showMapLaneId' option
+        const optionName = `showMap${kind[0].toUpperCase()}${kind.slice(1)}Id`;
+
+        // NOTE: return false if the option is not found
+        return STORE.options[optionName] === true;
+    }
+
+    updateText() {
+        for (const kind in this.data) {
+            const isVisible = this.shouldDrawTextOfThisElementKind(kind);
+            this.data[kind].forEach(element => {
+                if (element.text) {
+                    element.text.visible = isVisible;
+                }
+            });
+        }
+    }
+
     updateIndex(hash, elementIds, scene) {
         if (STORE.hmi.inNavigationMode) {
             MAP_WS.requestRelativeMapData();
         } else {
+            this.updateText();
+
             let newElementKindsDrawn = '';
             for (const kind of Object.keys(elementIds).sort()) {
-                if (this.shouldDrawThisElementKind(kind)) {
+                if (this.shouldDrawObjectOfThisElementKind(kind)) {
                     newElementKindsDrawn += kind;
                 }
             }

modules/dreamview/frontend/src/renderer/obstacles.js

@@ -308,20 +308,12 @@ export default class PerceptionObstacles {
     }
 
     drawTexts(content, position, scene) {
-        const text = this.textRender.composeText(content);
-        if (text === null) {
-            return;
-        }
-
-        text.position.set(position.x, position.y, position.z );
-        const camera = scene.getObjectByName("camera");
-        if (camera !== undefined) {
-            text.quaternion.copy(camera.quaternion);
+        const text = this.textRender.drawText(content, scene);
+        if (text) {
+            text.position.set(position.x, position.y, position.z);
+            this.ids.push(text);
+            scene.add(text);
         }
-        text.children.forEach(c => c.visible = true);
-        text.visible = true;
-        this.ids.push(text);
-        scene.add(text);
     }
 
     updateLaneMarkers(world, coordinates, scene) {

modules/dreamview/frontend/src/renderer/text3d.js

@@ -17,6 +17,11 @@ loader.load(fontPath, font => {
         console.log( 'An error happened when loading ' + fontPath );
 });
 
+export const TEXT_ALIGN = {
+    CENTER: 'center',
+    LEFT: 'left',
+};
+
 export default class Text3D {
     constructor() {
         // The meshes for each ASCII char, created and reused when needed.
@@ -33,7 +38,23 @@ export default class Text3D {
         this.charPointers = {};
     }
 
-    composeText(text) {
+    drawText(text, scene, color = 0xFFEA00, textAlign = TEXT_ALIGN.CENTER) {
+        const textMesh = this.composeText(text, color, textAlign);
+        if (textMesh === null) {
+            return;
+        }
+
+        const camera = scene.getObjectByName("camera");
+        if (camera !== undefined) {
+            textMesh.quaternion.copy(camera.quaternion);
+        }
+        textMesh.children.forEach(c => c.visible = true);
+        textMesh.visible = true;
+
+        return textMesh;
+    }
+
+    composeText(text, color, textAlign) {
         if (!fontsLoaded) {
             return null;
         }
@@ -56,7 +77,7 @@ export default class Text3D {
                 if (this.charMeshes[idx].length > 0) {
                     mesh = this.charMeshes[idx][0].clone();
                 } else {
-                    mesh = this.drawChar3D(text[j]);
+                    mesh = this.drawChar3D(text[j], color);
                 }
                 this.charMeshes[idx].push(mesh);
             }
@@ -74,15 +95,25 @@ export default class Text3D {
                     additionalOffset = 0.15;
                     break;
             }
-            mesh.position.set((j - charIndices.length / 2) * letterOffset + additionalOffset, 0, 0);
+
+            switch (textAlign) {
+                case 'left':
+                    mesh.position.set(
+                        j * letterOffset + additionalOffset, 0, 0);
+                    break;
+                case 'center':
+                default:
+                    mesh.position.set(
+                        (j - charIndices.length / 2) * letterOffset + additionalOffset, 0, 0);
+                    break;
+            }
             this.charPointers[idx]++;
             textMesh.add(mesh);
         }
         return textMesh;
     }
 
-    drawChar3D(char, font = fonts['gentilis_bold'], size = 0.6, height = 0,
-            color = 0xFFEA00) {
+    drawChar3D(char, color, font = fonts['gentilis_bold'], size = 0.6, height = 0) {
         const charGeo = new THREE.TextGeometry(char, {
             font: font,
             size: size,

modules/dreamview/frontend/src/store/config/MenuData.js

@@ -92,6 +92,7 @@ export default [
             mapStopSign: 'Stop Sign',
             mapSpeedBump: 'Speed Bump',
             mapParkingSpace: 'Parking Space',
+            mapLaneId: 'Lane Id'
         },
         supportInOfflineView: false,
     },

modules/dreamview/frontend/src/store/config/parameters.yml

@@ -193,6 +193,9 @@ options:
   showMapParkingSpace:
     default: true
     menuId: mapParkingSpace
+  showMapLaneId:
+    default: false
+    menuId: mapLaneId
 
 routingEditor:
   radiusOfMapRequest: 2000.0 # meters