OpenLayers 教程

最开始接触地图的时候，对圆的理解不正确，以为也是面状的；实际上 Openlayers 中圆指的就是圆点和半径，而面状的圆其实就是多边形，比如十七边形，只是看起来像圆。

下边介绍创建圆的方法以及根据圆获取圆形多边形的方法。

Openlayers 圆的操作

<html lang="en">
<head><meta charset="utf-8"><!--注意：openlayers 原版的比较慢，这里引起自己服务器版--><link rel="stylesheet" href="http://openlayers.vip/examples/css/ol.css" type="text/css"><style>/* 注意：这里必须给高度，否则地图初始化之后不显示；一般是计算得到高度，然后才初始化地图 */.map {height: 400px;width: 100%;float: left;}</style><!--注意：openlayers 原版的比较慢，这里引起自己服务器版--><script src="http://openlayers.vip/examples/resources/ol.js"></script><script src="./tiandituLayers.js"></script><title>OpenLayers example</title>
</head>
<body>
<h2>Feature transfer</h2>
<!--地图容器，需要指定 id -->
<div id="map" class="map"></div>
<!--注意：本示例将 高德腾讯坐标设置为黑色；将百度坐标设置为黄色 -->
<!--注意：本示例将 高德腾讯坐标转为WGS84颜色设置为粉色；将百度坐标转为WS84颜色设置为绿色 -->
<script type="text/javascript">var map = new ol.Map({// 地图容器target: 'map',// 地图图层，比如底图、矢量图等layers: [getIMG_CLayer(),getIBO_CLayer(),getCIA_CLayer(),],// 地图视野view: new ol.View({projection: "EPSG:4326",// 定位center: [116, 39],// 缩放zoom: 4,maxZoom: 18,minZoom: 1,})});var xy = [116.391232637988, 39.907157016256974];let myCircle = new ol.geom.Circle(xy, 0.01);let feature = new ol.Feature({geometry: myCircle,name: 'My Circle',});// 矢量图层var layer = initVectorLayer();/*** @todo 矢量图层* @returns {VectorLayer}* @constructor*/function initVectorLayer() {//实例化一个矢量图层Vector作为绘制层let source = new ol.source.Vector();//创建一个图层let customVectorLayer = new ol.layer.Vector({source: source,zIndex: 2,//设置样式style: new ol.style.Style({//边框样式stroke: new ol.style.Stroke({color: 'red',width: 5,lineDash: [3, 5]}),//填充样式fill: new ol.style.Fill({color: 'rgba(0, 0, 255, 0.3)',}),}),});//将绘制层添加到地图容器中map.addLayer(customVectorLayer);customVectorLayer.getSource().addFeatures([feature]);var extent = customVectorLayer.getSource().getExtent();map.getView().fit(extent, {duration: 1,//动画的持续时间,callback: null,});return customVectorLayer;}// 多边形圆function toPolygon() {//根据圆的图形要素 Feature 构建多边形圆var polygon_circle = new ol.Feature({// 圆的几何图形，多边形数量geometry: ol.geom.Polygon.fromCircle(feature.getGeometry(), 16, 0),name: 'polygon_circle'})polygon_circle.setStyle(new ol.style.Style({//边框样式stroke: new ol.style.Stroke({color: 'blue',width: 5,lineDash: [3, 5]}),//填充样式fill: new ol.style.Fill({color: 'rgba(255, 255, 255, 1)',}),}))layer.getSource().addFeatures([polygon_circle]);}</script><button id="toPolygon" onclick="toPolygon()">转为多边形圆</button>
</body>
</html>

在线示例

Openlayers 圆的操作：Openlayers circle

Openlayers 圆的操作相关推荐

Openlayers 图层的常用操作
Openlayers 图层的常用操作 OpenLayers 教程 Openlayers 图层的常用操作在线示例 OpenLayers 教程在 Openlayers 中,图层是非常基础的对象,这里汇 ...
python编程定义圆_Python语言编程系列014——PyQt中自定义圆形指示灯
背景 PyQt是Qt界面库在Python下的绑定库,为熟悉或喜欢Qt的开发者在Python语言下编写GUI界面程序提供了极大的便利,关于自定义控件前面已经给出了两个例子,分别是自定义颜色指示框控件和自 ...
216：vue+openlayers 加载GPX数据，导出geojson文件
第216个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中加载GPX数据,显示图形, 导出geojson文件. GPX(GPS eXchange Format,GPS交换 ...
031：vue+openlayers加载GPX数据（代码示例）
第031个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中加载GPX数据,显示图形. GPX(GPS eXchange Format,GPS交换格式)是一个XML格式,为 ...
155：vue+openlayers 设置地图的反转色、复古色、灰度图、原始图
第155个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中设置地图的反转色.复古色.灰度,原始状态等.采用的是CSS filter的形式. 直接复制下面的 vue+ope ...
029：vue+openlayers:使用MVT格式读取瓦片数据（示例代码）
第029个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中使用MVT读取矢量瓦片数据,并显示图形. 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行 ...
127：vue+openlayers 使用CRTL控制map拖拽和鼠标滚动（示例代码）
第127个点击查看专栏目录本示例的目的是介绍如何在vue+openlayers项目中设置控制条件,使用CRTL控制map拖拽和鼠标滚动. 直接复制下面的 vue+openlayers源代码,操作2 ...
034：vue+openlayers上传KMZ文件并在map上解析（代码示例）
第034个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中本地上传kmz文件,核心思路是利用jszip解压文件,读取kml数据,并在地图上显示图形. 直接复制下面的 vu ...
109：vue+openlayers 定位动画（平移-弹性平移-飞行示例代码）
第109个点击查看专栏目录本示例的目的是介绍如何在vue+openlayers项目中来实现定位动画,实现平移,飞行,弹性动画等. 直接复制下面的 vue+openlayers源代码,操作2分钟即可 ...

Openlayers 圆的操作

Openlayers 圆的操作

OpenLayers 教程

Openlayers 圆的操作

在线示例

Openlayers 圆的操作相关推荐

最新文章

热门文章