Index

FengMap JavaScript SDK for 微信小程序快速开发指南

在当前版本中，SDK 基于微信小程序基础库 v2.11.0 及以上版本进行编译开发，使用规则有局部的变化，用来适用微信小程序。

注意：在当前版本中，使用的图片资源，例如，FMImageMarker，顶面贴图，模型纹理等，图片的宽度和高度需要满足 2的N次方。例如，16，32，256，512 等

微信白名单设置

由于微信本身的安全策略，请在小程序后台将以下域名加入到您的 request合法域名 中

https://console.fengmap.com
https://oss.fengmap.com

地图初始化

在微信小程序SDK中,我们需要向使用地图的主界面 wxml 文件中添加两个 canvas，分别用来作为地图渲染时使用的容器和用作临时渲染图像的使用。其中，作为主地图渲染的 canvas 需要分别绑定 touchMove，touchMove 和 touchEnd 三个事件用来响应手势的交互控制，用作临时渲染的2d canvas画布需要自定义隐藏，例如画布放置可视范围之外。

注意：安卓系统不可以使用display:none进行隐藏.

定义界面容器

    <canvas type="webgl" id="fengmap" style="width: 100%; height: 100%;" bindtouchstart
    ="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
    <canvas type="2d" id="overlay" style="display:none"></canvas>

SDK 的引入方式

// 方式1-模块化引入（3.1.8及之后版本推荐的引入方式）
import { FMWXSetting, FMMap } from '../../utils/fengmap.minimap.min.js';

// 方式2-批量引入
import { fmMap } from '../../utils/fengmap.minimap.min.js';
const fengmap = {
  ...fmMap,
}

初始化地图容器

    import { fmMap } from '../../utils/fengmap.minimap.min.js';

    const fengmap = {
        ...fmMap,
    }

    // 地图容器,非全屏时需要设置如下两步, 全屏情况可以不用设置。
    wx.createSelectorQuery().select('#fengMap').boundingClientRect(rect => {
      fengmap.FMWXSetting.boundingClientRect = rect;

      // 获取canvas
      wx.createSelectorQuery().select('#fengmap').node().exec((res) => {
        const canvas = res[0].node;

        wx.createSelectorQuery().select("#overlay").node().exec((tempRes) => {
          const tmpCanvas = tempRes[0].node;
          fengmap.FMWXSetting.textureCanvas = [ tmpCanvas ];

          var mapOptions = {
            container: canvas, // 必要，webgl画布
            appName: '蜂鸟研发SDK_2_0',
            key: '57c7f309aca507497d028a9c00207cf8',
          };

          //初始化地图对象
          fmap = new fengmap.FMMap(mapOptions);
        })
      })
    }).exec();

使用插件

需要在 app.js 定义全局数据。


import { fmMap } from './utils/fengmap.minimap.min.js';
import { fmAnalyser } from './utils/fengmap.minianalyser.min.js';
import { fmNavi } from './utils/fengmap.miniplugin.navi.min.js';

const fengmap = {
    ...fmMap,
    ...fmAnalyser,
    ...fmNavi,
}

App({
  onLaunch: function () {},
  globalData: {
    fengmap
  }
})

在使用页面:

const fengmap = getApp().globalData.fengmap;

注册事件

    Page({
        touchStart(e) {
        this.canvas.dispatchTouchEvent({
          ...e,
          type: 'touchstart'
        })
        },
        touchMove(e) {
        this.canvas.dispatchTouchEvent({
          ...e,
          type: 'touchmove'
        })
        },
        touchEnd(e) {
        this.canvas.dispatchTouchEvent({
          ...e,
          type: 'touchend'
        })
        }
    })

更多内容，请访问蜂鸟云开发者中心

FengMAP 微信小程序 SDK v3.1.8