|
- // pages/FMController/index.js
-
- import { fengmap } from '../js/fengmap.miniprogram.min';
- const navigationBarHeight = (getApp().statusBarHeight + 44) + 'px'
- const Http = require("../../utils/HttpBasics");
- const config = require("../../config/config");
- let app = getApp();
- Page({
-
- /**
- * 页面的初始数据
- */
- data: {
- mapLoaded: false, //地图是否加载完成
- focusGroupID: 1,
- mapGroupIDs: [],
- is3D: true,
- isAllLayer: false,
- initMap: {},
- },
- // 定义全局map变量
- fmap: null,
- canvas: null,
- /**
- * 生命周期函数--监听页面加载
- */
- onLoad: function (options) {
- this.setData({
- initMap: JSON.parse(options.initMap)
- })
- },
-
- /**
- * 生命周期函数--监听页面初次渲染完成
- */
- onReady() {
- console.log(this.data.initMap)
- // 获取canvas
- wx.createSelectorQuery().select('#fengMap').node().exec((res) => {
- const canvas = res[0].node;
- this.canvas = canvas
- wx.createSelectorQuery().select("#temp").node().exec((tempRes) => {
- const tmpCanvas = tempRes[0].node;
-
- const fmapID = this.data.initMap.mapId;
-
- const mapOptions = {
- //必要,地图容器
- canvas: canvas,
- // 必要,2d画布
- tempCanvas: tmpCanvas,
- // 地图默认旋转角度
- defaultControlsPose: 90,
- // 地图默认倾斜角
- defaultTiltAngle: 60,
- // 初始二维/三维状态,默认3D显示
- defaultViewMode: this.data.is3D ? fengmap.FMViewMode.MODE_3D : fengmap.FMViewMode.MODE_2D,
- // 设置初始指南针的偏移量
- compassOffset: [40, 40],
- // 设置指南针大小
- compassSize: 48,
- //必要,地图应用名称,通过蜂鸟云后台创建
- appName: this.data.initMap.appName,
- //必要,地图应用密钥,通过蜂鸟云后台获取
- key: this.data.initMap.key,
- mapServerURL: config.url + `/fengniaoMapfile/${this.data.initMap.tenantId}/${this.data.initMap.mapId}`,
- mapThemeURL: config.url + `/fengniaoMapfile/${this.data.initMap.tenantId}/theme/`,
- defaultThemeName: this.data.initMap.defaultThemeName,
- defaultMapScaleLevel: 19,
- // compassOffset:[28,100]
- };
- console.log(canvas, "canvas")
-
- //初始化地图对象
- this.fmap = new fengmap.FMMap(mapOptions);
-
- //打开Fengmap服务器的地图数据和主题
- this.fmap.openMapById(fmapID, function (error) {
- //打印错误信息
- // console.log(error);
- });
-
- //地图加载完成事件
- this.fmap.on('loadComplete', () => {
- console.log('地图加载完成');
-
- this.setData({
- mapLoaded: true
- })
-
- // 设置楼层数据
- this.loadScrollFloorCtrl();
-
- // 显示指北针
- this.showCompass();
- })
- })
- })
- },
- /**
- * 生命周期函数--监听页面卸载
- */
- onUnload: function () {
- if (this.fmap) {
- this.fmap.dispose();
- this.fmap = null;
- }
- },
- // 手指触摸动作开始
- touchStart(e) {
- this.canvas.dispatchTouchEvent({
- ...e,
- type: 'touchstart'
- })
- },
- // 手指触摸后移动
- touchMove(e) {
- this.canvas.dispatchTouchEvent({
- ...e,
- type: 'touchmove'
- })
- },
- // 手指触摸动作结束
- touchEnd(e) {
- this.canvas.dispatchTouchEvent({
- ...e,
- type: 'touchend'
- })
- },
-
- /**
- * 显示指北针
- */
- showCompass() {
- /**
- * 显示指北针,设置背景色需要在加载指北针之前设置
- * */
- // this.fmap.compass.setBgImage('../../images/compass_bg.png'); //设置背景图片
- // this.fmap.compass.setFgImage('../../images/compass_fg.png'); //设置前景图片
- this.fmap.showCompass = true;
-
- // 点击指北针事件, 使角度归0
- this.fmap.on('mapClickCompass', () => {
- this.fmap.rotateTo({
- //设置角度
- to: 0,
- //动画持续时间,默认为。3秒
- duration: 0.3,
- callback: function () { //回调函数
- console.log('rotateTo complete!');
- }
- })
- });
- },
-
- /**
- * 2D/3D切换
- */
- changeMode() {
- if (this.fmap) {
- if (!this.data.is3D) {
- // 切换地图为三维模式
- this.fmap.viewMode = fengmap.FMViewMode.MODE_3D;
- } else {
- // 切换地图为二维模式
- this.fmap.viewMode = fengmap.FMViewMode.MODE_2D;
- }
- }
- //更改状态
- this.setData({
- is3D: !this.data.is3D
- })
- },
-
-
- ///////////////////////////////////////////////
- // 楼层控件回调事件(start)
- //////////////////////////////////////////////
- // 设置楼层数据
- loadScrollFloorCtrl: function () {
- // 获取楼层id
- let groupIDs = [];
- this.fmap.listGroups.map((ls) => {
- let obj = {
- alias: ls.alias,
- gid: ls.gid,
- gname: ls.gname
- }
- groupIDs.push(obj);
- return obj;
- });
-
- this.setData({
- mapGroupIDs: groupIDs.reverse(),
- focusGroupID: this.fmap.focusGroupID
- })
-
- },
- // 切换楼层
- switchGroup(e) {
- if (this.fmap) {
- this.fmap.focusGroupID = e.detail;
- this.setData({
- focusGroupID: e.detail
- })
- }
- },
-
- /**
- * 切换单、多层
- * @param {*} e
- */
- switchLayers() {
- if (this.fmap) {
- if (!this.data.isAllLayer) {
- this.fmap.visibleGroupIDs = this.fmap.groupIDs;
- } else {
- this.fmap.visibleGroupIDs = [this.fmap.focusGroupID];
- }
- }
- //更改状态
- this.setData({
- isAllLayer: !this.data.isAllLayer
- })
- }
-
- ///////////////////////////////////////////////
- //楼层控件回调事件(end)
- //////////////////////////////////////////////
- })
|