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/配置有）

 

顯示效果圖（數據文件，為蜂鳥視圖官網測試數據文件）