引入文件
<script
type="text/javascript"
src="
http://iclient.supermap.io/web/libs/iclient8c/libs/SuperMap.Include.js"
></script>
<script
type="text/javascript"
src="
http://mapv.baidu.com/build/mapv.min.js"
></script>
<script
type="text/javascript"
src="
http://iclient.supermap.io/dist/classic/iclient-classic.js"
></script>
react代码
/**
* 事件中心-超图
* 作者: zhangjh
* 日期: 2019-11-26
*/
import { React, PureComponent } from 'framework/Util'
import '../scss/index.scss'
class MetroSuperMap extends PureComponent {
constructor(props) {
super(props)
this.state = {
mapUrl:
'
http://support.supermap.com.cn:8090/iserver/services/map-changchun/rest/maps/长春市区图'
// mapUrl: 'http://172.17.1.80:8090/iserver/'
}
this.map = ''
this.layer = ''
}
componentDidMount() {
this.init()
}
// 创建地图控件
init = () => {
const { SuperMap } = window
const { mapUrl } = this.state
console.log(new SuperMap.Map('map'), 'supermappppp')
this.map = new SuperMap.Map('map', {
controls: [
new SuperMap.Control.Navigation(),
new SuperMap.Control.Zoom()]
})
this.map.addControl(new SuperMap.Control.MousePosition())
// 创建分块动态REST图层，该图层显示iserver 8C 服务发布的地图,
// 其中"world"为图层名称，url图层的服务地址，{transparent: true}设置到url的可选参数
this.layer = new SuperMap.Layer.TiledDynamicRESTLayer(
'World',
mapUrl,
null,
{ maxResolution: 'auto' }
)
this.layer.events.on({ layerInitialized: this.addLayer })
};
addLayer = () => {
const { SuperMap } = window
// 将Layer图层加载到Map对象上
this.map.addLayer(this.layer)
// 出图，map.setCenter函数显示地图
this.map.setCenter(new SuperMap.LonLat(104, 34.7), 2)
};
render() {
return (
<React.Fragment>
<div
id="map"
/>
</React.Fragment>
)
}
}
// MetroSuperMap.PropTypes = {
// mapData: PropTypes.object,
// }
MetroSuperMap.defaultProps = {
// mapData: {}
}
export default MetroSuperMap
