openlayers 3 地图上创建一个距离环,始终以地图中心为中心,每个环之间的距离类似比例尺,随地图缩放而变化。

添加具有覆盖整个范围的特征的虚拟层,其可以被设置为围绕地图中心的环。注意,根据地图投影,当真实地图比例发生变化时,环尺寸(甚至形状)可能会根据位置而变化,例如,如果从格陵兰岛移动到非洲,这些距离将为50公里,200公里,500公里和1000公里。

GitHub:八至

作者:狐狸家的鱼

本文链接:类似比例尺功能的距离环

代码:

style:

html,
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
} .map {
height: 100%;
width: 100%;
}

html:

var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
})
],
target: 'map',
view: new ol.View()
});
//距离环
var proj = map.getView().getProjection();
map.addLayer(
new ol.layer.Vector({
source: new ol.source.Vector({
features: [ new ol.Feature(new ol.geom.Polygon.fromExtent(proj.getExtent())) ]
}),
style: function(feature) {
var center = ol.proj.transform(map.getView().getCenter(), proj, 'EPSG:4326');
var sphere = new ol.Sphere(6371008.8);
return [
new ol.style.Style({//1000km
geometry: ol.geom.Polygon.circular(sphere, center, 1000000, 128).transform('EPSG:4326', proj),
stroke: new ol.style.Stroke({
color: 'yellow',
width: 3
})
}),
new ol.style.Style({//500km
geometry: ol.geom.Polygon.circular(sphere, center, 500000, 128).transform('EPSG:4326', proj),
stroke: new ol.style.Stroke({
color: 'yellow',
width: 3
})
}),
new ol.style.Style({//200km
geometry: ol.geom.Polygon.circular(sphere, center, 200000, 128).transform('EPSG:4326', proj),
stroke: new ol.style.Stroke({
color: 'yellow',
width: 3
})
}),
new ol.style.Style({//50km
geometry: ol.geom.Polygon.circular(sphere, center, 50000, 128).transform('EPSG:4326', proj),
stroke: new ol.style.Stroke({
color: 'yellow',
width: 3
})
})
];
}
})
);

OpenLayers学习笔记(七)— 类似比例尺的距离环(一)的更多相关文章

  1. OpenLayers学习笔记(八)— 类似比例尺的距离环(二)

    openlayers 3 地图上创建一个距离环,始终以地图中心为中心,每个环之间的距离类似比例尺,随地图缩放而变化. 添加具有覆盖整个范围的特征的虚拟层,其可以被设置为围绕地图中心的环. 这篇是上一篇 ...

  2. (转)Qt Model/View 学习笔记 (七)——Delegate类

    Qt Model/View 学习笔记 (七) Delegate  类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...

  3. Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...

  4. Typescript 学习笔记七:泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  5. python3.4学习笔记(七) 学习网站博客推荐

    python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...

  6. Go语言学习笔记七: 函数

    Go语言学习笔记七: 函数 Go语言有函数还有方法,神奇不.这有点像python了. 函数定义 func function_name( [parameter list] ) [return_types ...

  7. iOS 学习笔记七 【博爱手把手教你使用2016年gitHub Mac客户端】

    iOS 学习笔记七 [博爱手把手教你使用gitHub客户端] 第一步:首先下载git客户端 链接:https://desktop.github.com 第二步:fork 大神的代码[这里以我的代码为例 ...

  8. 【opencv学习笔记七】访问图像中的像素与图像亮度对比度调整

    今天我们来看一下如何访问图像的像素,以及如何改变图像的亮度与对比度. 在之前我们先来看一下图像矩阵数据的排列方式.我们以一个简单的矩阵来说明: 对单通道图像排列如下: 对于双通道图像排列如下: 那么对 ...

  9. Linux学习笔记(七) 查询系统

    1.查看命令 (1)man 可以使用 man 命令名称 命令查看某个命令的详细用法,其显示的内容如下: NAME:命令名称 SYNOPSIS:语法 DESCRIPTION:说明 OPTIONS:选项 ...

随机推荐

  1. [转帖]BRD、MRD 和 PRD

    来源: https://www.zhihu.com/question/19655491 BRD 商业需求文档 Business Requirement Document MRD 市场需求文档 Mark ...

  2. Fiddler 学习笔记---命令、断点

    输入命令框: 1 输入 ?51testing  高亮显示对应记录 2 >10 选择body大于10的记录 3 <10 选择body<10的记录 4 =200 选择result=200 ...

  3. 获取DataSet中某行某列的数据

    LabelText = DataSet11.Tables("COMM.USERS").Rows[0]["User_Name"].tostring() Label ...

  4. Java 获取客户端ip返回127.0.0.1问题

    Java开发中使用 request.getRemoteAddr 获取客户端 ip ,返回结果始终为127.0.0.1.原因是服务器使用了nginx反向代理. 解决办法:在nginx配置文件nginx. ...

  5. Xamarin 简化的Android密钥库签名

    安装 开始使用这个新工具不容易.在Visual Studio 2017(即将推出VS 2015),只需转到工具 - >扩展和更新,并搜索“密钥库”来查找扩展名. 下载后,只需重新启动Visual ...

  6. Asp.Net Core get client IP

    不废话,直接上代码,你懂得. public string GetRequestIP(bool tryUseXForwardHeader = true) { string ip = null; // t ...

  7. Qt 使用openGL 渲染NV12格式的视频

    直接上代码 Nv12Render.h #ifndef NV12RENDER_H #define NV12RENDER_H #include <QOpenGLFunctions> #incl ...

  8. Linux编译静态库与共享库

    静态库: cc  -c   mod1.c  mod2.c //编译 ar   r     libdemo.a   mod1.o   mod2.o //生成静态库 cc  -c   prog.c //编 ...

  9. 【BZOJ4944】【NOI2017】泳池 概率DP 常系数线性递推 特征多项式 多项式取模

    题目大意 有一个\(1001\times n\)的的网格,每个格子有\(q\)的概率是安全的,\(1-q\)的概率是危险的. 定义一个矩形是合法的当且仅当: 这个矩形中每个格子都是安全的 必须紧贴网格 ...

  10. Hdoj 1115.Lifting the Stone 题解

    Problem Description There are many secret openings in the floor which are covered by a big heavy sto ...