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 ...
随机推荐
- 全网最全的linux上docker安装oracle的详细文档，遇到了n个问题，查了几十篇文章，最终汇总版，再有解决不了的,私聊我，我帮你解决
目录 全网最全的linux上docker安装oracle的详细文档,遇到了n个问题,查了几十篇文章,最终汇总版,再有解决不了的,私聊我,我帮你解决 1. 拉取阿里镜像oracle 2. 创建初始化数据 ...
- java的饿汉和懒汉设计模式
本文主要讲述java的饿汉和懒汉设计模式 饿汉和懒汉设计模式的目的:使得该类的对象,只能有一个,不允许其他类,创建该类的对象. 饿汉设计模式 示例代码如下: 1 public class Hunger ...
- kali安装拼音输入法
前言 最近使用kali感觉没个中文输入法的很不方便,于是决定装个ibus的拼音输入法 安装方法 1.安装ibus 使用命令apt install ibus ibus-pinyin,注意使用root权限 ...
- STL map容器常用API
map容器:键值和实值是分开的,排序规则按照键值排序 #define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<map& ...
- [OpenCV实战]25 使用OpenCV进行泊松克隆
目录 1 Seamless Cloning实现 1.1 Seamless Cloning实例 1.2 正常克隆(NORMAL_CLONE)与混合克隆(MIXED_CLONE) 1.2.1 Normal ...
- python进阶之路4基本运算符、格式化输出
内容回顾 PEP8规范 代码编写规范及美观 python注释语法 平时养成写注释的习惯 1.警号 2.三个单引号 3.三个双引号 常量与变量 1.变量语法结构 变量名 赋值符合 数据值 2.底层原理 ...
- test20230109考试总结-2023寒搜索专题
前言 2023 年的第一篇考试总结-- 赛时得分情况: A B C D E F G \(\texttt{Total}\) \(\texttt{Rank}\) \(40\) \(80\) \(0\) \ ...
- 【Azure 存储服务】.NET7.0 示例代码之上传大文件到Azure Storage Blob
问题描述 在使用Azure的存储服务时候,如果上传的文件大于了100MB, 1GB的情况下,如何上传呢? 问题解答 使用Azure存储服务时,如果要上传文件到Azure Blob,有很多种工具可以实现 ...
- 一种面向业务配置基于JSF广播定时生效的工具
作者:京东物流 王北永 姚再毅 李振 1 背景 目前,ducc实现了实时近乎所有配置动态生效的场景,但是配置是否实时生效,不能直观展示每个机器上jvm内对象对应的参数是否已变更为准确的值,大部分时候需 ...
- 關於scanf()的使用
要使用scanf函數進行輸入: 1.如果用scanf()要輸入讀取基本變量的值,需要加&. 2.如果用scanf()讀取的是把字符串讀入字符數組中,則不需要加& 1 #include& ...