openlayers3
evomap
如果查看案例出现问题,可以联系我
展开
-
openlayers3自定义工具条
对于一个WEB地图应用来说,地图工具条可以说是不可或缺的一个部分,但由于一些样式、功能往往并不能满足实际项目需要,所以仍要对此部分进行定制,从这里将说明如何利用Oplenayers 3根据项目要求做一个定制化的工具条。这里我是仿高得地图的样式,做的工具条。1、工具条功能内容内容切换地图(影像地图、地形地图)测量(点击测量会弹出测量选项框)图层控制(点击图层控制会弹出原创 2016-08-18 14:21:14 · 6218 阅读 · 3 评论 -
openlayers3使用已有的ArcGIS切片
有时候我们的切片数据是用ArcGIS配图后切的,或者是用地图下载器的ArcGIS切片的格式,项目需要用openlayers3,目前我用了三种方式来使用已有的ArcGIS切片。1.使用发布工具发布,然后自己拼URL地址使用IIS或者Tomcat发布切片,通过url可以访问到每个切片就可以。这种方法不需要读切片的配置文件,但是要知道切片的坐标系。var tileLayer = new ol.l原创 2016-08-19 15:00:29 · 4983 阅读 · 6 评论 -
openlayers3+功能拓展
最近看到openlayers3的一个功能拓展,每个功能都是在源码的基础上开发的,我们可以对照着学习源码,也可以参考着做自己的功能拓展,很实用。地址:http://viglino.github.io/ol3-ext/原创 2017-09-01 08:57:48 · 1567 阅读 · 0 评论 -
openlayers3和openlayers4,导航栏使用放缩平移动画
openlayers3中,放缩就是更改view的zoom,平移就是更改view的center,基于这个原理,我们很容易就写出放缩和平移的代码,代码如下:放大为例:function zoomIn() { var view = map.getView(); view.setZoom(view.getZoom() + 1);}向左平移为例:function moveTo原创 2016-09-20 10:53:06 · 8481 阅读 · 4 评论 -
openlayers3中三种动画实现
一、.在div中使用CSS3动画,以overlay的形式添加1.先为一个div创建css,我的css不太好,直接引用别人的css.css_animation{ height:50px; width:50px; border-radius: 25px; background: rgba(255, 0, 0, 0.9);原创 2016-09-12 17:02:31 · 27046 阅读 · 18 评论 -
openlayers3加载各种底图,补齐中..
不管是加载在线还是离线的底图,无非是按照一定的规则,正确定义图层(layer),然后将图层添加到map对象中,这里我map对象使用的坐标系为WGS84 4326,openlayers版本为3.17。1.在线天地图 var tian_di_tu_road_layer = new ol.layer.Tile({ title: "天地图路网", source: new ol.source.X原创 2016-08-18 16:00:51 · 19828 阅读 · 5 评论 -
openlayers3 自定义鹰眼缩略图
openlayers3自带的鹰眼缩略图控件功能很局限,想到自己动手去做,结果很容易就做出来了,这里主要用到的是两个map互相联动原创 2017-03-15 11:08:43 · 7278 阅读 · 2 评论 -
openlayers3中geowebcache的使用
geowebcache就相当于是openlayers和geoserver之间的中介,首先,geowebcache会根据你的配置信息,把相应的地图图层切好图,存放在磁盘中,然后在使用openlayer加载地图服务的时候,把地图服务的地址指向geowebcache,geowebcache接收到这些请求后,会根据请求的位置和比例尺在切片目录中找到对应的瓦片,然后返回给你,省去了动态生成地图的过程,速度大原创 2016-08-18 16:58:37 · 4223 阅读 · 0 评论 -
openlayers3中,鼠标滚轮动画
以前的web地图,使用鼠标滚轮进行放缩时,通常会显示放缩动画,如下图的效果,虽然现在主流web地图中都已经取消了这个功能,但这里还是备忘一下。原创 2016-11-21 17:11:45 · 2291 阅读 · 0 评论 -
openlayers3中,在地图上添加静态边界线
我们的底图经常是在网络上下载的,各区域并没有的明显分界,因此与一个市县相关的地图,我们需要将区域边界线加入到底图中显示。如下图的效果:1.获取区域边界的经纬度,保存为地理数据传输格式GeoJSONGeoJSON就是JSON格式,只不过是针对Geometry的JSON,遵循JSON的语法和格式,其解析方式和JSON完全相同。GeoJSON是一种针对地理数据编码的数据传输格式,支持Po原创 2016-09-13 10:00:24 · 8944 阅读 · 4 评论 -
openlayers3之overlay,以弹出框添加图表为例
ol3中有个ol.Overlay,使用这个类我们可以根据经纬度在地图中添加各种html要素。我们现在地图中增加一个弹出框,再在弹出框中生成图表,如下图所示:html中添加一个div容器: 测试点信息 弹出框CSS: /*设置弹出框样式*/ .ol-popup {原创 2016-08-18 15:16:36 · 11061 阅读 · 12 评论 -
使用openlayers3+中添加右键菜单
openlayers3+中没有直接的监听地图右键的功能,但是我们可以通过使用jquery监听地图所在的html元素的右键事件来实现。一、定义右键弹出框的html元素 <div id="contextmenu_container" class="contextmenu"> <ul> <li> 缩放至 <...原创 2017-10-20 15:12:36 · 4063 阅读 · 3 评论