在工作中经常会用到绘画这个功能,记录一下
openlayers绘画,平时用的还是比较多,先来看看官网的案例,哦,对了,推荐大佬文章 @必意玲 https://blog.csdn.net/qq_36410795/category_9793027.html 感谢大佬用爱发电,大佬的文章可以解决我90%的开发需求,也是希望看过大佬文章之后再看这个,食用更加哦,那下面就开始地图的绘画。
html代码如下(示例):
<div id="map" class="map"></div>
<form class="form-inline">
<label for="type">Geometry type </label>
<select id="type">
// Point 点
<option value="Point">Point</option>
// LinString 线
<option value="LineString">LineString</option>
// Polygon 面
<option value="Polygon">Polygon</option>
// Circle 圆
<option value="Circle">Circle</option>
</select>
</form>
js代码如下(示例):
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
import {Draw, Modify, Snap} from 'ol/interaction';
import {OSM, Vector as VectorSource} from 'ol/source';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
const raster = new TileLayer({
source: new OSM(),
});
// 这个就是绘画的图层
const source = new VectorSource();
const vector = new VectorLayer({
source: source,
style: new Style({
fill: new Fill({
color: 'rgba(255, 255, 255, 0.2)',
}),
stroke: new Stroke({
color: '#ffcc33',
width: 2,
}),
image: new CircleStyle({
radius: 7,
fill: new Fill({
color: '#ffcc33',
}),
}),
}),
});
// 初始化一个地图,将绘画的图层也放入map里面
// 当然map.addlyaers(raster) 这种添加图层的方式也是可以的哦
const map = new Map({
layers: [raster, vector],
target: 'map',
view: new View({
center: [-11000000, 4600000],
zoom: 4,
}),
});
// 哎,这个就牛了,Modify,修改
// 画完之后你觉得不太完美,这个就可以修改,当然它你也可以去openlayer看看它的介绍
const modify = new Modify({source: source});
// 好的,在map上添加修改这个方法
map.addInteraction(modify);
let draw, snap;
const typeSelect = document.getElementById('type');
// 绘画的方法,叫做Draw,这里只有source和type两种方法,你可以在openlayers文档看到更多的方法。我就不写了,以防你懒得不练.
function addInteractions() {
draw = new Draw({
// source 数据源
source: source,
// type 你所画的是类型,点,线,面,圆。
type: typeSelect.value,
});
// 在地图上添加绘画的功能用的是addInteraction
map.addInteraction(draw);
// 这个是吸附功能,帮助你绘画的
snap = new snap({source: source});
// 将它添加到map上
map.addInteraction(snap);
}
// 上面css选择时,清除掉当前页面上的方法
typeSelect.onchange = function () {
// removeInteraction移除掉这个方法,在openlayer中你可以看到很多remove的方法
map.removeInteraction(draw);
map.removeInteraction(snap);
addInteractions();
};
addInteractions(); // 执行添加的这个方法
官方啊就是官方,一个字,细,两个字,很细
开发当然是用vue了,ok,开始
代码如下(示例):
data() {
return {
map: null,
drawSource: null,
}
},
mounted() {
// 初始化一个地图
this.initMap()
// 初始化绘画图层
this.drawLayer()
// 绘画方法
this.drawMethod()
},
methods: {
initMap() {
const raster = new TileLayer({
source: new OSM()
});
this.map = new Map({
layers: [raster],
target: 'map',
view: new View({
center: [-11000000, 4600000],
zoom: 4,
}),
});
},
drawLayer() {
this.drawSource = new VectorSource();
let vector = new VectorLayer({
source: this.drawSource,
style: new Style({
fill: new Fill({
color: 'rgba(255, 255, 255, 0.2)',
}),
stroke: new Stroke({
color: '#ffcc33',
width: 2,
}),
image: new CircleStyle({
radius: 7,
fill: new Fill({
color: '#ffcc33',
}),
}),
}),
});
this.map.addLayer(vector)
},
drawMethod() {
let draw = new Draw({
source: this.drawSource,
type: this.$refs.type.value,
});
this.map.addInteraction(draw);
let snap = new Snap({source: this.drawSource});
this.map.addInteraction(snap);
const modify = new Modify({source: this.drawSource});
this.map.addInteraction(modify);
this.$refs.type.addEventListener("change", () => {
this.map.removeInteraction(draw);
this.map.removeInteraction(snap);
this.drawMethod()
})
}
}
我写的话,差不多就是这样子吧,时间不早了,就先凑合着吧,下次完善一下它的功能,加一些取消绘画,绘画的样式,绘画的条件(比如只能在某个地方绘画)等。
总结就是,天行健,君子以自强不息。顺势而为,不要勉强。该工作就工作,想睡觉就睡觉,就酱~