C端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

230 lines
5.7 KiB

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