openlayer4

OpenLayer4实现自定义地图聚类图层

前言：一直感觉不论OL还是arcgis这个地图聚类是真的丑，实在让人看不下去，反观leaflet插件的的聚合效果那叫一个好看，个人感觉好看多了去了，那么把这个聚合效果用到OL上面去啊，这个是一个很好玩的事，本篇文章用到了自定义的聚类的扩展图层，感谢@牛老师源代码启发，在此基础上进行进一步的封装。先来张效果图：这张照片整的感觉都变形很多。其实一点没变形一、自定义扩展图层下载（github）ol.la
不玩了啊·2023-04-06 03:03

OpenLayer4跨域访问GeoServer发布的TMS服务

在geoserver中WEB-INF文件夹下，修改web.xml文件，添加过滤器内容，如下：CorsFilterorg.apache.catalina.filters.CorsFiltercors.allowed.origins*cors.allowed.methodsGET,POST,HEAD,OPTIONS,PUTcors.allowed.headersContent-Type,X-Reque
忘我怎么解·2022-02-09 23:32

Openlayers4加载WMS地图

openlayer4加载WMS由于新项目中，用采用了Openlayers4，因此，在这里说一下Openlayer4加载WMS地图服务的方法。
此爱如少年·2020-08-18 09:50

openLayer4实现动态改变标注图标

本文实例为大家分享了openLayer4动态改变标注图标的具体代码，供大家参考，具体内容如下地图上经常需要标出标注，标注点击之后要有相应的变化来达到一定的效果。
·2020-08-17 16:57

OpenLayer4实现自定义标注

前言：OL可以让我们实现自定义的标注样式，用过CAD的同学应该都知道CAD中有上下文字中间用横线隔开的样式，这样标注让人一目了然的了解信息。给人以直观的的信息表达，本文实现就是分式的标注。先来张图：一、关于ol.style.Icon类该类中有一个img参数，该参数非常好用，该参数的输入类型为Image|HTMLCanvasElement，第二个类型就是canvas标签，作为一个GIS开发人员，相信
饮水思源09·2020-08-15 20:06

OpenLayer4实现自定义标注

前言：OL可以让我们实现自定义的标注样式，用过CAD的同学应该都知道CAD中有上下文字中间用横线隔开的样式，这样标注让人一目了然的了解信息。给人以直观的的信息表达，本文实现就是分式的标注。先来张图：一、关于ol.style.Icon类该类中有一个img参数，该参数非常好用，该参数的输入类型为Image|HTMLCanvasElement，第二个类型就是canvas标签，作为一个GIS开发人员，相信
hpugisers·2020-08-15 20:31

OpenLayer4结合高德API实现地图选点路径规划

前言：路径规划也是WebGIS一个特点，我们在做某些应用的时候可能会用到路径规划的功能，该功能我们也可以自己实现，利用数据等，但是OpenLayer一大特色就是加载在线地图，向高德，百度等，这些地图都提供一些api接口供大家调用获取数据，在做路径规划的时候，刚开始用的百度提供的api，发现这个路径规划的真烂你都不好意去吐槽，最后换成高德api总体效果还算满意。废话不多说进入正文。先来张图：一、高德
hpugisers·2020-08-15 20:31

OpenLayer4实现卷帘效果

一、用途：卷帘效果在多个图层叠加的时候会用到。但是还想两个图层相互切换或者两个图层在一块，这个时候就用到卷帘效果，我们可以把这个卷帘做成一个label可以来回拖动，这样既可以达到控制效果，也很美观。先来张效果图：二、全部源码地图卷帘效果body{overflow:hidden;}html,body,.map{width:100%;height:100%;position:absolute;box-
hpugisers·2020-08-15 20:31

OpenLayer4加载svg

关于加载svg的代码，网上是少之又少，牛老师博客倒是有，但是只是核心代码，并没有给出完整的demo,而且核心代码中有个问题对于这个ol渲染不太理解的话的话应该做不出来效果，就是关于坐标转屏幕坐标的问题，必须需要地图渲染完成之后才能拿到否则没法转换，得出转换为空的结果。放个图：一、原理通过静态加载图片的方式加载svg，给定初始化范围，更重要的是给定imageSize，关于imageSize是通过给定
weixin_30781631·2020-08-15 19:07

Openlayer4的wfs属性查询和空间查询遇到的坑

项目需求是在特定的区域下搜索地物，类似地理围栏里查找POI的功能。而且要求通过图层叠加的方式，不能直接访问数据库然后遍历绘制。这里创建了VectorLayer，网上例子很多就不再赘述，下面是引用官网提供的Example，通过fetch（类似ajax）请求，请求wfs的服务实现。本文是记录下当时遇到的坑。查询部分的代码如下：//测试用的geometry类型数据（Polygon）varnewPoly=
summer2333·2020-08-15 19:33

openlayer4中使用geojson数据

GeoJSONvarimage=newol.style.Circle({radius:5,fill:null,stroke:newol.style.Stroke({color:'red',width:1})});varstyles={'Point':newol.style.Style({image:image}),'LineString':newol.style.Style({stroke:new
浪子边·2020-08-15 19:27

openlayer4加载ArcGIS离线瓦片地图

Openlayer4加载ArcGIS离线瓦片地图本来以前是用openlayer2,在太乐地图下载的地图,会有模版.之前直接在此基础上更改的代码,但是随着项目的发展功能的增多,openlayer2越来越不适应现在的项目
weshmily前端·2020-08-15 19:23

openlayer4中获取地图坐标的方法

WFSvarmap=newol.Map({layers:[newol.layer.Tile({source:newol.source.OSM()})],target:'map',view:newol.View({center:ol.proj.transform([104,30],'EPSG:4326','EPSG:3857'),zoom:10})});//监听singleclick事件/*map.
浪子边·2020-08-15 19:21

基于openlayer4生成热力图

ol加载热力图radiussizeblursize//底图varraster=newol.layer.Tile({source:newol.source.Stamen({layer:'toner'})});varmap=newol.Map({layers:[raster],target:'map',view:newol.View({center:[117.3626,32.9184],project
_奈落_·2020-08-15 19:17

基于openlayer4画区域

画区域-->varraster=newol.layer.Tile({source:newol.source.OSM()});varwkt='';//区域wkt点集varformat=newol.format.WKT();varfeature=format.readFeature(wkt,{dataProjection:'EPSG:4326',featureProjection:'EPSG:4326
_奈落_·2020-08-15 19:17

基于openlayer4画线，鼠标悬浮线上弹窗

根据点位画线、鼠标悬浮提示信息-->.ol-popup{position:absolute;background-color:white;-webkit-filter:drop-shadow(01px4pxrgba(0,0,0,0.2));filter:drop-shadow(01px4pxrgba(0,0,0,0.2));padding:15px;border-radius:10px;borde
_奈落_·2020-08-15 19:17

基于openlayer4打点，点击点位弹出窗

打点位、点击点位弹出信息-->//初始给的中心点坐标。varcenterX=117.3626;varcenterY=32.9184;//我们需要一个vector的layer来放置图标varlayer=newol.layer.Vector({source:newol.source.Vector()})varmap=newol.Map({layers:[newol.layer.Tile({//加载互联
_奈落_·2020-08-15 19:16

OpenLayer4地图全屏的实现

OpenLayer4地图全屏的实现第一种方式：自实现1.首先将地图容器的长宽设置成100%。2.对form和body标签长宽设置成100%。3.对浏览器进行全屏设置。
David_SIAT·2020-08-15 19:17

openlayer4设置地图的默认鼠标手势和拖拽鼠标手势

openlayer2之后，openlayer3版本有较大升级。openlayers4是3的自然升级。openlayers4中默认的地图鼠标手势都是箭头。如果需要设置为像百度、高德之类的鼠标手势，需要自行定制。设置方法很简单，完全通过控制css就可以了。地图默认手势修改：#map{      cursor:url(openhand.cur),auto;    }地图交互手势修改：/*鼠标样式设置*/
fredricen·2020-08-15 18:17

openlayer4在地图上绘制统计表格

在使用openlater开发的过程中，有时候会需要在地图上绘制一些数据的统计表格，openlayer官网还没有类类似的例子，网上大多数例子的实现原理是通过在地图上添加feature或overlay的形式，使用canvas绘制一张图片给feature设置样式，或在overlay里生成图表。具体代码如下（这个例子是使用feature，给feature设置样式，以绘制饼状图为例）：Stylingfeat
小木子。。。·2020-08-15 18:14

openLayer4动态改变标注图标

地图上经常需要标出标注，标注点击之后要有相应的变化来达到一定的效果。此实例即在地图上添加图片标注，点击标注，更换标注图片，再点击其他标注，上一个标注恢复原来的标注图片。/*初始化地图*/varmap;functioninitmap(){map=newol.Map({layers:layers,target:'mapContainer',view:newol.View({//地图中心坐标center
loves小鱼儿·2020-08-15 18:26

openlayer4入门系列一(地图描绘经纬度点)

openlayer结合天地图描绘点其他地图描点也是一样的.请去参考官网.下面是四川天地图的结合openlayer开发的API,里面有案例:http://www.scgis.net/scgcmap/help/mapAPIdown.aspx案列写的是十分的复杂.我在我的项目中简化了下.引入js.css天地图四川要素查询下面是代码varmap;varstyleCache={};window.onload
Whyloveit·2020-08-15 17:48

openlayer4中加载瓦片图层

瓦片图层一般作为webgis中底图，通常使用的有OSM（OpenStreetMap)（最方便），其他地图如百度地图，高德地图也可以作为数据源进行加载。也可以自己制作瓦片图层进行发布，然后调用。varmap=newol.Map({layers:[newol.layer.Tile({source:newol.source.OSM()}),vector],target:'map',view:newol.
浪子边·2020-08-15 17:47

openlayer4地图及图层导出图片问题小结

直接使用ol4中的地图导出功能在我们的项目中可能会存在跨域问题，导致地图不能正常的转为二进制。解决方法：1//自定义图层中添加crossOrigin，具体如下：vartdtTerLayer=newol.layer.Tile({visible:true,source:newol.source.XYZ({crossOrigin:'anonymous',url:tdtter})});varedge=ne
David_SIAT·2020-08-15 17:43

openlayer4 + arcgisserver + wms +sld

需要注意的点是sld文件的编写sld文件：//最好为NamedLayertrunk//一定要加上trunk对应图层名trunk//style名group0Featuregeneric:geometrysimpledefaultrule#0000802.0varlayers=[newol.layer.Tile({extent:extent,source:newol.source.TileWMS({u
朕要睡了·2020-07-30 16:42

基于openlayer4实现地图联动效果

1.原理说明基于openlayer4实现地图联动效果，就是创建多个地图容器，共用一个视图对象（ps:地图的视图关联着地图的extent事件，共用一个视图也就意味着所有地图容器同步一个事件，省去自己手动关联地图
YH20090580118·2020-07-30 14:51

openlayer4 多图联动

之前在ol2中多图联动需要监听地图move事件，在事件中对其他地图进行位置更新来达到多图联动的效果，在ol4中可以直接通过多个地图共享一个view来达到多图联动的效果。直接上代码多图联动body{height:100%;width:100%;position:absolute;overflow:hidden;}.top{height:50%;width:100%;float:left;}.bott
jjxliu306·2020-07-16 01:19

openlayer4 弹出框封装

很多场景需要在地图上弹出一个tooltip或者popup之类的小窗口显示一些信息，最近简单做了一下封装，方便后续调用，代码如下：/*刘玉峰[email protected]*///点击后高亮下方的feature并且弹出popup信息做展示Popup=function(map){this.map=map;//添加一个popup的divvardiv=document.createE
jjxliu306·2020-07-16 01:19

openlayer4 弹出框封装

阅读更多很多场景需要在地图上弹出一个tooltip或者popup之类的小窗口显示一些信息，最近简单做了一下封装，方便后续调用，代码如下：/*刘玉峰[email protected]*///点击后高亮下方的feature并且弹出popup信息做展示Popup=function(map){this.map=map;//添加一个popup的divvardiv=document.cre
jjxliu306·2018-06-06 11:00

openlayer4 弹出框封装

阅读更多很多场景需要在地图上弹出一个tooltip或者popup之类的小窗口显示一些信息，最近简单做了一下封装，方便后续调用，代码如下：/*刘玉峰[email protected]*///点击后高亮下方的feature并且弹出popup信息做展示Popup=function(map){this.map=map;//添加一个popup的divvardiv=document.cre
jjxliu306·2018-06-06 11:00

openlayer4 多图联动

阅读更多之前在ol2中多图联动需要监听地图move事件，在事件中对其他地图进行位置更新来达到多图联动的效果，在ol4中可以直接通过多个地图共享一个view来达到多图联动的效果。直接上代码多图联动body{height:100%;width:100%;position:absolute;overflow:hidden;}.top{height:50%;width:100%;float:left;}.
jjxliu306·2018-05-31 11:00

openlayer4 多图联动

阅读更多之前在ol2中多图联动需要监听地图move事件，在事件中对其他地图进行位置更新来达到多图联动的效果，在ol4中可以直接通过多个地图共享一个view来达到多图联动的效果。直接上代码多图联动body{height:100%;width:100%;position:absolute;overflow:hidden;}.top{height:50%;width:100%;float:left;}.
jjxliu306·2018-05-31 11:00

Openlayer4加载ArcGIS离线瓦片地图

Openlayer4加载ArcGIS离线瓦片地图本来以前是用openlayer2,在太乐地图下载的地图,会有模版.之前直接在此基础上更改的代码,但是随着项目的发展功能的增多,openlayer2越来越不适应现在的项目
shmily科技·2018-01-12 13:01

openlayer4加载天地图

最近因为工作原因很少撸博客，感觉自己堕落了。公司有个项目整个都是我写，所以想写一些标准的东西出来，以后其他项目也可以拿来用，所以很多东西需要细琢磨。这一琢磨不要紧，时间哗哗的过。目前虽然项目可正常运行，但感觉还是有一些东西需要优化改进。最近也是觉得自己还是太菜了，很多东西真的拿不准，一个细小的问题都要思考很长时间，google半天甚至一天看n篇文章综合比较才制定套路，都是自己见识少知识不足导致。最
ChengYz_·2017-08-15 22:04
上一页 1 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他