概述： 在最近的工作中遇到了这样一个问题：地图全屏后在地图上绘制，发现鼠标的位置和绘制点的位置发生了偏移，因此，花了半天的时间去解决这个BUG，所以在此标记一下。...解决办法： 解决后发现其实很简单，就是将地图重新渲染一下即可，即：map.render(mapDiv)。 测试示例： openlayers map.../plugin/OpenLayers-2.13.1/OpenLayers.js"> <script src="../../.....()); map1.addControl(new <em>OpenLayers</em>.Control.Navigation()); map1.zoomToExtent(
前言 通过结合 HTML5 和 OpenLayers 可以组合成非常棒的一个电信地图网络拓扑图的应用，形成的效果可以用来作为电信资源管理系统，美食定位分享软件，片区找房，绘制铁轨线路等等，各个领域都能够涉及的一款应用...OpenLayers 的结构比较复杂，而 HT 相对来说简单很多，所以我将 HT 叠加到 OpenLayers Map 的 viewport 中。...下一次绘制不可能连着上一次继续绘制，所以我们得在结束调用这个类的时候将之前的绘制的点都清除： tearDown: function () {// CreateEdgeInteractor 对象结束调用的时候调用的函数..._graphView.addTopPainter(this);// 增加顶层Painter 使用Canvas的画笔对象自由绘制任意形状，顶层Painter绘制在拓扑最上面 this....我们可以在 graphView 上进行绘制节点的编辑、绘制连线、绘制直角连线以及绘制多边形。
概述： OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。版本2虽然被广泛使用，但从JavaScript开发的早期发展阶段开始，已日益现实出它的落后。...所有地图的属性可以在构造时进行配置，或者通过使用setter方法，如setTarget（）。 ?...放大zoom 选项是一种方便的方式来指定地图的分辨率，可用的缩放级别由maxZoom （默认值为28）、zoomFactor （默认值为2）、maxResolution （默认由投影在256×256像素瓦片的有效成都来计算...ol.layer.Tile 用于显示瓦片资源，这些瓦片提供了预渲染，并且由特定分别率的缩放级别组织的瓦片图片网格组成。...ol.layer.Vector用于显示在客户端渲染的矢量数据。
OpenLayers简介 OpenLayers（https://openlayers.org/）是一个用来帮助开发Web地图应用的高性能的、功能丰富的JavaScript类库，可以满足几乎所有的地图开发需求...可以通过css来为地图控件设置样式 面向对象开发方式，在OpenLayers中万物皆对象 和另一个流行的地图库leaflet不同，openLayers完全是用面向对象的方式开发的，且几乎内置了所有地图开发需要的功能...使用上来说leaflet更容易上手，OpenLayers上手难度比较大，所以业务可预见较为简单的建议采用leaflet。...显示要素 在地图上显示一些自定义元素可以说是最基本也是最常见的需求，如果要显示的元素结构或样式比较复杂，可以使用Overlay，它可以将DOM元素在地图上进行显示，并将随地图一起移动。...map.addLayer(vector) let draw = new Draw({ source: source, type: 'Circle' }) map.addInteraction(draw) 很简单
，其实第一篇也是很基础很简单的，但是意外的是看的人是最多的，这让我意识到可能即使是贴一下代码对一些人也是有帮助的，这就是这一篇的主要目的，可能有一些地方会看不懂，但是不要问，问我也不知道，如果你恰好了解的话十分欢迎在评论里分享...虽然是基于v3版本介绍的，很多api可能变了，但还是值得一看，除了OpenLayers本身的介绍，还会有一些地理基础知识的分享，这种相对全面的中文教程真的很稀有，且看且珍惜。...source, style, zIndex: 1 }) // 添加到地图实例 map.addLayer(areaLayer) } 多边形的绘制很简单...添加阴影效果 OpenLayers的样式对象并不支持直接设置阴影效果，所以需要获取到canvas的绘图上下文来自行添加，原理是监听图层的prerender（在一个图层渲染前触发）和postrender（...OpenLayers是不直接支持这种带边框的线段的，所以一种简单的方法是绘制两条线段叠加起来，上面的宽度比下面的低，就有边框效果了： import Polygon from 'ol/geom/Polygon
在软件中增加[自定义树形菜单]一直悬而未决，直到最近更新了增加树形菜单功能。...【更新】240523 属性扩展支持自定义树形菜单，大容量树形结构，制作层级网格 传统树形菜单使用dom处理，如果根结点数据有1万个，至少为产生1万个dom，这对应用来说是无法接受的。有人说分页处理？...下图是在***Geobuilding***软件中绘制的几个polygon要素。发现了什么？这看起来像极了树形菜单！ 我们知道Geojson数据有点/线/面。...而高德地图、maplibre-gl、mapbox-gl、openlayers等都可以自定义样式渲染geojson数据，比如线颜色、面填充色、文字标记等。...添加点击事件 javascript复制代码//在面图层上监听点击事件 map.on('click', 'mian', function (e) { let prop = e.features[0
在使用Openlayer的时候可以npm install openlayers --save也可以使用 npm install ol --save 明显感觉前面安装特别慢。...网上查的资料2者的关系与区别 在4.0版本之前，`ol` 的确是 `openlayers` 的简称，但是在 4版本之后新增了 `ol package` 以便于更好的支持 `webpack gulp.../openlayers)。...现在来说他们默认采用的是 ES module 构建，推荐在 angular vue react 这些构建型的项目使用 `ol` 包，`openlayers` 包是通过特殊的构建命令转过去的，主要是为了解决直接引用的方式...data.length;i++){ let iconFeature = new ol.Feature({ geometry: new ol.geom.Point( //绘制图形
近期尝试了一个webgl相关的内容，有些小激动，及时分享一下我的测试示例，效果如下： 此示例分从业务角度分为两部分，一个部分为d3展示的柱图，另一部分则为用openlayers展示的地图。...一、翻面效果的实现 此效果看似神奇，理解清楚原理后也还是很简单的。主要用到css3的backface-visibility属性，他表示元素正面运动到用户不可见的位置时，当前元素是否可见。...transform: rotateY(0deg); } 二、JS部分实现 JS代码的结构图： flip.js：为此组件 入口 flip.ol.js：openlayer的具体实现 flip.d3.js：d3绘制柱图的具体实现...flip.store.js：数据接口，用于返回从后台接口获取到的数据 city.js：城市名称数据字典 adapter/d3.js：用于将后台数据转换为d3可用的数据格式 adapter/ol.js：用于将后台数据转换为openlayers...、转换器、d3和ol进行实例化，然后提供render方法进行数据的获取和绘制，具体细节下载代码查看。
2、通过cmd命令行 通过cmd的方式比较简单，首先，进入命令窗口，切换到PostgreSql的bin路径： cd C:\Program...wgs84\mcounty.sql 新建table并将数据导入： psql -d opengis -f D:\data\wgs84\mcounty.sql postgres 比较： 第一种操作比较简单...，但是，操作步骤比较多，但是第一种操作在导入POLYGON的时候会存在MULTIPOLYGON或者POLYGON的转化的不一致的问题，导致数据导入的不成功。...接着，在Geoserver中发布。 1、新建数据存储 在Geoserver中新建POSTGIS的数据存储 ? 然后发布图层： ?...-2.12/OpenLayers.js"> <script type="text/javascript" src="http://200.200.200.223/<em>OpenLayers</em>-
在10的版本之前，Arcgis只支持松散型的切片方式，紧凑型是在Arcgis10的版本之后才出现的。...实现方式： 1、后台读取 后台写了一个比较简单的servlet来实现切片的读取，其中实现参考了下两篇文章中的内容，最终的实现代码如下： package com.lzugis.servlet; import...） 为方便调用展示，扩展了一个Openlayers的图层类，代码如下： OpenLayers.Layer.AgsTileLayer = OpenLayers.Class(OpenLayers.Layer.XYZ...OpenLayers.INCHES_PER_UNIT["米"] = OpenLayers.INCHES_PER_UNIT["m"]; OpenLayers.INCHES_PER_UNIT...["英里"] = OpenLayers.INCHES_PER_UNIT["mi"]; OpenLayers.INCHES_PER_UNIT["英寸"] = OpenLayers.INCHES_PER_UNIT
概述： 前面的有篇文章介绍了Openlayers 2.X下加载天地图，本节介绍Openlayers 2.X下加载高德地图。 实现效果： ? 高德地图 ?...实现： 实现很简单的，主要是要获取地图的url，在Arcgis for js加载百度地图一文（http://blog.csdn.net/gisshixisheng/article/details/44853709...-2.12/OpenLayers.js"> var map; function...init(){ var vecLayer = new OpenLayers.Layer.XYZ("高德矢量", [ "http://webrd01...()); map.addControl(new OpenLayers.Control.MousePosition()); var wms = new OpenLayers.Layer.WMS
HT和OpenLayers组件叠加在一起之后，剩下就是拓扑里面图元的摆放位置与经纬度结合的问题，常规网络拓扑图中存储在ht.Node图元的position是逻辑位置，和经纬度没有任何关系，因此在GIS应用中我们需要根据图元的经纬度信息换算出...细心的同学会想到转换是双向的，有可能用户需要拖动图元节点改变其经纬度信息，这时候我们就需要另外一个方向函数，即根据屏幕逻辑坐标转换成当前坐标对应的经纬度，在OpenLayers中我们通过map.getLonLatFromPixel...(new OpenLayers.Pixel(x, y));可以搞定。...会被遮挡 为了让这个例子用户体验更友好，我还用心折腾了些技术点供参考： 采用开源免费的http://llllll.li/randomColor/随机颜色类库，该类库还有很多非常棒的颜色获取函数，我只是简单的为每个省份显示不一样的颜色...("map"); var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org
概述 想写本文，主要是源于前两天有个老师找到我说让我录一个大概半个小时的视频，跟大家分享一下各webgis框架之间的区别以及在应用的过程中应该如何选择。...框架介绍 Openlayers 最新版本 v6.5.0 简介 OpenLayers makes it easy to put a dynamic map in any web page....OpenLayers has been developed to further the use of geographic information of all kinds..../openlayers.github.io@master/en/v6.5.0/build/ol.js"> OpenLayers example </head...JS API 提供了2D、3D地图模式，满足绝大多数开发者对地图展示、地图自定义、图层加载、点标记添加、矢量图形绘制的需求，同时也提供了 POI 搜索、路线规划、地理编码、行政区查询、定位等众多开放服务接口
最近一直在考虑一件事情，那就是openlayers中自定义wms的图层控制。...用过openlayers的人都知道，在openlayers中有自带的图层控制的控件，调用方法也很简单： map.addControl(new OpenLayers.Control.LayerSwitcher...，可以很方便的实现WMS的图层控制，但是在openlayers的wms没有类似的实现方法，所以得自己考虑实现。...1、在geoserver中发布wms图层，发布的图层包括以下。...4、图层控制的实现 主要效果为选中图层控制目录的节点，在图中显示该图层，取消选择，不显示该图层。
上面功能是用ArcGIS切片好数据，在Geoserver 中发布，并用google地图作为底图展示的效果。 一、ArcGIS是什么?...ArcGIS由ESRI公司开发，是一款创建和绘制各种不同形式地图的软件。 本文所采用的地图数据一般由测绘人员采集，经过gis数据处理人员绘制成图再打包给开发人员经过代码处理展示在网页端。...命名为liugh，在代码区添加代码，然后点击页面中的Validate按钮，如果代码没有问题，在页面的顶部会提示“No validation errors”，然后点击提交 也可以直接导入styles文件，...保存后弹出以下页面，点击发布 设置坐标系和边界 先不要点击下方的保存，点击发布选项卡 把刚才设置的style加进来 然后点击最下方的保存就发布成功了 4.查看发布的地图 在打开的页面中找到刚刚添加的图层，点击OpenLayers...敬请期待下一篇文章： 高效访问海量地图数据--用OpenLayers访问Geoserver发布的地图
2、地图展示 地图展示其实是很简单的，例如在0-1级，展示第一级数据；在2-4级展示第二级数据；5级以上展示第三级数据，等等。这个分级规则可以按照地图的世纪情况来确定。 备注：参照代码理解。...DOCTYPE html> openlayers map.../plugin/OpenLayers-2.13.1/theme/default/style.css" type="text/css"> html, body, #.../plugin/OpenLayers-2.13.1/OpenLayers.js"> <script src="../../.....(domid, new <em>OpenLayers</em>.LonLat(d.x,d.y), new <em>OpenLayers</em>.Size
概述： 在前面有篇文章提到了OL3中的多地图联动展示，在本节中讲述在OL2中实现多地图的联动展示。 效果： ? 实现思路： 在Ol2中，实现多地图的联动展示也是比较简单的。...maximum-scale=1.0, user-scalable=0"> OpenLayers...MapQuest Demo var map1, map2; function...init(){ function getBaseLayer(layername, layer){ return new OpenLayers.Layer.XYZ
HT和OpenLayers组件叠加在一起之后，剩下就是拓扑里面图元的摆放位置与经纬度结合的问题，常规网络拓扑图中存储在ht.Node图元的position是逻辑位置，和经纬度没有任何关系，因此在GIS应用中我们需要根据图元的经纬度信息换算出...细心的同学会想到转换是双向的，有可能用户需要拖动图元节点改变其经纬度信息，这时候我们就需要另外一个方向函数，即根据屏幕逻辑坐标转换成当前坐标对应的经纬度，在OpenLayers中我们通过map.getLonLatFromPixel...(new OpenLayers.Pixel(x, y));可以搞定。...会被遮挡 为了让这个例子用户体验更友好，我还用心折腾了些技术点供参考： 采用开源免费的http://llllll.li/randomColor/随机颜色类库，该类库还有很多非常棒的颜色获取函数，我只是简单的为每个省份显示不一样的颜色...("map"); var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/
上面功能是用ArcGIS切片好数据，在Geoserver 中发布，并用google地图作为底图展示的效果。 一、ArcGIS是什么?...ArcGIS由ESRI公司开发，是一款创建和绘制各种不同形式地图的软件。 本文所采用的地图数据一般由测绘人员采集，经过gis数据处理人员绘制成图再打包给开发人员经过代码处理展示在网页端。...，Name命名为liugh，在代码区添加代码，然后点击页面中的Validate按钮，如果代码没有问题，在页面的顶部会提示“No validation errors”，然后点击提交 也可以直接导入styles...保存后弹出以下页面，点击发布 设置坐标系和边界 先不要点击下方的保存，点击发布选项卡 把刚才设置的style加进来 然后点击最下方的保存就发布成功了 4.查看发布的地图 在打开的页面中找到刚刚添加的图层，点击OpenLayers...敬请期待下一篇文章： 高效访问海量地图数据--用OpenLayers访问Geoserver发布的地图
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
