![参考01中的准备工作](https://i-blog.csdnimg.cn/blog_migrate/fe081bccf01dc31b726fca8fbfb0ecb8.png)
1. 先按照01中流程确定你已经创建出了一个能够正常展示的OL,有环境后可直接cv以下绘图操作 效果如下
- 实现效果:
![绘制点线面](https://i-blog.csdnimg.cn/blog_migrate/901c8b8d5e05756e938d2b01097fd7c2.png)
- style样式部分
<!-- 绘制几何图形 -->
<div id="container">
<!-- 绘制几何图形 -->
<div id="menu">
<label>几何图形类型: </label>
<select id="type">
<option value="None">无</option>
<option value="Point">点</option>
<option value="LineString">线</option>
<option value="Polygon">多边形</option>
<option value="Circle">圆</option>
<option value="Square">正方形</option>
<option value="Box">长方形</option>
</select>
</div>
</div>
</div>
- vue方法部分
<script>
import "ol/ol.css";
import ol from "openlayers";
export default {
methods: {
initMap() {
var map = new ol.Map({
target: "container",
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=0c37299462312e175cab9628d29c7563",
}),
visible: true,
}),
],
view: new ol.View({
center: [0, 0],
zoom: 3,
}),
});
var typeSelect = document.getElementById("type");
var draw;
var source = new ol.source.Vector();
var vectorLayer = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: "rgba(255, 255, 255, 0.2",
}),
stroke: new ol.style.Stroke({
color: "#ffcc33",
width: 2,
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: "#ffcc33",
}),
}),
}),
});
map.addLayer(vectorLayer);
typeSelect.onchange = function (e) {
map.removeInteraction(draw);
addInteraction();
};
function addInteraction() {
var typeValue = typeSelect.value;
if (typeValue !== "None") {
var geometryFunction, maxPoints;
if (typeValue === "Square") {
typeValue = "Circle";
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
} else if (typeValue === "Box") {
typeValue = "LineString";
maxPoints = 2;
geometryFunction = function (coordinates, geometry) {
if (!geometry) {
geometry = new ol.geom.Polygon(null);
}
var start = coordinates[0];
var end = coordinates[1];
geometry.setCoordinates([
[start, [start[0], end[1]], end, [end[0], start[1]], start],
]);
return geometry;
};
}
console.log(typeValue);
draw = new ol.interaction.Draw({
source: source,
type: typeValue,
geometryFunction: geometryFunction,
maxPoints: maxPoints,
});
map.addInteraction(draw);
} else {
source.clear();
}
}
},
gotoMenu() {
this.$router.replace("/screenage/Fenbianlv");
},
},
mounted() {
this.initMap();
},
};
</script>