Openlayer

openlayers3中的overlay图标入门

学习overlayvarmap=newol.Map({layers:[newol.layer.Tile({source:newol.source.OSM()})],view:newol.View({center:ol.proj.fromLonLat([103,30]),zoom:8,}),target:'map'})//下边创建一个overlayvarmapElement=document.get
bigFace2019·2020-08-15 18:20

openlayers3笔记：使用overlay

学习overlayVectorLabelsOverlayLabels标注点body,html,div,ul,li,iframe,p,img{border:none;padding:0;margin:0;}#map{width:100%;height:570px;}#menu{width:100%;height:20px;padding:5px10px;left:10px;font-size:14p
bigFace2019·2020-08-15 18:20

OpenLayers不显示放大放小按钮，自定义控件

//实例化比例尺控件（ScaleLine）varscaleLine=newol.control.ScaleLine({//设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）units:"metric"});varmousePosition=newol.control.MousePosition({projection:'EPSG:4326',coor
Gary_Leong·2020-08-15 18:18

OpenLayers 画圆画椭圆

=='None'){draw=newDraw({source:source,type:'Circle'});map.addInteraction(draw);}}这是OpenLayers官方自带的画圆的方法
Gary_Leong·2020-08-15 18:17

OpenLayers3加载百度地图

BaiduMapSource.js/***加载百度地图*@returns{ol.layer.Tile}*/functionloadBaiduMap(){//数据源信息varattribution=newol.Attribution({html:'Copyright:©2015Baidu,i-cubed,GeoEye'});//地图范围varextent=[-20037508.34,-20
Gary_Leong·2020-08-15 18:17

OpenLayers设置显示文本

varnonTextStyle=newol.style.Style({//把点的样式换成ICON图标fill:newol.style.Fill({//填充颜色color:'rgba(37,241,239,0.2)'}),//图形样式，主要适用于点样式image:newol.style.Circle({//半径大小radius:7,//填充fill:newol.style.Fill({//填充颜色c
Gary_Leong·2020-08-15 18:47

动态标绘演示系统1.0(for OpenLayers3)

实现OpenLayers3（http://openlayers.org）版本的动态标绘API。目前1.0版本，仅支持简单符号绘制。
gispace·2020-08-15 18:46

Openlayers3中SVG图加载

概述：鉴于SVG的优势，在图层展示的时候，会想到SVG的方式，但是OL3里面只支持ImageStatic的方式加载，也就是只能加载栅格图片，为此，本文实现Openlayer3中SVG图层的展示。
LZU-GIS·2020-08-15 18:45

Openlayers4中地图的导出

概述：本文讲述Openlayers4中地图的导出，包括调用天地图切片跨域、Geoserver11WMS跨域等。
LZU-GIS·2020-08-15 18:45

Openlayers3中实现地图的切割

概述：本文讲述如何在Openlayers3中结合canvas实现对地图的切割。
LZU-GIS·2020-08-15 18:45

openlayers5中用iconfont作为图标

概述前面有文章openlayers4中用font设置图标样式就iconfont在ol5中的使用做了一个尝试，后面有很多童鞋问我说实现不了，一直没有时间去做一个详细的测试，最近在做了诸多测试后，觉得这种方式比较靠谱
LZU-GIS·2020-08-15 18:45

openlayer4在地图上绘制统计表格

在使用openlater开发的过程中，有时候会需要在地图上绘制一些数据的统计表格，openlayer官网还没有类类似的例子，网上大多数例子的实现原理是通过在地图上添加feature或overlay的形式
小木子。。。·2020-08-15 18:14

Openlayers之feature踩坑经历-错位偏移

OpenLayers之feature踩坑经历这是一篇关于feature图层错位的解决方案，可能遇到的问题不是一样的不一定有效果，但是不妨看看，培养一下解决问题的思路公司让写个项目，是在地图上框个地方然后加上点击事件的
DiracHome·2020-08-15 18:41

Openlayers3 实现点击不同的图标弹出不同的popup信息

1、我们老师的书籍《WebGIS之Openlayers全面解析》上面有关于popup的例子，作为例子，肯定是写死的，没有查询数据库，也就是只有一个地理位置。
YSoup·2020-08-15 18:40

JavaScript、jquery方法累计

JavaScript、jquery方法累计四、openlayers3制图iP.init=function(PlanAirLine,RealAirLine,arrx,arry){varPlanAirPoint
BoBoLUI·2020-08-15 18:36

OpenLayers3入门篇-点的扩散效果

点的扩散效果原理与点在线上的运动类似，先根据传入的坐标先创建一个layer,然后绑定一个addfeature的事件（flush函数），在这个事件里面随着时间的推移不断的对这个layer的style进行设置从而动态的做出扩散的效果出来functionpointLight(pointC){map.removeLayer(vector2);pointCoord=pointC;varsource=newo
adventure_xph·2020-08-15 18:03

OpenLayers3入门篇-单击事件

单击事件的绑定在OpenLayers的官方API中有专门的事件函数（ol.interaction），对于事件的绑定也比较方便，但OL没有右键事件，绑定事件的对象是针对整个地图对象，对相应的地图层操作时需要对
adventure_xph·2020-08-15 18:32

Openlayers+GeoServer导出地图图片的跨域问题

跨域问题：加载了geoserver发布的图层，在导出时html页面后台提示错误：SecurityError:Theoperationisinsecure.原因是：canvas导出图片时，涉及到跨域的问题，需将图层的crossOrigins设置为“anonymous”varwmsSourceLucc=newol.source.TileWMS({crossOrigin:'anonymous',//解决
ANNENBERG·2020-08-15 18:31

openlayers笔记

各种版本包下载地址：https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js2.setView
ANNENBERG·2020-08-15 18:31

Openlayers API整理

1、创建地图Map创建地图底图：需要用newol.Map({})地图map是由图层layers、一个可视化视图view、用于修改地图内容的交互interaction以及使用UI组件的控件control组成的。（1）、创建基本地图letmap=newol.Map({target:'map',//对象指向layers:[//图层newol.layer.Tile({//这里定义的是平铺图层source:
ANNENBERG·2020-08-15 18:31

openLayers 坐标转换 EPSG:3857和EPSG:4326区别

import{fromLonLat}from"ol/proj";在openlayers中创建map时候会有个view属性，该属性下面会存在一个center属性。这个属性就是设置中心位置的坐标。
ANNENBERG·2020-08-15 18:31

webgis原理剖析系列-以openlayers为例 -04 请求地图行列号的计算

首先要了解一些基础知识1：经纬度所对应的投影坐标范围Google地图采用的是Web墨卡托投影（如下图），为了方便忽略了两极变形较大的地区，把世界地图做成了一个边长等于赤道周长的正方形（赤道长度为6378137米），原点在正方形中心，即经纬度为（0,0）处。Web墨卡托投影的X，Y坐标取值范围为：[-20037508.3427892,20037508.3427892]，对应的经度取值范围为[-180
A873054267·2020-08-15 18:00

瓦片地图之百度地图（openlayers）

在OpenLayers3中，默认使用的瓦片地图的坐标系是如何定义的？经分析可知，OpenLayers3的瓦片坐标系的原点在左上角，向上为y轴正方向，向右为x轴正方向。
zxc13552314286·2020-08-15 18:59

重新定义OpenLayers 3的瓦片坐标系

ol.source.TileImage作为ol.source.XYZ的父类，除了可以转换坐标之外，还具备更加强大的功能，修改分辨率。下面我们使用它来加载百度地图，这次是正确的：//自定义分辨率和瓦片坐标系varresolutions=[];varmaxZoom=18;//计算百度使用的分辨率for(vari=0;i这个代码同上面的代码相比，引入了ol.tilegrid.TileGrid，由名字可见
zxc13552314286·2020-08-15 18:59

划线、标线、贴线、删线竟然如此简单 -来自openlayers

如果你自己写过在地图上划线、标记、自动贴合、删除适量线条等这些功能，那么你就会喜欢上下面来自openlayers官方的代码：topolisintegrationimportFeaturefrom'ol/
凌渊阁·2020-08-15 18:59

openlayers 画点并标注

openlayers画点并标注，用静态图片作为图层，并从数据库加载点信息显示在图层上。
yw8395183·2020-08-15 18:27

openlayer读取三种类型的本地瓦片的计算公式

1.arcgisserver瓦片的计算公式及geturl方法：getURL:function(bounds){varlon1=bounds.left;varlat1=bounds.top;varlon2=bounds.right;varlat2=bounds.bottom;varpicHeight=256;//图片大小varpicResolution,picRow,picCol;//分辨率,所求图
VisonYH·2020-08-15 18:27

openlayers6 添加 svg 作为Icon 标记

以下代码风格为vue的：1.在data中定义：mapPollutionImage:null2.自定义方法initSvgImage(src){constimage=newImage(200,200)//这里设置的大小为原始大小image.src=src//src为svg地址returnimage}3.mounted中设置：this.mapPollutionImage=this.initSvgImag
xiuyangzhe·2020-08-15 18:26

openLayer4动态改变标注图标

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

openlayers自定义坐标系以及坐标转换

1、部分参考https://www.jianshu.com/p/9eca1bc8a12d，登录http://epsg.io/根据坐标名称查询相应EPSG代号，本地以西安80123°带为例，自定义该坐标系并将其转化为WGS84坐标系。2、获取该带数范围，获取proj4中参数，该参数包括参考椭球体，中心带，偏移量等数值，proj4.defs("EPSG:2384","+proj=tmerc+lat_0
123456chenliin·2020-08-15 18:25

OpenLayers实现点标记

注：前提地图（map）已经创建成功一、实现单个标点import{VectorasSourceVec}from'ol/source'import{Feature}from'ol'import{Point}from'ol/geom'import{Style,Icon}from'ol/style'import{VectorasLayerVec}from'ol/layer'exportdefault{mo
好的，，·2020-08-15 18:55

openlayer2屏蔽双击放大事件

openlayer2屏蔽双击放大事件环境为openlayer3.1.3.1代码如下OpenLayersClickEventExamplevarn=newOpenLayers.Handler.Click(
wo_buzhidao·2020-08-15 18:54

使用OpenLayers根据经纬度对地图进行单个标点，以及点击标点弹框的实现（没有从后台获取经纬度数据）

说明：OpenLayers3详细官方API文档：http://develop.smaryun.com:81/API/JS/OL3InterfaceDemo/index.htm1.该例子为页面在固定经纬度的情况下对地图进行单个或者多个标点
java_codeMan·2020-08-15 18:19

openlayers实现选择要素，并弹框显示选中要素的信息

openlayers中实现要素选择的类是ol.interaction.Select.首先实例化一个选择工具selectTool，并添加到地图上：使用选择工具选中的要素，存储在选择工具的features属性中
江南Code·2020-08-15 18:47

Openlayers Overlay导致偏移

说明：在做项目过程中，用overlay做了一个infowindow弹窗，但是在使用过程中发现一个bug：overlay.setPosition以后，会出现偏移，但是拖动一下地图或者点击一下地图其他地方就回到正确的位置。代码如下：letoverlay=newol.Overlay({id:"overlay",element:"marks",positioning:"bottom-center",sto
weixin_38170255·2020-08-15 18:12

openlayers加载切片地图

openlayers2和openlayers3加载切片地图使用的接口是不同的。下面做分析。
weixin_34034670·2020-08-15 17:39

OpenLayers 3/4 加载 Baidu Maps 瓦片(偏移更小)

通过OpenLayers3/4的ol.layer.Tile可以加载若干互联网底图服务，【扯淡大叔】的《OpenLayers3Primer》书中“万能瓦片地图加载秘籍”一节列举了各种地图的具体调用示例。
weixin_34185512·2020-08-15 17:39

OpenLayer加载百度坐标偏移问题解决（方案二）

前言：上一篇文章介绍了百度坐标加载在，天地图，OSM像这类的非百度地图的第三方地图，本文主要讲述的用加载百度地图作为底图这样我们不再需要坐标转你，但是在使用WGS-84坐标的时候，我们需要把他们转到BD-9坐标系上才能加载到地图上的正确位置。上一篇文章中，我们只需要转换百度坐标到WGS-84。我们在网上找到的加载百度的代码，大多代码是切片是由偏移的，我们虽然能够加载百度和显示，然后因为偏移，所以我
weixin_30413739·2020-08-15 17:38

Openlayers 2 取消鼠标缩放地图的功能

需要实现的功能：取消鼠标缩放地图，即滚动鼠标的滚轮地图没有响应事件，只能用鼠标平移地图版本：OpenLayers2.13.1测试代码直接用官方例子http://dev.openlayers.org/releases
weixin_33743703·2020-08-15 17:38

openlayers基础（一)——Map

openlayers是一个开源免费的js库，用于在网页中实现地图的动态显示和交互。一起看看官方对openlayers的介绍。
weixin_30500289·2020-08-15 17:06

openlayers三：添加图片和图标

openlayers添加图片是指：添加在地图上的图片会跟随地图同步放大缩小而添加图标是指：添加在地图上的图片不会跟随地图同步放大缩小添加图片：首先初始化图片图层：1initImageLayer:function
weixin_30410119·2020-08-15 17:06

openlayers二：添加矢量图形文字

openlayers可方便的在地图上添加圆、多边形、文字等矢量内容，修改这些矢量内容的样式也很简单。
weixin_30389003·2020-08-15 17:06

Openlayers离线加载天地图

今天，我来说说如何实现天地图的离线以及Openlayers加载离线数据实现天地图数据的展示。
weixin_30325971·2020-08-15 17:05

OpenLayer加载百度坐标偏移问题解决（方案一）

思路：方案一的问题就是解决百度坐标加载OSM地图或者天地图偏移的问题，我们通过百度api获取的坐标，用OL去加载的时候有坐标偏移的问题，百度坐标获取的是BD-9经过二次加密的坐标系，而OL是WGS-84要想不偏移我们应该将BD-9转到WGS-84，在这里我们用到了一个大牛编写的转换插件。插件地址：https://github.com/wandergis/coordtransform坐标不转换叠加图
weixin_30347335·2020-08-15 17:05

openlayers调用瓦片地图分析

网上有诸多资料介绍openlayers如何调用百度地图或者是天地图等常见互联网地图，本文作者使用的是不是常见的互联网瓦片，现将调用过程进行整理与大家分享。
weixin_30306905·2020-08-15 17:05

OpenLayers中的球面墨卡托投影

最近看OpenLayers，研究到地图投影时找到官方的文档，就翻译了一下，由于英文能力差，翻译不好的地方，请看原文原文地址：http://docs.openlayers.org/library/spherical_mercator.html
weixin_30376509·2020-08-15 17:35

OpenLayers添加地图标记

添加地图标记functioninit(){varmap=newOpenLayers.Map("ch3_markers");varlayer=newOpenLayers.Layer.OSM("OpenStreetMap
weixin_30394669·2020-08-15 17:35

openlayers之加载谷歌地图

之前项目中一直使用高德地图作为底图，但高德地图影像图只限于城市地区，所以决定替换为谷歌地图。其实一直以为谷歌地图不能访问，不知道有没有像我一样懒的小伙伴……加载谷歌地图的地址总结如下：谷歌交通地图地址：http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn
weixin_30265171·2020-08-15 17:34

如何使用Openlayers 3加载谷歌离线地图

使用Openlayers3调用地图服务说明：这里使用ol.source.XYZ（更多语法请参考这儿.）来调用地图服务。
AG2016·2020-08-15 17:33

openlayers加载百度地图作为底图坐标偏移的解决办法

openlayers加载天地图作为底图，在网上找了公开的服务资源，要做到百度地图与天地图之间切换，同样也从网上找到百度地图的服务资源但是在地图上坐标总是有偏差，最初的代码是这样的：varprojection
haha_ying_haha·2020-08-15 17:01
上一页 26 27 28 29 30 31 32 33 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他