OpenLayers学习笔记(七)— 类似比例尺的距离环(一)
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学习笔记(七)— 类似比例尺的距离环(一)的更多相关文章
- OpenLayers学习笔记(八)— 类似比例尺的距离环(二)
openlayers 3 地图上创建一个距离环,始终以地图中心为中心,每个环之间的距离类似比例尺,随地图缩放而变化. 添加具有覆盖整个范围的特征的虚拟层,其可以被设置为围绕地图中心的环. 这篇是上一篇 ...
- (转)Qt Model/View 学习笔记 (七)——Delegate类
Qt Model/View 学习笔记 (七) Delegate 类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...
- Typescript 学习笔记七:泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- python3.4学习笔记(七) 学习网站博客推荐
python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...
- Go语言学习笔记七: 函数
Go语言学习笔记七: 函数 Go语言有函数还有方法,神奇不.这有点像python了. 函数定义 func function_name( [parameter list] ) [return_types ...
- iOS 学习笔记七 【博爱手把手教你使用2016年gitHub Mac客户端】
iOS 学习笔记七 [博爱手把手教你使用gitHub客户端] 第一步:首先下载git客户端 链接:https://desktop.github.com 第二步:fork 大神的代码[这里以我的代码为例 ...
- 【opencv学习笔记七】访问图像中的像素与图像亮度对比度调整
今天我们来看一下如何访问图像的像素,以及如何改变图像的亮度与对比度. 在之前我们先来看一下图像矩阵数据的排列方式.我们以一个简单的矩阵来说明: 对单通道图像排列如下: 对于双通道图像排列如下: 那么对 ...
- Linux学习笔记(七) 查询系统
1.查看命令 (1)man 可以使用 man 命令名称 命令查看某个命令的详细用法,其显示的内容如下: NAME:命令名称 SYNOPSIS:语法 DESCRIPTION:说明 OPTIONS:选项 ...
随机推荐
- [转帖]cmd批处理常用符号详解
cmd批处理常用符号详解 https://www.jb51.net/article/32866.htm 很多符号 还是不清楚的.. 批处理能够极大的提高 工作效率 需要加强深入学习. 1.@一般在 ...
- composer 下载包慢的解决方法
方法一: 修改 composer 的全局配置文件(推荐方式) 打开命令行窗口(windows用户)或控制台(Linux.Mac 用户)并执行如下命令: composer config -g repo. ...
- CentOS7装Tomcat
有两种安装方式:(1)yum 命令 (2)安装包 本次采用第二种方式: 1.windos下载apache-tomcat-7.0.73.tar.gz安装包 2.通过WinSCP传到linux下(本次放 ...
- GlusterFS卷的种类
1.分布卷 在分布式卷中,文件随机扩展到卷中的砖块中. 使用分布式卷,需要扩展存储和冗余不是很重要,或由其他硬件/软件层提供. 创建语法:gluster volume create [transpor ...
- 五、core开发
一.支付方面的 https://www.cnblogs.com/stulzq/p/7606164.htmlhttps://www.cnblogs.com/guolianyu/
- vue2 mint-ui loadmore(下拉刷新)
<template> <div class="page-loadmore"> <h1 class="page-title"> ...
- Jenkins+PowerShell持续集成环境搭建(四)常用PowerShell命令
0. 修改执行策略 Jenkins执行PowerShell脚本,需要修改其执行策略.以管理员身份运行PowerShell,执行以下脚本: Set-ExecutionPolicy Unrestricte ...
- Create an Azure SQL database in the Azure portal
Create a SQL database An Azure SQL database is created with a defined set of compute and storage res ...
- Spring 使用介绍(六)—— AOP(二)
一.切入点语法 1)通配符 AOP支持的通配符: *:匹配任何数量字符 ..:匹配任何数量字符的重复,在类型模式中匹配任何数量子包,在方法参数模式中匹配任何数量参数 +:匹配指定类型的子类型,仅能作为 ...
- mybatis,mysql批量delete多个记录
1.dao 接口中 Integer delete(List<UserDeviceRela> relas); 2.xml <delete id="delete" p ...