作者：lly
一、环境配置
1.node.js安装略
2.安装create-react-app
cnpm install -g create-react-app
3.新建项目
create-react-app my-react
4.安装完后，进入相应目录下，运行项目
npm start
二、模块化引入iClient
1.安装相应模块
cnpm install @supermap/iclient-leaflet
2.我们找到入口页面index.html,以CDN方式引入css样式文件，地址可在开发指南中查找；设置body样式，并删除模板中无用的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" />
<link rel="stylesheet" href="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.min.css" />
</head>
<body style="margin: 0;padding: 0;width: 100%;height:100%">
<div id="root"></div>
</body>
</html>
3.修改App.js
import React from 'react'
import L from 'leaflet';
import '@supermap/iclient-leaflet';
class App extends React.Component{
componentDidMount(){
var url = "http://localhost:8090/iserver/services/map-world/rest/maps/World";
var map = L.map('map', {
crs: L.CRS.EPSG4326,
center: [0, 0],
maxZoom: 18,
zoom: 1
});
L.supermap.tiledMapLayer(url).addTo(map);
}
render(){
return <div id="map" style={
{margin: '0',height:'100%',position: 'absolute',width:'100%'}}></div>;
}
}
export default App;