React-mapbox-gl 开发

参考：alex3165 / react-mapbox-gl

 

一个简单的例子:

import React,{Component} from 'react';
import ReactMapboxGl, { Source,Layer, Feature } from 'react-mapbox-gl';
import { ScaleControl } from "react-mapbox-gl";
import { ZoomControl } from "react-mapbox-gl";
import { RotationControl } from "react-mapbox-gl";
import { Popup } from "react-mapbox-gl";
import { Marker } from "react-mapbox-gl";
import './mapbox-gl.css';

 
const Map = ReactMapboxGl({
    accessToken:'null',
    maxZoom:22,
    hash : true,
});

 
class MapGl extends Component {
    render () {
        const newStyle = 'http://192.168.1.8:8080/statics/basic-mb.json';        
        return (
            <Map
                style= { newStyle }
                containerStyle={{
                    height: '100vh',
                    width: '100vw'
                }}
                center = {[113.698,23.25478]}
                zoom = {[4]}
            >
                <Layer type="symbol" id="marker" layout={{ 'icon-image': 'marker-15' }}>
                    <Feature coordinates={[113.2547, 23.3233379650232]} />
                </Layer>
                <ZoomControl 
                  position = {'top-left'}
                />
                <ScaleControl 
                  position = {'bottom-left'}
                />
                <RotationControl 
                  position = {'top-left'}
                />
                <Popup
                  coordinates={[113.2547,23.2587]}>               
                  <h1>Popup</h1>
                </Popup>
                <Marker
                  coordinates={[113.369, 23.1478]}
                  anchor="bottom">
                  <img src={''}/>
                </Marker>
            </Map>
        )
    }
}
 
export default MapGl;