openlayers画区域
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="lib/OpenLayers/ol.css" type="text/css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="lib/OpenLayers/ol.js"></script>
<script src="olStyle/Light.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
} .map {
width: 100%;
height: 100%;
background: #f6f6f4;
} .ol-scale-line {
/* 比例尺背景颜色 */
background: rgba(0, 60, 136, .7);
} .ol-scale-line-inner {
/* 比例尺边框样式 */
border: 1px solid #eee;
border-top: none;
/* 比例尺文字大小 */
font-size: 10px;
/* 比例尺文字颜色 */
color: #eee;
/* 比例尺宽高为动态计算，若需要固定宽度，将最大最小宽度设置为相同即可 */
min-width: 100px;
max-width: 100px;
}
</style>
</head> <body>
<div id="map" class="map" data-id="11"></div>
<script type="text/javascript">
var map; $(function () { InitMap(); //加载画图
AddDraw();
addInteraction(); }) var layer; //地图初始化
function InitMap() {
//初始化地图
layer = new ol.layer.Vector({
source: new ol.source.Vector(),
overlaps: false,
wrapX: false
}),
style: function (feature, resolution) {
switch (feature.get('layer')) {
case 'poi':
poiStyle.getText().setText(feature.get('name'));
return poiStyle;
case 'boundary': return boundaryStyle;
case 'lawn': return lawnStyle;
case 'road':
roadStyle.getText().setText(feature.get('name'));
return (resolution < 2) ? roadStyle : null;
case 'building':
return buildingStyle(feature, resolution);
case 'other':
otherStyle.getText().setText(feature.get('name'));
return otherStyle;
default: return null;
}
}
}); map = new ol.Map({
layers: [layer],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([120.277, 36.330]),
minZoom: 1,
zoom: 16
})
});
} /*增加显示区域**********************************************************************************/ //设置图形
var typeSelect = "LineString"//Point 点 LineString 线 Polygon 多边形 Circle 圆 Square 正方形 Rectangle 长方形 //添加绘图交互的函数
//var source = new ol.source.Vector({ wrapX: false });
//实例化矢量数据图层
var drawVector; function AddDraw() {
drawVector = new ol.layer.Vector({
//数据源
source: layer.getSource(),
//样式
style: new ol.style.Style({
//样式填充
fill: new ol.style.Fill({
//填充颜色
color: 'rgba(37,241,239,0.2)'
}),
//笔触
stroke: new ol.style.Stroke({
//笔触颜色
color: '#264df6',
//笔触宽度
width: 2
}),
//图形样式，主要适用于点样式
image: new ol.style.Circle({
//半径大小
radius: 7,
//填充
fill: new ol.style.Fill({
//填充颜色
color: '#e81818'
})
})
})
}); map.addLayer(drawVector);
} function addInteraction() { //设置矢量图层的数据源为空
drawVector.setSource(null); //获取当前选择的绘图类型
var value = typeSelect;
//如果当前选择的绘图类型不为"None"的话，则进行相应绘图操作
//如果当前选择的绘图类型为"None"的话，则清空矢量数据源
if (value !== 'None') {
//如果当前的矢量数据源为空的话，则重新创建和设置数据源
//因为当你选择的绘图类型为"None"时，会清空数据源
if (drawVector.getSource() == null) {
drawVector.setSource(new ol.source.Vector({ wrapX: false }));
}
//geometryFunction变量，用来存储绘制图形时的回调函数
//maxPoints变量，用来存储最大的点数量
var geometryFunction, maxPoints;
//如果当前选择的绘图类型是"Square"的话，则将value设置为Circle
//然后调用createRegularPolygon()方法
if (value === 'Square') {
value = 'Circle';
//根据圆来创建一个四边形
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
}
else if (value === 'Rectangle') {//长方形
//如果当前选择的绘图类型是"Square"的话，则将value设置为LineString
value = 'LineString'; //设置最大点数为2
maxPoints = 2; geometryFunction = function (coordinates, geometry) {
//source.clear(); //如果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;
};
} //将交互绘图对象赋给draw对象
//初始化交互绘图对象
var draw = new ol.interaction.Draw({
//图层数据源
source: drawVector.getSource(),
//绘制类型
type: value,
//回调函数
//Function that is called when a geometry's coordinates are updated
geometryFunction: geometryFunction,
//最大点数
maxPoints: maxPoints
});
//将draw对象添加到map中，然后就可以进行图形绘制了
map.addInteraction(draw); draw.setActive(true);
} //监听开始事件
draw.on('drawstart', function () {
//alert("111");
drawVector.getSource().clear();
}) //获取坐标
draw.on('drawend', function (evt) {
//alert("111");
var feature = evt.feature;
var geometry = feature.getGeometry(); //获取多边形的坐标
//var coordinate = geometry.getCoordinates();
//获取圆的坐标
//var coordinate = geometry.getCenter(); var lnglat = [];
//for(var i =0;i<)
var points = []; //获取坐标
if (typeSelect == "Circle") {
points = geometry.getCenter();
lnglat = ol.proj.transform(points, 'EPSG:3857', 'EPSG:4326');
//radius = circle.getRadius();
console.log(geometry.getRadius());
console.log(lnglat);
} else {
points = geometry.getCoordinates(); for (var i = 0; i < points.length; i++) {
lnglat.push(ol.proj.transform(points[i], 'EPSG:3857', 'EPSG:4326'));
}
} console.log(lnglat);
// console.log(geometry.getCoordinates());
})
} </script>
</body> </html>
openlayers画区域的更多相关文章
- openlayers画图形返回范围
//画图形返回圖形的范围 var polygonLayer = new OpenLayers.Layer.Vector("选择范围"); var drawControls = ne ...
- openlayers编辑区域
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- openlayers显示区域
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- WPF Canvas 画区域
有时候需要实现类似于QQ截图那样的选择区域功能,这里的区域可以是一条线,圆,矩形等等 实现原理就是一个Canvas做蒙板,然后canvas的三个事件,MouseLeftButtonDown,Mouse ...
- MATLAB之画确定区域内不重合的随机圆
MATLAB之画确定区域内不重合的随机圆 程序要求:在确定区域内,画互不重合的圆. 知识点: (1)A=p'; 转置运算 (2)ones(a,b)产生a行b列全1数组 (3)rand(a,b)产生a行 ...
- 2017年研究生数学建模竞赛-E题 MATLAB 作战区域道路示意图
MATLAB 画区域作战图 clear load('output_path1.mat') k = 1:130; gplot(edge(k,k),loc(k,:),'c-') title('作战区域道路 ...
- 吐槽贴：百度地图 api 封装 的实用功能 [源码下载]
ZMap 类 功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...
- HTML5 的一些小的整理吧
主要的就是一些HTML 5 API 的使用 也是借鉴别人的博客 ,和MDN(中文部分的还是能看的懂) 上面的一些东西 具体的代码在 有道云笔记里面也有. 先把总得列出来 1.Canvas绘图 学完这个 ...
- [百度地图] ZMap 与 MultiZMap 封装类说明;
ZMap.js 与 MultiZMap 说明 1. ZMap 与 MultiZMap 都是封装一些地图常用的使用方法,类方法功能大多使用 prototype 原型 实现: ZMap 在一个页面只能使用 ...
随机推荐
- 7天用Go动手写/从零实现分布式缓存GeeCache
1 谈谈分布式缓存 第一次请求时将一些耗时操作的结果暂存,以后遇到相同的请求,直接返回暂存的数据.我想这是大部分童鞋对于缓存的理解.在计算机系统中,缓存无处不在,比如我们访问一个网页,网页和引用的 J ...
- win10系统安装VMware虚拟机软件以及linux系统
一.安装VMware 1.在VMware官网下载VMware Workstation Pro 15.5.1 下载地址:https://my.vmware.com/cn/web/vmware/detai ...
- JumpServer部署与管理
一.JumpServer 堡垒机概述 JumpServer由Python/Django进行开发.使用GNU GPL v2.0开源协议.也是全球首款完全开源的堡垒机.同时配备了业界领先的Web Term ...
- python 实现 跳一跳游戏 代码解析
这个代码实现的是 手动点击起点 和 终点 ,程序自动判断距离.触屏时间 完成跳跃 原理(摘自项目说明页面):1. 将手机点击到“跳一跳”小程序界面:2. 用Adb 工具获取当前手机截图,并用a ...
- CentOS7及Docker配置中文字符集问题
说明 Linux系统默认使用英文字符集,不会安装中文字符集等其他字符. 查看当前字符集 $ 安装字符集 使用locale命令看看当前系统所使用的字符集 $ locale LANG=en_US.UTF- ...
- 文本处理命令 cat more less cut wc sort uniq
1.cat cat主要功能: 1.一次显示整个文件. cat filename 2.从键盘创建一个文件. cat > filename (只能创建新文件,不能编辑已有文件). 1 ...
- VMware克隆Linux虚拟机报错
在VMware里克隆了2个centos6.5,执行命令重启网卡服务报以下错误: Bringing up interface eth0: Device eth0 does not seem to be ...
- PBFT 算法 java实现（下）
PBFT 算法的java实现(下) 在上一篇博客中(如果没有看上一篇博客建议去看上一篇博客),我们介绍了使用Java实现PBFT算法中节点的加入,view的同步等操作.在这篇博客中,我将介绍PBFT算 ...
- asp.net core 3.x 授权默认流程
一.前言 接上一篇<asp.net core 3.x 授权中的概念>,本篇看看asp.net core默认授权的流程.从两个方面来看整个授权系统是怎么运行的:启动阶段的配置.请求阶段中间件 ...
- 智和网管平台SugarNMS网络综合监控等级保护安全解决方案
IT运维是一个很大的范畴,涉及到的部门.架构.技术.产品十分广泛.北京智和信通以等保标准为依据,依托丰富的网络安全行业经验,配套自主研发的智和网管平台SugarNMS,提升用户网络关键基础设施综合管理 ...