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. Linux基础学习(14)--日志管理

    第十四章——日志管理 一.日志管理简介 1.日志服务: 2.常见日志的作用: 二. rsyslogd日志服务 1.日志文件格式: 2./etc/rsyslog.conf配置文件: 三.日志轮替 1.日 ...

  2. 关于对ProgressBar定义模板的一些总结

    在之前的博客中曾经写到了一篇关于如何定义圆形进度条的文章,今天就ProgressBar再来进行一些总结,首先来介绍一下ProgressBar的结构,ProgressBar控件的模板有两个部分,我们在定 ...

  3. Javassist之使用字节码在运行时生成新的类 01

    介绍 Javassist是一个开源的分析.编辑和创建Java字节码的类库.是由东京工业大学的数学和计算机科学系的 Shigeru Chiba (千叶 滋)所创建的.它已加入了开放源代码JBoss 应用 ...

  4. Java多线程之静态代理

    package org.study2.javabase.ThreadsDemo.staticproxy; /** * @Date:2018-09-18 静态代理 设计模式 * 1.真实角色 * 2.代 ...

  5. 学习 Spring (四) Bean 的生命周期

    Spring入门篇 学习笔记 定义 --> 初始化 --> 使用 --> 销毁 初始化 实现 org.springframework.beans.factory.Initializi ...

  6. Linux常见操作

    前面的话 本文将详细介绍Linux常见操作 基本概念 Linux严格区分大小写,所有内容以文件形式保存,包括硬件 Linux没有扩展名的概念,不靠扩展名来区分文件类型.但有一些约定俗成的扩展名 压缩包 ...

  7. 当页面是动态时 如果后台存储id可以通过查询后台方式获取对象;当后台没有存储时候 只有通过前端标记了 例如标记数量为10 我们根据传递过来的10循环取值

    当页面是动态时 如果后台存储id可以通过查询后台方式获取对象;当后台没有存储时候 只有通过前端标记了 例如标记数量为10 我们根据传递过来的10循环取值

  8. VS Code 编辑器

    使用VS Code 编辑器有一段时间了,感觉非常好用,已经成为了我的第一选择了.现在需要学习了一下了. 1,更改编辑器的默认设置 文件 =>首选项 => 设置 或 ctrl + ,(逗号) ...

  9. Nginx 滑动窗口与缓冲区

    L:125

  10. Base64 总结

    Base64编码是解决一些无法打印的字符无法显示的问题,将8位的ascii编码转换为6位的表示64个可见字符的算法. 具体而言,首先将编码每三个分成一组,将三个字符转换为总长为24位的二进制 数字,将 ...