react-fmap

react-fmap

fengmap for react

Using

• install

npm i react-fmap

• using in react

import FMap from 'react-fmap';
class App extends Component {
 render() {
 	const mapProps = {
 		fmapID: 'wafer-beijing',
 			appName:'北京威发新世纪',
 			mapKey:'3e7dba2418ac46e1af5a1abf17082db2',
 			height: 'calc(100vh - 254px)'
 		};

 		return (
 			<div className="App">
 				<FMap {...mapProps}/>
 			</div>
 		);
 	}
}

notice: mapKey is key of FengMap.

Props

Prop	default value	is required	description
url	dome url	false	fengmap.min.js
fmapID		true	feng map id
appName		false	application name
mapKey		true	feng map key
onClick		false	a callback for click map
className		false	map mount dom's class name
width		false	map mount dom's width
height		false	map mount dom's height
defaultViewMode	top	false	3d or 2d, value of ['3d', 'top']
mapOptions		false	new FMMap's other props
textMarkers	[]	false	text marker eg: {x, y, name[, z, ...]}
imageMarkers	[]	false	image marker eg: {x, y, url[, z, ...]}
toolControl	null	false	map control tool. eg: 2d or 3d tool
controlOptions	null	false	map control options, eg: position or offset
offLineOptions	object	false	off line map props
popMarkers	null	false	pop marker. props is controlOptions.
initialPosition	null	false	initial move to position.
loadComplete	null	false	map load complete function.
drawNaviLines	null	false	[{lineStyle, startPoint, endPoint}]
rotate	0	false	set map rotate angle
mapServerURL		false	set map server url
mapThemeURL		false	set map theme url
defaultThemeName		false	set map theme name

offLineOptions

	offLineOptions: {
		mapServerURL: '',
		mapThemeURL: '',
		defaultThemeName: ''
		[,
		...other props
		]
	}

function

name	props	return	description
setViewMode	mode: string ['top', '3d']	this.map	return fengmap object
setTheme	themeName: string	void	set map theme name
setPopMarker	options: {}	popMarker	pop mark on map. call popMarker.close() close pop marker
getSearchReq	(request, callback)	Array: FMap	search map. request is object.eg: {ID: ''}
onNavigation	options: {}	FMap	get navigation object
onMapFunction	name[, options]	null	apply map function

add text marker

	this.map.getSearchReq({ID: 61}, v => {
		this.map.addTextMarker([{
		x: 12958819.3,
		y: 4852556.59,
		z: 0,
		name: '3F04'
		}], v.groupID);
	});

add image marker

 this.map.addImageMarker([{
		x:  12958819.3,
		y: 4852556.59,
		z: 0,
		name: '3F01',
		url: '/static/media/logo.5d5d9eef.svg'
	}], v.groupID);

onMapFunction

	this.map.onMapFunction('moveTo', {x: 12958819.3, y: 4852556.59, groupID: 1, z: 0});

fengmap.min.js

if localize fengmap.min.js, then copy `node_modules/react-fmap/js/fengmap.min.js` to src(or can reach at a dir).

then set `url`.