OpenLayers之图形交互绘制
一、实验内容
- 回顾鼠标事件及事件对象，练习鼠标坐标获取；
- 点、线、面、圆等常规图形的交互绘制；
- 点、线、面、圆等常规图形的样式编辑；
- 点、线、面、圆等常规图形编辑；
二、实验步骤
2.1 鼠标坐标获取
<html>
<head>
<meta charset="utf-8">
<title>实时获得鼠标屏幕坐标</title>
<style>
html,
body {
height: 100%;
}
#mymap {
width: 100%;
height: 95%;
position: absolute;
background-color: ghostwhite;
}
</style>
<script>
function getCoordinate(e) {
let x = e.clientX;
let y = e.clientY;
document.getElementById("showcoor").innerHTML = "鼠标坐标值:(" + x + "," + y + ")";
}
function clearCoordinates() {
document.getElementById("showcoor").innerHTML = "显示坐标值";
}
function getCoordinate1(e) {
let x = e.screenX;
let y = e.screenY;
document.getElementById("showcoor1").innerHTML = "鼠标坐标值:(" + x + "," + y + ")";
}
</script>
</head>
<body>
<div id="showcoor">鼠标移动时的坐标值</div>
<div id="showcoor1">鼠标单击时的坐标值</div>
<div id="mymap" onmousemove="getCoordinate(event)" onmouseout="clearCoordinates()"
onmousedown="getCoordinate1(event)"></div>
</body>
</html>
2.2 利用HTML5 Canvas绘制点线面
html文件：
<html>
<head>
<meta charset="utf-8">
<title>canvas绘制图形</title>
<script src="02.js"></script>
<style>
html,
body {
height: 100%;
}
#map {
z-index: 10;
position: absolute;
background-color: ghostwhite;
border: 1px solid;
}
#menuf {
position: absolute;
top: 30px;
left: 20px;
z-index: 11;
}
.btn {
background-color: rgba(0, 60, 136, .5);
display: block;
margin: 1px;
padding: 0;
color: #fff;
font-size: 1.14em;
text-decoration: none;
text-align: center;
height: 1.375em;
width: 1.375em;
line-height: .4em;
border: none;
border-radius: 0 0 2px 2px;
float: left;
}
</style>
</head>
<body>
<div id="menu">
<button id="lineBtn" class="btn" onclick="drawLine()">线</button>
<button id="rectBtn" class="btn" onclick="drawRect()">面</button>
<button id="defaultBtn" class="btn" onclick="drawDefault()">乱</button>
<button id="eraserBtn" class="btn" onclick="drawEraser()">消</button>
</div>
<canvas id="map" width="1000" height="600"></canvas>
</body>
</html>
JavaScript文件：
window.onload = function () {
var canvas = document.getElementById("map");
if (canvas.getContext) {
var context = canvas.getContext('2d');
}
canvas.drawing = function (x1, y1, x2, y2, e) {
let self = this;
if (!context) {
return;
} else {
//设置画笔的颜色和大小
context.fillStyle = "red";
context.strokeStyle = "blue";
context.lineWidth = 2;
context.save();
context.beginPath();
if (self.rectFlag) {
self.initCanvas();
if (e.shiftKey === true) {
let d = ((x2 - x1) < (y2 - y1)) ? (x2 - x1) : (y2 - y1);
context.fillRect(x1, y1, d, d);
}
else {
context.fillRect(x1, y1, x2 - x1, y2 - y1);
}
}
else if (self.lineFlag) {
self.initCanvas();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
}
else if (self.eraserFlag) {
//橡皮擦
context.arc(x1, y1, 10, 0, 2 * Math.PI);
context.clip();
context.clearRect(0, 0, canvas.width, canvas.height);
self.X1 = self.X2;
self.Y1 = self.Y2;
} else {
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
self.X1 = self.X2;
self.Y1 = self.Y2;
}
context.restore();
context.closePath();
}
};
canvas.onmousedown = function mouseDownAction(e) {
let self = this;
self.X1 = e.offsetX;
self.Y1 = e.offsetY;
self.isMouseDown = true;
self.loadImage();
};
canvas.onmousemove = function mouseMoveAction(e) {
let self = this;
if (self.isMouseDown) {
self.X2 = e.offsetX;
self.Y2 = e.offsetY;
self.drawing(self.X1, self.Y1, self.X2, self.Y2, e);
}
};
canvas.onmouseup = function mouseUpAction(e) {
let self = this;
self.lastImage = canvas.toDataURL('image/png ');
self.isMouseDown = false;
};
canvas.loadImage = function () {
let self = this;
let img = new Image();
img.src = self.lastImage;
context.drawImage(img, 0, 0, canvas.width, canvas.height);
}
canvas.initCanvas = function () {
context.clearRect(0, 0, canvas.width, canvas.height);
canvas.loadImage();
}
}
var initDraw = function (flag) {
document.getElementById("map").rectFlag = false;
document.getElementById("map").lineFlag = false;
document.getElementById("map").eraserFlag = false;
document.getElementById("map")[flag] = true;
//默认背景色
document.getElementById("defaultBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("lineBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("rectBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("eraserBtn").style.background = "rgba(0,60,136,.5)";
};
var drawDefault = function () {
initDraw();
document.getElementById("defaultBtn").style.background = "#22A6F2";
document.getElementById("defaultBtn").style.color = "#eee";
};
var drawLine = function () {
initDraw("lineFlag");
document.getElementById("lineBtn").style.background = "#22A6F2";
document.getElementById("lineBtn").style.color = "#eee";
}
var drawRect = function () {
initDraw("rectFlag");
document.getElementById("rectBtn").style.background = "#22A6F2";
document.getElementById("rectBtn").style.color = "#eee";
}
var drawEraser = function () {
initDraw("eraserFlag");
document.getElementById("eraserBtn").style.background = "#22A6F2";
document.getElementById("eraserBtn").style.color = "#eee";
};
2.3 利用OL绘制点线面
html文件：
<html>
<head>
<meta charset="utf-8">
<title>OL绘制图形</title>
<link rel="stylesheet" type="text/css" href="./v6.5.0-dist/ol.css" />
<script src="./v6.5.0-dist/ol.js"></script>
<script src="./03.js"></script>
<style>
html,
body {
height: 100%;
}
#map {
width: 100%;
height: 99%;
z-index: 10;
}
#menu {
position: absolute;
top: 20px;
left: 50px;
z-index: 11;
}
.btn {
background-color: rgba(0, 60, 136, .5);
display: block;
margin: 1px;
padding: 0;
color: #fff;
font-size: 1.14em;
text-decoration: none;
text-align: center;
height: 1.375em;
width: 1.375em;
line-height: .4em;
border: none;
border-radius: 0 0 2px 2px;
float: left;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="menu">
<button id="pointBtn" class="btn" onclick="drawPoint()">点</button>
<button id="lineBtn" class="btn" onclick="drawLine()">线</button>
<button id="polygonBtn" class="btn" onclick="drawPolygon()">面</button>
<button id="squareBtn" class="btn" onclick="drawSquare()">正</button>
<button id="recBtn" class="btn" onclick="drawRec()">长</button>
<button id="circleBtn" class="btn" onclick="drawCircle()">圆</button>
<button id="starBtn" class="btn" onclick="drawStar()">星</button>
<button id="eraserBtn" class="btn" onclick="drawEraser()">清</button>
</div>
</body>
</html>
JavaScript文件：
var draw;
var map;
var source;
var vector;
window.onload = function () {
map = new ol.Map({
layers: [
new ol.layer.Tile({
title: "天地图矢量图层",
source: new ol.source.OSM(),
preload: Infinity
})
],
target: 'map',
view: new ol.View({
//地图初始中心点
center: [12000000, 4000000],
minZoom: 2,
zoom: 3
})
});
source = new ol.source.Vector({ wrapX: true });
vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,1)'
}),
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ff0000'
})
})
})
})
//将绘制层添加到地图容器中
map.addLayer(vector);
};
function addInteraction(typevalue) {
if (typevalue !== 'None') {
if (source == null) {
source = new ol.source.Vector({ wrapX: true });
//添加绘制层数据源
vector.setSource(source);
}
var geometryFunction, maxPoints,minPoints=1;
if (typevalue === 'Square') {
typevalue = 'Circle';
//正方形图形（圆)
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
}
else if (typevalue === 'Box') {
typevalue = 'Circle';
geometryFunction = new ol.interaction.Draw.createBox();
} else if (typevalue === 'Star') {
typevalue = 'Circle';
geometryFunction = function (coordinates, geometry) {
var center = coordinates[0];
var last = coordinates[coordinates.length - 1];
var dx = center[0] - last[0];
var dy = center[1] - last[1];
var radius = Math.sqrt(dx * dx + dy * dy);
var rotation = Math.atan2(dy, dx);
var newCoordinates = [];
var numPoints = 12;
for (var i = 0; i < numPoints; ++i) {
var angle = rotation + (i * 2 * Math.PI) / numPoints;
var fraction = i % 2 === 0 ? 1 : 0.5;
var offsetX = radius * fraction * Math.cos(angle);
var offsetY = radius * fraction * Math.sin(angle);
newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
}
newCoordinates.push(newCoordinates[0].slice());
if (!geometry) {
geometry = new ol.geom.Polygon([newCoordinates]);
} else {
geometry.setCoordinates([newCoordinates]);
}
return geometry;
};
}
draw = new ol.interaction.Draw({
source: source,
type: typevalue,
//几何信息变更时调用函数
geometryFunction: geometryFunction,
//最大点数
maxPoints: maxPoints,
minPoints:minPoints
});
map.addInteraction(draw);
}
else {
source = null;
vector.setSource(source);
}
}
var initDraw = function () {
map.removeInteraction(draw);
//默认背景色
document.getElementById("polygonBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("lineBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("circleBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("pointBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("eraserBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("squareBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("recBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("starBtn").style.background = "rgba(0,60,136,.5)";
};
var drawPoint = function () {
initDraw();
//添加交互绘制功能控件
addInteraction("Point");
document.getElementById("pointBtn").style.background = "#22A6F2";
document.getElementById("pointBtn").style.color = "#eee";
};
var drawLine = function () {
initDraw();
addInteraction("LineString");
document.getElementById("lineBtn").style.background = "#22A6F2";
document.getElementById("lineBtn").style.color = "#eee";
};
var drawPolygon = function () {
initDraw();
//添加交互绘制功能控件
addInteraction("Polygon");
document.getElementById("polygonBtn").style.background = "#22A6F2";
document.getElementById("polygonBtn").style.color = "#eee";
};
var drawCircle = function () {
initDraw();
//添加交互绘制功能控件
addInteraction("Circle");
document.getElementById("circleBtn").style.background = "#22A6F2";
document.getElementById("circleBtn").style.color = "#eee";
};
var drawSquare = function () {
initDraw();
//添加交互绘制功能控件
addInteraction("Square");
document.getElementById("squareBtn").style.background = "#22A6F2";
document.getElementById("squareBtn").style.color = "#eee";
};
var drawRec = function () {
initDraw();
addInteraction("Box");
document.getElementById("recBtn").style.background = "#22A6F2";
document.getElementById("recBtn").style.color = "#eee";
};
var drawStar = function () {
initDraw();
//添加交互绘制功能控件
addInteraction("Star");
document.getElementById("starBtn").style.background = "#22A6F2";
document.getElementById("starBtn").style.color = "#eee";
};
var drawEraser = function () {
initDraw();
source.clear();
document.getElementById("eraserBtn").style.background = "#22A6F2";
document.getElementById("eraserBtn").style.color = "#eee";
};
2.4 常规图形的样式编辑
html文件：
<html>
<head>
<meta charset="utf-8">
<title>OL绘制图形-样式</title>
<link rel="stylesheet" type="text/css" href="./v6.5.0-dist/ol.css" />
<link href="./04.css" rel="stylesheet" />
<script src="./v6.5.0-dist/ol.js"></script>
<script src="./04.js "></script>
<style>
html,
body {
height: 100%;
}
#map {
width: 100%;
height: 99%;
z-index: 10;
}
#menu {
position: absolute;
top: 20px;
left: 50px;
z-index: 11;
}
.btn {
background-color: rgba(0, 60, 136, .5);
display: block;
margin: 1px;
padding: 0;
color: #fff;
font-size: 1.14em;
text-decoration: none;
text-align: center;
height: 1.375em;
width: 1.375em;
line-height: .4em;
border: none;
border-radius: 0 0 2px 2px;
float: left;
}
</style>
</head>
<body>
<div id="menu">
<button id="pointBtn" class="btn" onclick="drawPoint()">点</button>
<button id="lineBtn" class="btn" onclick="drawLine()">线</button>
<button id="polygonBtn" class="btn" onclick="drawPolygon()">面</button>
<button id="squareBtn" class="btn" onclick="drawSquare()">正</button>
<button id="recBtn" class="btn" onclick="drawRec()">长</button>
<button id="circleBtn" class="btn" onclick="drawCircle()">圆</button>
<button id="starBtn" class="btn" onclick="drawStar()">星</button>
<button id="selectBtn" class="btn" onclick="selectFea()">选</button>
<button id="eraserBtn" class="btn" onclick="drawEraser()">清</button>
</div>
<div id="map"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-close" class="ol-popup-closer" onclick="popupClose()"></a>
<div id="popup-content">
<label> 边框颜色: </label>
<input type="color" id="linecolor" value="#ff0000" /><br />
<label> 填充颜色: </label>
<input type="color" id="fillcolor" value="#FFFFFF" /><br />
<label> 边框宽度: </label>
<input type="text" id="linewidth" value="2" style="width:45px; " /><br />
<button type="button" id="changeStyle" onclick="changeFeatureStyle()">修改样式</button>
</div>
</div>
</body>
</html>
JavaScript文件：
var draw;
var map;
var source;
var vector;
var selecTool
var menu_overlay;
window.onload = function () {
map = new ol.Map({
layers: [
new ol.layer.Tile({
title: "天地图矢量图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x]&y={y}&l={z}&tk=1d109683f4d84198e37a38c442d68311",
wrapX: true
})
}),
new ol.layer.Tile({
title: "天地图矢量图层注记",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x]&y={y}&l={z}&tk=1d109683f4d84198e37a38c442d68311",
attributions: "天地图的属性描述",
wrapX: true
}),
preload: Infinity
})
],
target: 'map',
view: new ol.View({
//地图初始中心点
center: [12000000, 4000000],
minZoom: 2,
zoom: 3
})
});
var defaultStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,1)'
}),
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ff0000'
})
})
});
source = new ol.source.Vector({ wrapX: true });
vector = new ol.layer.Vector({
source: source,
style: function (feature) {
var customStyle = feature.get('customStyle');
return customStyle || defaultStyle;
}
});
//将绘制层添加到地图容器中
map.addLayer(vector);
menu_overlay = new ol.Overlay({
element: document.getElementById("popup"),
positioning: "center-center"
});
menu_overlay.setMap(map);
map.getViewport().oncontextmenu = function (e) {
//取消默认的右键
e.preventDefault();
var coordinate = map.getEventCoordinate(event);
if (selecTool.getFeatures().getLength() != 0) {
menu_overlay.setPosition(coordinate);
}
};
selecTool = new ol.interaction.Select({
layers: [vector]
});
map.addInteraction(selecTool);
selecTool.setActive(false);
};
function addInteraction(typevalue) {
if (typevalue !== 'None') {
if (source == null) {
source = new ol.source.Vector({ wrapX: true });
//添加绘制层数据源
vector.setSource(source);
}
var geometryFunction, maxPoints;
if (typevalue === 'Square') {
typevalue = 'Circle';
//正方形图形（圆)
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
}
else if (typevalue === 'Box') {
typevalue = 'Circle';
geometryFunction = new ol.interaction.Draw.createBox();
} else if (typevalue === 'Star') {
typevalue = 'Circle';
geometryFunction = function (coordinates, geometry) {
var center = coordinates[0];
var last = coordinates[coordinates.length - 1];
var dx = center[0] - last[0];
var dy = center[1] - last[1];
var radius = Math.sqrt(dx * dx + dy * dy);
var rotation = Math.atan2(dy, dx);
var newCoordinates = [];
var numPoints = 12;
for (var i = 0; i < numPoints; ++i) {
var angle = rotation + (i * 2 * Math.PI) / numPoints;
var fraction = i % 2 === 0 ? 1 : 0.5;
var offsetX = radius * fraction * Math.cos(angle);
var offsetY = radius * fraction * Math.sin(angle);
newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
}
newCoordinates.push(newCoordinates[0].slice());
if (!geometry) {
geometry = new ol.geom.Polygon([newCoordinates]);
} else {
geometry.setCoordinates([newCoordinates]);
}
return geometry;
};
}
draw = new ol.interaction.Draw({
source: source,
type: typevalue,
//几何信息变更时调用函数
geometryFunction: geometryFunction,
//最大点数
maxPoints: maxPoints,
});
map.addInteraction(draw);
}
else {
source = null;
vector.setSource(source);
}
}
var initDraw = function () {
map.removeInteraction(draw);
selecTool.setActive(false);
selecTool.getFeatures().clear();
//默认背景色
document.getElementById("polygonBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("lineBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("circleBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("pointBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("eraserBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("squareBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("recBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("starBtn").style.background = "rgba(0,60,136,.5)";
};
var drawPoint = function () {
initDraw();
//添加交互绘制功能控件
addInteraction("Point");
document.getElementById("pointBtn").style.background = "#22A6F2";
document.getElementById("pointBtn").style.color = "#eee";
};
var drawLine = function () {
initDraw();
addInteraction("LineString");
document.getElementById("lineBtn").style.background = "#22A6F2";
document.getElementById("lineBtn").style.color = "#eee ";
};
var drawPolygon = function () {
initDraw();
//添加交互绘制功能控件
addInteraction("Polygon");
document.getElementById("polygonBtn").style.background = "#22A6F2";
document.getElementById("polygonBtn").style.color = "#eee";
};
var drawCircle = function () {
initDraw();
//添加交互绘制功能控件
addInteraction("Circle");
document.getElementById("circleBtn").style.background = "#22A6F2";
document.getElementById("circleBtn").style.color = "#eee";
};
var drawSquare = function () {
initDraw();
//添加交互绘制功能控件
addInteraction("Square");
document.getElementById("squareBtn").style.background = "#22A6F2";
document.getElementById("squareBtn").style.color = "#eee";
};
var drawRec = function () {
initDraw();
addInteraction("Box");
document.getElementById("recBtn").style.background = "#22A6F2";
document.getElementById("recBtn").style.color = "#eee";
};
var drawStar = function () {
initDraw();
//添加交互绘制功能控件
addInteraction("Star");
document.getElementById("starBtn").style.background = "#22A6F2";
document.getElementById("starBtn").style.color = "#eee";
};
var drawEraser = function () {
initDraw();
source.clear();
document.getElementById("eraserBtn").style.background = "#22A6F2";
document.getElementById("eraserBtn").style.color = "#eee";
};
var selectFea = function () {
initDraw();
selecTool.setActive(true);
document.getElementById("selectBtn").style.background = "#22A6F2";
document.getElementById("selectBtn").style.color = "#eee";
};
var changeFeatureStyle = function () {
var newcolor = document.getElementById("linecolor").value;
var fillcolor = document.getElementById("fillcolor").value;
var linewidth = document.getElementById("linewidth").value;
var newstyle = new ol.style.Style({
fill: new ol.style.Fill({
color: fillcolor
}),
stroke: new ol.style.Stroke({
color: newcolor,
width: eval(linewidth)
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ff0000'
})
})
});
selecTool.getFeatures().item(0).set('customStyle', newstyle);
menu_overlay.setPosition(undefined);
};
var popupClose = function () {
menu_overlay.setPosition(undefined);
}
CSS文件：
.ol-popup {
position: absolute;
background-color: #fff;
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 160px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: #fff;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: " x ";
}
2.5 常规图形编辑
html文件：
<html>
<head>
<meta charset="utf-8">
<title>OL绘制图形-样式</title>
<script src="./v6.5.0-dist/ol.js"></script>
<link rel="stylesheet" type="text/css" href="./v6.5.0-dist/ol.css" />
<script src="./05.js"></script>
<style>
html,
body {
height: 100%;
}
#map {
width: 100%;
height: 99%;
z-index: 10;
}
#menu {
position: absolute;
top: 20px;
left: 50px;
z-index: 11;
}
.btn {
background-color: rgba(0, 60, 136, .5);
display: block;
margin: 1px;
padding: 0;
color: #fff;
font-size: 1.14em;
text-decoration: none;
text-align: center;
height: 1.375em;
width: 1.375em;
line-height: .4em;
border: none;
border-radius: 0 0 2px 2px;
float: left;
}
</style>
</head>
<body>
<div id="menu">
<button id="pointBtn" class="btn" onclick="drawPoint()">点</button>
<button id="lineBtn" class="btn" onclick="drawLine()">线</button>
<button id="polygonBtn" class="btn" onclick="drawPolygon()">面</button>
<button id="squareBtn" class="btn" onclick="drawSquare()">正</button>
<button id="recBtn" class="btn" onclick="drawRec()">长</button>
<button id="circleBtn" class="btn" onclick="drawCircle()">圆</button>
<button id="starBtn" class="btn" onclick="drawStar()">星</button>
<button id="editBtn" class="btn" onclick="editFea()">编</button>
<button id="eraserBtn" class="btn" onclick="drawEraser()">清</button>
</div>
<div id="map"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-close" class="ol-popup-closer" onclick="popupClose()"></a>
<div id="popup-content">
<label> 边框颜色: </label>
<input type="color" id="linecolor" value="#ff0000" /><br />
<label> 填充颜色: </label>
<input type="color" id="fillcolor" value="#FFFFFF" /><br />
<label> 边框宽度: </label>
<input type="text" id="linewidth" value="2" style="width:45px; " /><br />
<button type="button" id="changeStyle" onclick="changeFeatureStyle()">修改样式</button>
</div>
</div>
</body>
</html>
JavaScript文件：
var draw;
var map;
var source;
var vector;
var Modify;
window.onload = function () {
map = new ol.Map({
layers: [
new ol.layer.Tile({
title: "天地图矢量图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x]&y={y}&l={z}&tk=1d109683f4d84198e37a38c442d68311",
wrapX: true
})
}),
new ol.layer.Tile({
title: "天地图矢量图层注记",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x]&y={y}&l={z}&tk=1d109683f4d84198e37a38c442d68311",
attributions: "天地图的属性描述",
wrapX: true
}),
preload: Infinity
})
],
target: 'map',
view: new ol.View({
//地图初始中心点
center: [12000000, 4000000],
minZoom: 2,
zoom: 3
})
});
var defaultStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,1)'
}),
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ff0000'
})
})
});
source = new ol.source.Vector({ wrapX: true });
vector = new ol.layer.Vector({
source: source,
style: function (feature) {
var customStyle = feature.get('customStyle');
return customStyle || defaultStyle;
}
});
//将绘制层添加到地图容器中
map.addLayer(vector);
Modify = {
init: function () {
//初始化一个交互选择控件,并添加到地图容器中
this.select = new ol.interaction.Select();
map.addInteraction(this.select);
//初始化一个交互编辑控件，并添加到地图容器中
this.modify = new ol.interaction.Modify({
features: this.select.getFeatures()
});
map.addInteraction(this.modify);
},
setActive: function (active) {
//激活选择要素控件
this.select.setActive(active);
this.modify.setActive(active);
},
removeInteraction: function () {
map.removeInteraction(this.modify);
map.removeInteraction(this.select);
}
};
};
function addInteraction(typevalue) {
if (typevalue !== 'None') {
if (source == null) {
source = new ol.source.Vector({ wrapX: true });
//添加绘制层数据源
vector.setSource(source);
}
var geometryFunction, maxPoints;
if (typevalue === 'Square') {
typevalue = 'Circle';
//正方形图形（圆)
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
}
else if (typevalue === 'Box') {
typevalue = 'Circle';
geometryFunction = new ol.interaction.Draw.createBox();
} else if (typevalue === 'Star') {
typevalue = 'Circle';
geometryFunction = function (coordinates, geometry) {
var center = coordinates[0];
var last = coordinates[coordinates.length - 1];
var dx = center[0] - last[0];
var dy = center[1] - last[1];
var radius = Math.sqrt(dx * dx + dy * dy);
var rotation = Math.atan2(dy, dx);
var newCoordinates = [];
var numPoints = 12;
for (var i = 0; i < numPoints; ++i) {
var angle = rotation + (i * 2 * Math.PI) / numPoints;
var fraction = i % 2 === 0 ? 1 : 0.5;
var offsetX = radius * fraction * Math.cos(angle);
var offsetY = radius * fraction * Math.sin(angle);
newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
}
newCoordinates.push(newCoordinates[0].slice());
if (!geometry) {
geometry = new ol.geom.Polygon([newCoordinates]);
} else {
geometry.setCoordinates([newCoordinates]);
}
return geometry;
};
}
draw = new ol.interaction.Draw({
source: source,
type: typevalue,
//几何信息变更时调用函数
geometryFunction: geometryFunction,
//最大点数
maxPoints: maxPoints,
});
map.addInteraction(draw);
}
else {
source = null;
vector.setSource(source);
}
};
var initDraw = function () {
map.removeInteraction(draw);
map.removeInteraction(Modify.removeInteraction());
//默认背景色
document.getElementById("polygonBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("lineBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("circleBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("pointBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("eraserBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("squareBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("recBtn").style.background = "rgba(0,60,136,.5)";
document.getElementById("starBtn").style.background = "rgba(0,60,136,.5)";
};
var drawPoint = function () {
initDraw();
//添加交互绘制功能控件
addInteraction("Point");
document.getElementById("pointBtn").style.background = "#22A6F2";
document.getElementById("pointBtn").style.color = "#eee";
};
var drawLine = function () {
initDraw();
addInteraction("LineString");
document.getElementById("lineBtn").style.background = "#22A6F2";
document.getElementById("lineBtn").style.color = "#eee ";
};
var drawPolygon = function () {
initDraw();
//添加交互绘制功能控件
addInteraction("Polygon");
document.getElementById("polygonBtn").style.background = "#22A6F2";
document.getElementById("polygonBtn").style.color = "#eee";
};
var drawCircle = function () {
initDraw();
//添加交互绘制功能控件
addInteraction("Circle");
document.getElementById("circleBtn").style.background = "#22A6F2";
document.getElementById("circleBtn").style.color = "#eee";
};
var drawSquare = function () {
initDraw();
//添加交互绘制功能控件
addInteraction("Square");
document.getElementById("squareBtn").style.background = "#22A6F2";
document.getElementById("squareBtn").style.color = "#eee";
};
var drawRec = function () {
initDraw();
addInteraction("Box");
document.getElementById("recBtn").style.background = "#22A6F2";
document.getElementById("recBtn").style.color = "#eee";
};
var drawStar = function () {
initDraw();
//添加交互绘制功能控件
addInteraction("Star");
document.getElementById("starBtn").style.background = "#22A6F2";
document.getElementById("starBtn").style.color = "#eee";
};
var drawEraser = function () {
initDraw();
source.clear();
document.getElementById("eraserBtn").style.background = "#22A6F2";
document.getElementById("eraserBtn").style.color = "#eee";
};
var changeFeatureStyle = function () {
var newcolor = document.getElementById("linecolor").value;
var fillcolor = document.getElementById("fillcolor").value;
var linewidth = document.getElementById("linewidth").value;
var newstyle = new ol.style.Style({
fill: new ol.style.Fill({
color: fillcolor
}),
stroke: new ol.style.Stroke({
color: newcolor,
width: eval(linewidth)
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ff0000'
})
})
});
selecTool.getFeatures().item(0).set('customStyle', newstyle);
menu_overlay.setPosition(undefined);
};
var popupClose = function () {
menu_overlay.setPosition(undefined);
}
var editFea = function () {
initDraw();
//初始化几何图形修改控件
Modify.init();
Modify.setActive(true);
document.getElementById("editBtn").style.background = "#22A6F2";
document.getElementById("editBtn").style.color = "#eee";
};
OpenLayers之图形交互绘制的更多相关文章
- HTML5 Canvas ( 填充图形的绘制 ) closePath, fillStyle, fill
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Quartz2D常见图形的绘制：线条、多边形、圆
UI高级 Quartz2D http://ios.itcast.cn iOS学院 掌握 drawRect:方法的使用 常见图形的绘制:线条.多边形.圆 绘图状态的设置:文字颜色.线宽等 图形上下文状 ...
- 利用XtraDiagram.DiagramControl进行流程图形的绘制和控制
DevExpress提供了一个比较强大的图形绘制工具,可以用于绘制各种图形,如流程图.组织机构图等等,本篇随笔介绍XtraDiagram.DiagramControl的使用,以及利用代码对其属性进行控 ...
- GDI+图形图像处理技术中Pen和Brush的简单使用和简单图形的绘制(C#)
1.Graphics Graphics对象是GDI+绘图表面,因此在Windows窗体应用程序中要使用GDI+创建绘图,必须要先创建Graphics.在给窗体注册一个Paint事件后,Graphics ...
- python数字图像处理（12）：基本图形的绘制
图形包括线条.圆形.椭圆形.多边形等. 在skimage包中,绘制图形用的是draw模块,不要和绘制图像搞混了. 1.画线条 函数调用格式为: skimage.draw.line(r1,c1,r2,c ...
- openlayers画图形返回范围
//画图形返回圖形的范围 var polygonLayer = new OpenLayers.Layer.Vector("选择范围"); var drawControls = ne ...
- [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形
在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...
- Matlab绘图基础——其他三维图形（绘制填充的五角星）
其他三维图形 %绘制魔方阵的三维条形图 subplot(2,2,1); bar3(magic(4)); %以三维杆图形式绘制曲线y=2sin(x) subplot(2,2,2); y=2*sin( ...
- openLayers 4 canvas图例绘制，canvas循环添加图片，解决图片闪烁问题
一.问题来源: 接触Openlayers 一段时间了,最近做了一个农业产业系统,项目中涉及到产业图例,最后考虑用canvas来绘制图例图像.当中带图片的图例移动时,图片会实现闪烁留白情况.闪烁是因为绘 ...
- 利用Microsoft VC++6.0 的MFC 的绘图工具实现简单图形的绘制
MFC运算功能强大,拥有完备的绘图功能. 在Windows平台上,应用程序的图形设备接口(graphics device interface,GDI)被抽象为设备上下文(Dev ...
随机推荐
- 【每日一题】【第n个 n-->0】19./NC53 【删除】链表的倒数第 N 个结点-211123/220127
给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点. 答案: import java.util.*; /* * public class ListNode { * int val; * ...
- 如何理性看待国内大热的HuTool工具包
一.序言 关于HuTool工具包,相信很多技术朋友都听说甚至使用过.在HuTool之前,已经有比较成熟的工具包比如Apache Common包,谷歌推出的Guava包,他们已经在全世界大范围使用了. ...
- JavaScript：函数：如何声明和调用函数？
首先,理解什么是函数? 通俗的说,函数就是用大括号括起来的一组JS语句的集合体,是一个代码块,表达一种行为逻辑. 当我们调用函数的时候,我们就是在执行这一组JS语句. 然后,确定一点,在JS中,函数也 ...
- 前端工程化筑基-Node/npm/babel/polyfill/webpack
00.前端搬砖框架 开发 ⇨ 构建 ⇨ 部署上线 ⇨ 摸鱼: 01.Node.js/npm Node.JS 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境,不是JS库(是C ...
- MVP、原型、概念验证，傻傻分不清楚？
MVP.原型以及概念验证这三者的概念虽然没有密切的联系,但也有不少人会分不清这三者的区别,在这篇文章中,我们会帮大家区分一下这三个概念.首先是MVP,MVP是Minimum Viable Produc ...
- 【转载】SQL SERVER 中单字节和双字节互转自定义函数(全角半角转换)
一.首先创建一个自定义函数,代码如下: alter function f_convert( @str nvarchar(4000), --要转换的字符串 @flag bit --转换标志,0转换成半角 ...
- Redis-01 常用命令
创建和获取 key 命令 说明 例子 set 创建一个名为 key 值为 value 键值对 set views 10 get 获取名为 key 的值,存在返回值,不存在返回 nil get view ...
- C Primer Plus（4.8）編程練習
/*C Primer Plus (4.7) 5*/ 1 include<stdio.h> 2 #define BOOK "War and Peace" 3 int ma ...
- Odoo View 常用技巧
隐藏Field <field name="currency_id" invisible="True"/> <field name=" ...
- Unity之生成扫描二维码
Unity之生成扫描二维码 Unity之生成扫描二维码 前言 开篇 Unity版本及使用插件 正题 前期准备 首先生成二维码 然后需要扫描二维码 该使用了 挂载脚本绑定按钮和输入框 运行内容 生成二维 ...