一、引入依赖的库文件
// 设置地图背景色
import React, { Component } from 'react';
import Map from '../../component/map/map';
// 数据源
import { Vector as VectorSource } from 'ol/source';
// 图层
import { Vector} from 'ol/layer';
// 要素
import Feature from 'ol/Feature';
//
import {Point} from 'ol/geom';
// 坐标系转化
import {fromLonLat} from 'ol/proj';
// 样式
import {Icon,Style,Text,Fill,Stroke} from 'ol/style';
// mark标注图片
import AddMarkerpng from '../../assets/Marker.png'
二、加载地图组件
render() {
return (
<div >
{/* <img src={bg}></img> */}
<button onClick={this.addMarker}>点击开始添加标注</button>
<Map ref="map" center={{ lon: 113.8, lat: 34.6 }} />;
</div>
);
}
三、地图的渲染和文字标注的添加
componentDidMount() {
let {map} = this.refs.map
//创建标注要素
let markFeature = new Feature({
// 几何信息
geometry: new Point(fromLonLat([116.28, 39.54])),
// 名称属性
name: '标注点'
})
//设置图标的样式
markFeature.setStyle(this.setMakerStyle(markFeature))
// 创建标注的数据源
var vectorSource = new VectorSource({
features: [markFeature]
});
// 创建标注图层
var vectorLayer = new Vector({
source: vectorSource
});
// 将标注图层添加到地图上
map.addLayer(vectorLayer);
this.setState({
vectorSource
})
}
四、全部代码
// 设置地图背景色
import React, { Component } from 'react';
import Map from '../../component/map/map';
// 数据源
import { Vector as VectorSource } from 'ol/source';
// 图层
import { Vector} from 'ol/layer';
// 要素
import Feature from 'ol/Feature';
//
import {Point} from 'ol/geom';
// 坐标系转化
import {fromLonLat} from 'ol/proj';
// 样式
import {Icon,Style,Text,Fill,Stroke} from 'ol/style';
// mark标注图片
import AddMarkerpng from '../../assets/Marker.png'
class AddMarkerLable extends Component {
constructor(props){
super(props)
this.state={
}
}
componentDidMount() {
let {map} = this.refs.map
//创建标注要素
let markFeature = new Feature({
// 几何信息
geometry: new Point(fromLonLat([116.28, 39.54])),
// 名称属性
name: '标注点'
})
//设置图标的样式
markFeature.setStyle(this.setMakerStyle(markFeature))
// 创建标注的数据源
var vectorSource = new VectorSource({
features: [markFeature]
});
// 创建标注图层
var vectorLayer = new Vector({
source: vectorSource
});
// 将标注图层添加到地图上
map.addLayer(vectorLayer);
this.setState({
vectorSource
})
}
addMarker = ()=>{
let {map} = this.refs.map
let that = this
//鼠标单击事件
map.on('singleclick', function (e) {
console.log(e)
// alert("鼠标被单击了"+e.coordinate);
that.addMakerOn(e.coordinate)
});
}
addMakerOn = (coordinate)=>{
//创建标注要素
let markFeature = new Feature({
// 几何信息
geometry: new Point(coordinate),
// 名称属性
name: '标注点'
})
//设置图标的样式
markFeature.setStyle(this.setMakerStyle(markFeature))
// 图标要素添加到数据源上
this.state.vectorSource.addFeature(markFeature)
}
setMakerStyle=(feature)=>{
return new Style({
text: new Text({
//位置
textAlign: 'center',
//基准线
textBaseline: 'middle',
//文字样式
font: 'normal 14px 微软雅黑',
//文本内容
text: feature.get('name'),
//文本填充样式（即文字颜色）
fill: new Fill({ color: '#aa3300' }),
stroke: new Stroke({ color: '#ffcc33', width: 2 })
})
})
}
render() {
return (
<div >
{/* <img src={bg}></img> */}
<button onClick={this.addMarker}>点击开始添加标注</button>
<Map ref="map" center={{ lon: 113.8, lat: 34.6 }} />;
</div>
);
}
}
export default AddMarkerLable;
五、效果题
|
|
收藏
淘帖
踩
