openlayes3在地图上画点线

最新推荐文章于 2024-07-20 16:35:33 发布
最新推荐文章于 2024-07-20 16:35:33 发布
阅读量495 收藏
点赞数
分类专栏： GIS开发 文章标签： openlayes

地图是由图层组成的，而图层又分为ol.layer.Tile和ol.layer.Vector,ol.layer.Tile可以构建底图，ol.layer.Vector指定矢量图层，画点画线或者创建其他基本就是创建ol.layer.Vector，ol.layer.Vector和map对象一样，也是由许多属性构成，但是创建点线基本只会用到source属性。Source又由feature组成。


样例代码-创建点

1.创建Featrue,设置geometry属性


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     var saoguan = 
     
     new ol.Feature({
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
             
     
     geometry:
     
     new ol.geom.Point(ol.proj.fromLonLat([
     
     113.5991,
     
     24.8166]))
    
    
    
   
   

 
 
    });


2.设置此点的样式


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     saoguan.setStyle(
     
     new ol.style.Style({
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
           
     
     image:
     
     new ol.style.Icon({
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
           
     
     color:
     
     '#4271AE',
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
           
     
     src:
     
     'data/dot.png'
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             })
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           })
    
    
    
   
   

 
 
     );

 

3.传入source 


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     var source = 
     
     new ol.source.Vector({
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     features:[saoguan]
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     });


4.传入layer,设置点


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     var layer = 
     
     new ol.layer.Vector({
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
           
     
     source: source
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     });


5.设置底图layer


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     var rasterLayer =  
     
     new ol.layer.Tile({
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
           
     
     source: 
     
     new ol.source.OSM()
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
        })；


6.最后将地图layer和点layer一并传入map中


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     var map = 
     
     new ol.Map({
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     layers: [rasterLayer, layer],
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     target: 
     
     document.getElementById(
     
     'map'),
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     view: 
     
     new ol.View({
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     center: ol.proj.fromLonLat([
     
     113.5991,
     
     24.8166]),
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     zoom: 
     
     3
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
        })
    
    
    
   
   

 
 
});

画点的方法详见：

http://openlayers.org/en/latest/examples/icon-color.html?q=point

 

 

创建线

步骤和画点差不多，只是在前两步中的方法有不一样

1.设置一个feature


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     var feature = 
     
     new ol.Feature({
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
         
     
     geometry:
     
     new ol.geom.LineString(
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
              [[
     
     -1e7, 
     
     1e6], [
     
     -1e6, 
     
     3e6]])
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         	});


2.设置style 

 


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     feature.setStyle(
     
     new ol.style.Style({
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        	
     
     stroke: 
     
     new ol.style.Stroke({
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
                    
     
     width: 
     
     3,
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
                   
     
     color: [
     
     255, 
     
     0, 
     
     0, 
     
     1]
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
                   })
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         	}));

 

啊嘞嘞嘞嘞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
openlayers根据数据在地图上画点
qq_42309685的博客
12-13 2139
openlayers根据数据在地图上画点 效果如下： js代码： // 模拟后台数据 var trackData = [ { "lon":120.124512, "lat":35.978006 }, { "lon":120.651855, "lat":34.867905 }, { ...
用openlayers3绘图(点、线、圆、正方形....)
weixin_44592912的博客
08-20 2934
用openlayers3绘图(点、线、圆、正方形…) HTML部分 <div id="map"> <select id="type"> <option value="None">无</option> <option value="Point">点</...
JavaScript、jquery方法累计
BoBoLUI的博客
10-25 554
JavaScript、jquery方法累计 一、页面弹动 iG.setBounce = function(){ uexWindow.setBounce(“1”); uexWindow.showBounceView(“0”,”#f4f4f4”,”0”); uexWindow.showBounceView(“1”,”#f4f4f4”,”0”); uexWind
openlayer + echarts 实现地图划线
北尘
06-14 803
之前分享过maptalks + echarts 实现地图划线的实现原理，这里在分享一下openlayer +echarts 实现划线的实现。 <template> <div id='map'></div> </template> <script> import Map from 'ol/Map' import 'ol/ol.css' import View from 'ol/View' import TileLayer fro...
Openlayers简介|体系架构|主要API|
最新发布
weixin_45213317的博客
07-20 1746
OpenLayers是最早的WebGIS开源库之一，迭代开发的历史较长，目前是WebGIS中功能齐全、资料和教程丰富的框架，同时其学习曲线比较平缓，很容易上手。OpenLayers采用了Canvas、WebGL和HTML5中最新的技术来构建框架，可以在移动设备上运行。
openlayers使用——ol地图上标注
sinat_36319434的博客
04-07 782
因为近期在使用openlayers，记录下比较常见的地图标注的用法。 下面是在地图上标注图片的方法。data为经纬度数据，例如 ：[{longitude:116.40,latitude:39.90}]（注：北京经纬度），url为图片url。 function(data,url){ var features = [], feature, name; data.fo...
openlayers 地图 画线
weixin_43863505的博客
08-16 1928
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>de
openlayers绘制地图并叠加标记点以及自定义图标
_小郑有点困了的博客
07-06 2420
openlayers绘制地图并叠加标记点以及自定义图标 最近正在学习openlayers相关的东西，但是这东西实在有点复杂，但是他能使用的东西确实很酷炫，不得不说openlayers很强大。还在摸索之中。。。，说它复杂在于api该怎么去用，该怎么选择使用地图数据源等等，先把目前实现的效果做个笔记。 1.地图可缩放 2.地图悬停省份可即时改变效果，离开自动回复 3.鼠标点击可输出点击的省份位置 4.绘制了一个maker，金黄色的那个。。 5.四个自定义图片的要素 效果图 代码 复制粘贴即可使用 <
openlayes + vue 最新版本 实现 轨迹移动动画
09-14
openlayes + vue 最新版本 实现 轨迹移动动画 下载前请移步博客地址观看效果：https://blog.csdn.net/KK_bluebule/article/details/126847213 里面有详细说明
vue+openlayer+echarts 在地图点位上添加柱状图
weixin_43842567的博客
05-28 3637
** vue+openlayer+echarts 给地图点位添加柱状图 ** 重点在方法addColumnChart()里，三步实现 在网上百度了很多相关文章，最终都无疾而终，只能硬着头皮自己摸索，好在功夫不负有心人，最终还是实现了在地图上，鼠标放上点位，显示对应的柱状图信息 HTML <div id="map" ref="mapRef"></div> 地图容器 &l...
openlayers 地图上加图标_openlayers在底图上添加静态icon
weixin_39945445的博客
12-19 1296
越学习openlayer你会发现openlayer是真的很强大，今天记录一下学习的成果，需求是做那种室内的CAD的场景然后里面展示人员icon并且实时展示人员的位置信息，以及点击弹出对应人员的一些位置信息，姓名，电话等等，这个在工业互联网中是很常见的，接下来就开始操作了由于我是在vue+ts中写的，所以下面的代码片段可能是基于vue来写的第一步，我们需要建立一个底图，这个底图可以是谷歌地图也可以是...
Openlayer地图叠加瓦片
07-12
OpenLayers 提供了丰富的功能，允许开发者轻松地在地图上叠加不同的瓦片图层。 在OpenLayers中，叠加瓦片主要涉及以下几个关键概念和步骤： 1. **瓦片源（Tile Source）**：瓦片源定义了如何获取地图瓦片。这可以...
openlayer3实现禁止鼠标滚动缩放地图(附加：实现禁止点击地图放大地图)
study_7forever的博客
11-04 3287
首先吐槽一下，网上的资源很多，但是对口的却很少。 控制openlayer地图，禁止使用鼠标滑轮滚动进行缩放地图。根据版本不同，使用的方法也不同。 我现在使用的openlayer3.0版本，使用方式一能解决我的问题。分享下面方式二和方式三方法，供不同版本的小朋友参考。 方式一： 直接说解决方法： 以添加interactions的方式实现禁用鼠标滑轮滚动缩放地图效果(open layer3....
OpenLayers 实现画点、画线、画面、画圆
L221545的博客
11-08 870
OpenLayers 实现画点、画线、画面、画圆
OpenLayers - 加载静态图片（十二）
小小的前端
04-26 3791
简介 本文讲解，如何使用OpenLayers在载静态图片上添加标记，预览图片。主要使用ol.source.ImageStatic用于显示单个静态图像的图层源。使用OpenLayers的好处有，地图的放大、缩小等view视图功能都可以使用，根据地理坐标绘制标注也能很好的使用，对于演示而言，无疑加快了开发效率。 开始使用 初始化地图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /
js判断点是否在平面几何图形内(基于百度地图方法)
Stavin Li的博客
09-05 3815
1. 点线面数据格式 点: { x: xxx, y: xxx } 线: [{ x: xxx, y: xxx }, { x: xxx, y: xxx }] 面: [{ x: xxx, y: xxx }, { x: xxx, y: xxx }, { x: xxx, y: xxx }…] 2. 方法详解 //判断点是否在另一平面图中 function isPointInPolygon(po...
Openlayers中多边形的聚合
dreamgis的专栏
05-28 1780
关于OpenLayers的Cluster ol.source.Cluster ol利用这个js对象实现对地图上feature进行聚合展示的控制，所有的features需要被放在一个feature数组中作为ol.source.Vector中features属性进行载入。 下面就是官方针对Cluster的API文档： new ol.source.Cluster(options) options: Constructor options. Name Type Description a
ol-地图上添加图标
冰雪为融的博客
08-20 2155
先总结：用到的核心知识 添加图标，首先要创建一个图层，然后把图层添加到地图上 vecSource = new ol.source.Vector({ features: [] }); vecLayer = new ol.layer.Vector({ renderMode: 'image', source: vecSource, style: function(feat) { return styleFunction(feat, ma...
OpenLayers 3 之 地图矢量图层（ol.layer.Vector）详解
热门推荐
研究与专注
06-07 2万+
在 GIS 中，地图一般分为两大类：栅格地图和矢量地图，栅格地图其实就是数码照片，只不过有的是卫星拍的。它们有一个共同特征，就是它们都是由很多个像素组成，像素大小是一致的，行高和列宽是一致的，从这个角度看，一幅遥感影像就像栅格。      矢量地图，是由很多要素组成的，每个要素都有自己的地理坐标，基于数学规则，无论矢量地图怎么放大，地图都不会失真。它是 OpenLayers 中非常重要的一种图层类型
vue+ol实现 ol 地图加载geojson
bitree1的博客
05-12 9393
一、背景 公司需要个简单的二维底图，加载点线面数据，为了省时间就用openlayers框架写一个简单的加载方法，openlayers核心包含Map对象、View视图、Layer图层、Source来源、Feature等特征 二、加载配置 三、地图初始化 import esb from '@/plugins/esb' import 'ol/ol.css' import Map from 'ol/Map' import View from 'ol/View' import { getWidth,getC
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值