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`.

wafersystems / react-fmap Goto Github PK

react-fmap's Introduction

react-fmap

Using

Props

offLineOptions

function

add text marker

add image marker

onMapFunction

fengmap.min.js

react-fmap's People

Contributors

Stargazers

Watchers

Forkers

react-fmap's Issues

Recommend Projects

Recommend Topics

Recommend Org