import { Feature } from "ol"
import { Circle as CircleStyle, Fill, Stroke, Style, Icon } from 'ol/style'
import { Draw, Modify, Snap } from 'ol/interaction'
import { Vector as VectorSource } from 'ol/source'
import { Vector as VectorLayer } from 'ol/layer'
import GeoJSON from "ol/format/GeoJSON"
import { boundingExtent } from 'ol/extent'
import { Point } from 'ol/geom'
`// 初始化
init (type) {
`//type为绘制类型``
//清除次图层
if (_that.iconLayer) {
}
// 移除绘制方法
Map.removeInteraction(_that.draw)
Map.removeInteraction(_that.snap)
// 创建矢量容器
_that.source = new VectorSource()
//创建矢量层
_that.iconLayer = new VectorLayer({
})
//创建绘制修改工具
const modify = new Modify({ source: _that.source })
//添加
Map.addInteraction(modify)
//绑定修改绘制图形触发事件
modify.on('modifyend', this.ModifyIconEnd)
//添加绘制工具
_that.addInteractions()
_that.draw = new Draw({
})
// 此方法用于保存拓扑关系
_that.snap = new Snap({ source: _that.source })
// 添加
Map.addInteraction(_that.draw)
Map.addInteraction(_that.snap)
// 监听绘制结束事件
_that.draw.on("drawend", (evt) =>{
// 获取绘制图形,其余同修改时处理数据
let featureGeoJson = new GeoJSON().writeFeature(evt.feature)
})
//图层添加至地图
Map.addLayer(_that.iconLayer)
},
//样式函数
styleFunction (feature) {
const styles = [
]
// 此处添加箭头样式,绘制线绘制箭头
if (this.type == 'LineString' &&this.operate == 'arrow') {
}
//返回样式
return styles
},
// 修改图形
ModifyIconEnd (evt) {
const _that = this
// 获取修改后的图形,并保存
let featureGeoJson = new GeoJSON().writeFeature(evt.features.array_[0])
this.featureData = featureGeoJson
//绘制为圆时,无法通过geoJson回显,获取半径和中点回显
if (_that.type == 'Circle') {
// 圆的半径换算
}
//绘制线段取绘制次序中点备用
else if (_that.type == 'LineString') {
}
//绘制区域时获取其中点
else if (_that.type == 'Polygon') {
//获取边界值
}
},
通常需要在地图上标注出一些景点、建筑或者公共设施,可以选择使用矢量标注或者聚合标注。openlayers 添加矢量标注的原理是将标注添加到一个新建的矢量层上,再将矢量层添加到地图上叠加显示;聚合标注的原理同上,但它适用于标注的数据量非常大的场景,随着层级的放大,会展示更多的标注,缩小时,则将标注聚合显示,能够在大量加载标注时提高渲染性能。
1、矢量标注
2、聚合标注
openlayers 可以创建一个 Overlay 覆盖层,这个覆盖层能够展示自己写的 html 内容,从而实现添加各种所需的覆盖物。也可以通过这个方法来添加标注,但覆盖层添加的覆盖物会影响地图的拖动(即在覆盖物上进行滑动 *** 作时地图无法响应,虽然可以通过设置 stopEvent 将滑动事件传递到地图上,但这样会导致在IOS端的覆盖物无法进行点击 *** 作)。
因此如果要添加可以点击并且不影响地图拖动的标注时,建议使用矢量层标注,而如果要展示自定义的一些内容,如点击地图d出对话信息框、地图上的自定义按钮等则使用覆盖层更加合适。
1、加载覆盖层
2、添加地图点击监听事件
原理大致与添加矢量标注相同,都是添加在矢量图层上,不过这里添加的是线对象。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)