React 显示 fengmap (锋鸟视图)

插件安装

npm install  fengmap --save

界面代码

import * as React from 'react';
import fengmap from 'fengmap';


interface  MapDemoState {

}

interface MapDemoProps {

}

export default class MapDemo extends React.Component<MapDemoProps,MapDemoState>{
    mapNode : HTMLDivElement
    constructor(props: MallZoomProps) {
        super(props)
        this.state = {
            loading: false
        }
    }
    componentDidMount() {
        this.setFengMap();
    }
    componentWillUnmount() {
    }

    setFengMap = () => {
        var fmapID = '10347'; //mapId
        var map = new fengmap.FMMap({
            //必要，地图容器
            container: this.chartNode,
            //地图数据位置
            mapServerURL: './data/' + fmapID,
            //主题数据位置
            mapThemeURL: './data/theme',
            //设置主题
            defaultThemeName: '2001',
            //初始二维/三维状态,默认3D显示
            defaultViewMode: fengmap.FMViewMode.MODE_3D,
            //必要，地图应用名称，通过蜂鸟云后台创建
            appName: '',
            //必要，地图应用密钥，通过蜂鸟云后台获取
            key: '',
            //默认比例尺级别设置为19级
            defaultMapScaleLevel: 19,        
        });
        //打开Fengmap服务器的地图数据和主题
        map.openMapById(fmapID);
    }

    render() {

        return <div >
            <div className="map" ref={(c) => this.mapNode = c}></div>
        </div>
    }
}

注意

1，appName、key：是必要，且通过蜂鸟后台创建可用

2，/data/ ：数据、主题所在文件（必须在站点根目录下/data/配置有）

显示效果图（数据文件，为蜂鸟视图官网测试数据文件）