C端小程序
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

232 lines
5.7 KiB

  1. // pages/FMController/index.js
  2. import { fengmap } from '../js/fengmap.miniprogram.min.js';
  3. const navigationBarHeight = (getApp().statusBarHeight + 44) + 'px'
  4. const Http = require("../../utils/HttpBasics");
  5. const config = require("../../config/config");
  6. let app = getApp();
  7. Page({
  8. /**
  9. * 页面的初始数据
  10. */
  11. data: {
  12. mapLoaded: false, //地图是否加载完成
  13. focusGroupID: 1,
  14. mapGroupIDs: [],
  15. is3D: true,
  16. isAllLayer: false,
  17. initMap:{},
  18. },
  19. // 定义全局map变量
  20. fmap: null,
  21. /**
  22. * 生命周期函数--监听页面加载
  23. */
  24. onLoad: function (options) {
  25. this.setData({
  26. initMap: JSON.parse(options.initMap)
  27. })
  28. },
  29. /**
  30. * 生命周期函数--监听页面初次渲染完成
  31. */
  32. onReady() {
  33. console.log(this.data.initMap)
  34. // 获取canvas
  35. wx.createSelectorQuery().select('#fengMap').node().exec((res) => {
  36. const canvas = res[0].node;
  37. this.canvas = canvas
  38. wx.createSelectorQuery().select("#temp").node().exec((tempRes) => {
  39. const tmpCanvas = tempRes[0].node;
  40. const fmapID = this.data.initMap.mapId;
  41. const mapOptions = {
  42. //必要,地图容器
  43. canvas: canvas,
  44. // 必要,2d画布
  45. tempCanvas: tmpCanvas,
  46. // 地图默认旋转角度
  47. defaultControlsPose: 90,
  48. // 地图默认倾斜角
  49. defaultTiltAngle: 60,
  50. // 初始二维/三维状态,默认3D显示
  51. defaultViewMode: this.data.is3D ? fengmap.FMViewMode.MODE_3D : fengmap.FMViewMode.MODE_2D,
  52. // 设置初始指南针的偏移量
  53. compassOffset: [40, 40],
  54. // 设置指南针大小
  55. compassSize: 48,
  56. //必要,地图应用名称,通过蜂鸟云后台创建
  57. appName: this.data.initMap.appName,
  58. //必要,地图应用密钥,通过蜂鸟云后台获取
  59. key: this.data.initMap.key,
  60. mapServerURL: config.url + `/fengniaoMapfile/${this.data.initMap.tenantId}/${this.data.initMap.mapId}`,
  61. mapThemeURL: config.url + `/fengniaoMapfile/${this.data.initMap.tenantId}/theme/`,
  62. defaultThemeName: this.data.initMap.defaultThemeName,
  63. defaultMapScaleLevel:19,
  64. // compassOffset:[28,100]
  65. };
  66. console.log(mapOptions,"mapOptions")
  67. //初始化地图对象
  68. this.fmap = new fengmap.FMMap(mapOptions);
  69. //打开Fengmap服务器的地图数据和主题
  70. this.fmap.openMapById(fmapID, function (error) {
  71. //打印错误信息
  72. // console.log(error);
  73. });
  74. //地图加载完成事件
  75. this.fmap.on('loadComplete', () => {
  76. console.log('地图加载完成');
  77. this.setData({
  78. mapLoaded: true
  79. })
  80. // 设置楼层数据
  81. this.loadScrollFloorCtrl();
  82. // 显示指北针
  83. this.showCompass();
  84. })
  85. })
  86. })
  87. },
  88. /**
  89. * 生命周期函数--监听页面卸载
  90. */
  91. onUnload: function () {
  92. if (this.fmap) {
  93. this.fmap.dispose();
  94. this.fmap = null;
  95. }
  96. },
  97. // 手指触摸动作开始
  98. touchStart(e) {
  99. this.canvas.dispatchTouchEvent({
  100. ...e,
  101. type: 'touchstart'
  102. })
  103. },
  104. // 手指触摸后移动
  105. touchMove(e) {
  106. this.canvas.dispatchTouchEvent({
  107. ...e,
  108. type: 'touchmove'
  109. })
  110. },
  111. // 手指触摸动作结束
  112. touchEnd(e) {
  113. this.canvas.dispatchTouchEvent({
  114. ...e,
  115. type: 'touchend'
  116. })
  117. },
  118. /**
  119. * 显示指北针
  120. */
  121. showCompass() {
  122. /**
  123. * 显示指北针,设置背景色需要在加载指北针之前设置
  124. * */
  125. // this.fmap.compass.setBgImage('../../images/compass_bg.png'); //设置背景图片
  126. // this.fmap.compass.setFgImage('../../images/compass_fg.png'); //设置前景图片
  127. this.fmap.showCompass = true;
  128. // 点击指北针事件, 使角度归0
  129. this.fmap.on('mapClickCompass', () => {
  130. this.fmap.rotateTo({
  131. //设置角度
  132. to: 0,
  133. //动画持续时间,默认为。3秒
  134. duration: 0.3,
  135. callback: function () { //回调函数
  136. console.log('rotateTo complete!');
  137. }
  138. })
  139. });
  140. },
  141. /**
  142. * 2D/3D切换
  143. */
  144. changeMode() {
  145. if (this.fmap) {
  146. if (!this.data.is3D) {
  147. // 切换地图为三维模式
  148. this.fmap.viewMode = fengmap.FMViewMode.MODE_3D;
  149. } else {
  150. // 切换地图为二维模式
  151. this.fmap.viewMode = fengmap.FMViewMode.MODE_2D;
  152. }
  153. }
  154. //更改状态
  155. this.setData({
  156. is3D: !this.data.is3D
  157. })
  158. },
  159. ///////////////////////////////////////////////
  160. // 楼层控件回调事件(start)
  161. //////////////////////////////////////////////
  162. // 设置楼层数据
  163. loadScrollFloorCtrl: function () {
  164. // 获取楼层id
  165. let groupIDs = [];
  166. this.fmap.listGroups.map((ls) => {
  167. let obj = {
  168. alias: ls.alias,
  169. gid: ls.gid,
  170. gname: ls.gname
  171. }
  172. groupIDs.push(obj);
  173. return obj;
  174. });
  175. this.setData({
  176. mapGroupIDs: groupIDs.reverse(),
  177. focusGroupID: this.fmap.focusGroupID
  178. })
  179. },
  180. // 切换楼层
  181. switchGroup(e) {
  182. if (this.fmap) {
  183. this.fmap.focusGroupID = e.detail;
  184. this.setData({
  185. focusGroupID: e.detail
  186. })
  187. }
  188. },
  189. /**
  190. * 切换单、多层
  191. * @param {*} e
  192. */
  193. switchLayers() {
  194. if (this.fmap) {
  195. if (!this.data.isAllLayer) {
  196. this.fmap.visibleGroupIDs = this.fmap.groupIDs;
  197. } else {
  198. this.fmap.visibleGroupIDs = [this.fmap.focusGroupID];
  199. }
  200. }
  201. //更改状态
  202. this.setData({
  203. isAllLayer: !this.data.isAllLayer
  204. })
  205. }
  206. ///////////////////////////////////////////////
  207. //楼层控件回调事件(end)
  208. //////////////////////////////////////////////
  209. })