1、使用react-create-app创建一个新的react项目
2、修改index.html,添加以下script引用:
3、创建一个组件文件MapDemo.js,内容如下
import React, { Component } from "react";
class WebMapDemo extends Component {
constructor(props) {
super(props);
}
componentDidMount(){
var map = new AMap.Map('container', {
viewMode: '3D',
pitch: 50,
zoom: 11,
center: [116.480766, 39.932931]
});
// 设置光照
map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);
map.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1);
var object3Dlayer = new AMap.Object3DLayer();
map.add(object3Dlayer);
new AMap.DistrictSearch({
subdistrict: 0, //返回下一级行政区
extensions: 'all', //返回行政区边界坐标组等具体信息
level: 'city' //查询行政级别为 市
}).search('朝阳区', function (status, result) {
var bounds = result.districtList[0].boundaries;
var height = 5000;
var color = '#0088ffcc'; // rgba
var prism = new AMap.Object3D.Prism({
path: bounds,
height: height,
color: color
});
prism.transparent = true;
object3Dlayer.add(prism);
var text = new AMap.Text({
text: result.districtList[0].name + '</br>(' + result.districtList[0].adcode + ')',
verticalAlign: 'bottom',
position: [116.528261, 39.934313],
height: 5000,
style: {
'background-color': 'transparent',
'-webkit-text-stroke': 'red',
'-webkit-text-stroke-width': '0.5px',
'text-align': 'center',
'border': 'none',
'color': 'white',
'font-size': '24px',
'font-weight': 600
}
});
text.setMap(map);
});
}
render() {
return (
<div id="container" style ={{width:"100%",height:"95%"}}>
</div>
);
}
}
export default WebMapDemo;
注意AMap类不是react中定义的类,会在运行时报错,因此需要参考我的另一篇随笔 《配合react-amap使用原生高德地图》, 将AMap类排除在eslint语法检查之外。
4、编写index.js,加载在3里编写的这个地图组件
import React from "react";
import ReactDOM from "react-dom";
import Map from "./MapDemo";
ReactDOM.render(
<div style ={{width:"100%",height:"100%"}}>
<Map />
</div>,
document.getElementById("root")
);
5、执行 npm start运行项目:
完工。
6 说明
为了讲清逻辑, 地图的创建和操作都写在了componentDidMount里面。各位自行进行性能优化。