WEBGIS使用OpenLayers3中Interaction绘制长方形和正方形

//绘制长方形
function drawRectangle() {
//设置maxPoints及geometryFunction
var maxPoints, geometryFunction;
maxPoints = 2;
geometryFunction = function (coordinates, geometry) {
if (!geometry) { //!geometry 意思是如果没有geometry则...
geometry = new ol.geom.Polygon();
}
//设置起始点及终止点
var start = coordinates[0];
var end = coordinates[1];
geometry.setCoordinates([
[start, [start[0], end[1]], end, [end[0], start[1]], start] //特别注意，长方形终止点与起始点重合
]);
return geometry;
};
//新建source和layer
var source = new ol.source.Vector({
wrapX: false,
});
var layer = new ol.layer.Vector({
source: source
});
//新建绘制长方形interaction
var drawRectangle = new ol.interaction.Draw({
source: source,
type: "LineString",
geometryFunction: geometryFunction,
maxPoints: maxPoints
});
//将layer和interaction添加到地图中
map.addLayer(layer);
map.addInteraction(drawRectangle);
}

//绘制正方形 ***成功
function addSquare() {
//新建source和layer
var source = new ol.source.Vector({
wrapX: false,
});
var layer = new ol.layer.Vector({
source: source
});
//设置maxPoints及geometryFunction
var maxPoints, geometryFunction;
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
//新建绘制正方形interaction
var drawSquare = new ol.interaction.Draw({
source: source,
type: "Circle",
geometryFunction: geometryFunction,
//maxPoints: maxPoints
});
//将layer和interaction添加到地图上
map.addLayer(layer);
map.addInteraction(drawSquare);
}

WEBGIS使用OpenLayers3中Interaction绘制长方形和正方形相关推荐

java 绘制长方形_Java基础之在窗口中绘图——绘制直线和矩形（Sketcher 2 drawing lines and rectangles）...
控制台程序. import javax.swing.JComponent; import java.util.*; import java.awt.*; import java.awt.geom.*; ...
【学习笔记之Openlayers3】要素绘制篇（第三篇）
直接以项目实例来进行讲解要素绘制需求(假如): 1.实现在地图上画点线面功能 2.自定义其样式 3.支持编辑功能需要用到的openlayers3中的ol.interaction.Draw 类.这是 ...
lisp倒入excel数据画图_如何将EXCEL中的数据导入到CAD中，绘制成曲线|
如何将EXCEL中的数据导入到CAD中,绘制成曲线如果不用软件,只用CAD自身功能的话可以通过多段线生成你需要的曲线.你给出你的曲线函数,我给你生成曲线坐标以及CAD能自动绘制的文件格式怎样将ca ...
python使用matplotlib可视化折线图、在可视化图像中同时绘制多条折线图
python使用matplotlib可视化折线图.在可视化图像中同时绘制多条折线图目录 python使用matplotlib可视化折线图.在可视化图像中同时绘制多条折线图
Android中View绘制流程以及invalidate()等相关方法分析
...
openLayers3 中实现多个Overlay
openLayers3 中实现多个Overlay 此篇的目的是为了记录下用Overlay的一些操作. 其实实现多个就是创建多个div,然后给每个div绑定Overlay. 1 //页面加载完函数 -- ...
成功解决利用matplotlib.pyplot进行绘图的时候整个画布中的绘制曲线只显示一部分
成功解决利用matplotlib.pyplot进行绘图的时候整个画布中的绘制曲线只显示一部分目录解决问题解决思路解决方法解决问题利用matplotlib.pyplot进行绘图的时候整个画布 ...
OpenCV 中的绘制功能
本文主要内容来自于 OpenCV-Python 教程的 OpenCV 中的 GUI 功能部分,这个部分的主要内容如下: 图像操作入门学习加载一幅图像,显示它,并保存它视频入门学习播放视频,从 ...
qt中实现绘制图形与截图
引言实现可以选择线型,线宽,颜色,是否填充图形来绘制各种常见的图形,同时可以选择矩形区域来实现截图. 效果绘图的效果如上,截图的效果: 实现项目使用的qt5.13.2,编译器为MSVC2017_ ...

WEBGIS使用OpenLayers3中Interaction绘制长方形和正方形

WEBGIS使用OpenLayers3中Interaction绘制长方形和正方形相关推荐

最新文章

热门文章