Geolocation.js 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. /**
  2. *
  3. * GPS Geolocation with device orientation in real-time
  4. */
  5. (function () {
  6. //采用高德地图定位的算法,参考帮助文档:https://lbs.amap.com/api/javascript-api/guide/services/geolocation
  7. document.write('<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ae29a37307840c7ae4a785ac905927e0"></script>');
  8. class Geolocation extends mars3d.control.ToolButton {
  9. /**
  10. * 创建_container控件容器对象的方法,
  11. * 只会调用一次
  12. * @return {void} 无
  13. * @private
  14. */
  15. _mountedHook() {
  16. //缩小
  17. this._container = mars3d.DomUtil.create("div", "cesium-button cesium-toolbar-button tracking-deactivated");
  18. this._container.setAttribute("title", "查看GPS位置");
  19. this._container.addEventListener("click", (e) => {
  20. // one time tracking
  21. this.startTracking();
  22. });
  23. }
  24. stopTracking() {
  25. mars3d.DomUtil.removeClass(this._container, "tracking-activated");
  26. mars3d.DomUtil.addClass(this._container, "tracking-deactivated");
  27. this.clearLocationPoint();
  28. }
  29. startTracking() {
  30. AMap.plugin("AMap.Geolocation", ()=> {
  31. mars3d.DomUtil.removeClass(this._container, "tracking-deactivated");
  32. mars3d.DomUtil.addClass(this._container, "tracking-activated");
  33. if (!this.geolocation) {
  34. this.geolocation = new AMap.Geolocation({
  35. enableHighAccuracy: true, // 是否使用高精度定位,默认:true
  36. timeout: 10000, // 设置定位超时时间,默认:无穷大
  37. convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
  38. });
  39. }
  40. var that = this;
  41. this.geolocation.getCurrentPosition();
  42. function onComplete(data) {
  43. // data是具体的定位信息
  44. var wgsPoint = mars3d.PointTrans.gcj2wgs([data.position.lng, data.position.lat]);
  45. that.flyToLocation({ lng: wgsPoint[0], lat: wgsPoint[1] });
  46. }
  47. function onError(data) {
  48. // 定位出错,参考:https://lbs.amap.com/faq/js-api/map-js-api/position-related
  49. haoutil.msg(data.message, "定位失败");
  50. }
  51. AMap.event.addListener(this.geolocation, "complete", onComplete);
  52. AMap.event.addListener(this.geolocation, "error", onError);
  53. });
  54. }
  55. flyToLocation(position) {
  56. mars3d.DomUtil.removeClass(this._container, "tracking-activated");
  57. mars3d.DomUtil.addClass(this._container, "tracking-deactivated");
  58. this._map.flyToPoint(position, {
  59. radius: 2000,
  60. complete: function () {},
  61. });
  62. this.clearLocationPoint();
  63. var graphic = new mars3d.graphic.DivLightPoint({
  64. position: position,
  65. style: {
  66. color: "#ffff00",
  67. clampToGround: true,
  68. },
  69. tooltip: "我的位置:" + position.lng + "," + position.lat,
  70. });
  71. this._map.graphicLayer.addGraphic(graphic);
  72. this.graphic = graphic;
  73. }
  74. clearLocationPoint() {
  75. if (!this.graphic) return;
  76. this.graphic.destroy();
  77. this.graphic = null;
  78. }
  79. }
  80. //对外接口
  81. window.mars3d.control.Geolocation = Geolocation;
  82. })();