- 综合排序
- 最热优先
- 最新优先
- 来自专栏跟牛老师一起学WEBGIS
openlayers之selectfeature
概述： 在本文叙述如何在openlayers中实现鼠标经过某一对象时，对象高亮；点击某一对象时，弹出该对象的信息。 重点为OpenLayers.Layer.Vector和OpenLayers.Control.SelectFeature，下面开始讲解。 效果： ? 鼠标经过高亮显示对象名称 ? 鼠标点击显示对象信息 实现： 1、创建地图，添加地图 var map1, vectors; OpenLayers.Feature.Vector.style['default [renderer] : OpenLayers.Layer.Vector.prototype.renderers; vectors = new OpenLayers.Layer.Vector [renderer] : OpenLayers.Layer.Vector.prototype.renderers; vectors = new OpenLayers.Layer.Vector
1.9K20发布于 2018-10-23 - 来自专栏有意思的前端世界
OpenLayers入门（二）
前言 好久不见，距离OpenLayers入门第一篇已经过了很久，为什么迟迟没有后续呢，主要有两个原因，一是因为近期项目里使用地图的部分比较少，二是因为很多时候即使功能做出来了，但是还是不能完全理解，不是很明白的东西除了贴代码之外也写不了啥 虽然是基于v3版本介绍的，很多api可能变了，但还是值得一看，除了OpenLayers本身的介绍，还会有一些地理基础知识的分享，这种相对全面的中文教程真的很稀有，且看且珍惜。 添加阴影效果 OpenLayers的样式对象并不支持直接设置阴影效果，所以需要获取到canvas的绘图上下文来自行添加，原理是监听图层的prerender（在一个图层渲染前触发）和postrender（ evt.context.shadowBlur = 0 evt.context.shadowColor = 'rgba(0,0,0,0.20)' }) map.addLayer(vectorLayer) 绘制带边框的线段 OpenLayers
3.4K51编辑于 2022-06-15 - 来自专栏跟牛老师一起学WEBGIS
openlayers实现画圆
概述： 本文讲述如何在openlayers中实现画圆。 效果： ? 实现思路： 1、画中心点 通过OpenLayers.Control.DrawFeature和OpenLayers.Handler.Point实现在地图上画圆心。 = new OpenLayers.Layer.Vector("drawLayer",{ styleMap: new OpenLayers.StyleMap() * * Parameters: * origin - {<OpenLayers.Geometry.Point>} center of polygon. (x, y)); } var ring = new OpenLayers.Geometry.LinearRing(points); return new OpenLayers.Geometry.Polygon
3.7K30发布于 2018-10-23 - 来自专栏有意思的前端世界
OpenLayers入门（一）
OpenLayers简介 OpenLayers是一个用来帮助开发Web地图应用的高性能的、功能丰富的JavaScript类库，可以满足几乎所有的地图开发需求。 中万物皆对象 和另一个流行的地图库leaflet不同，openLayers完全是用面向对象的方式开发的，且几乎内置了所有地图开发需要的功能，而leaflet核心库只提供基本功能，其他功能都是通过第三方插件进行扩展 使用上来说leaflet更容易上手，OpenLayers上手难度比较大，所以业务可预见较为简单的建议采用leaflet。 OpenLayers虽然很强大，但是因为一切皆对象，所以使用起来很麻烦，再加上无比难看的文档，所以对新手极其不友好，这也是本系列文章的初衷，旨在基于实际业务开发的场景下来沉淀一些内容，来帮助新手使用OpenLayers 本文基于OpenLayers v6+版本，代码基于Vue。
7.3K40编辑于 2022-06-15 - 来自专栏跟牛老师一起学WEBGIS
openlayers实现在线编辑
概述： 在前面有篇博文讲述了基于Arcgis for js和wkt实现在线数据的采集和编辑功能，在本文讲述如何在openlayers实现类似的功能。 实现在线编辑主要为OpenLayers.Control.ModifyFeature。 实现： 1、新建vector图层 var renderer = OpenLayers.Util.getParameters(window.location.href).renderer [renderer] : OpenLayers.Layer.Vector.prototype.renderers; vectors = new OpenLayers.Layer.Vector [renderer] : OpenLayers.Layer.Vector.prototype.renderers; vectors = new OpenLayers.Layer.Vector
4K20发布于 2018-10-23 - 来自专栏跟牛老师一起学WEBGIS
Echart在Openlayers的应用
/plugin/OpenLayers-2.13.1/theme/default/style.css" type="text/css"> <style> html, body, # /plugin/OpenLayers-2.13.1/OpenLayers.js"></script> <script src="../../.. (domid, new <em>OpenLayers</em>.LonLat(d.x,d.y), new <em>OpenLayers</em>.Size /plugin/<em>OpenLayers</em>-2.13.1/<em>OpenLayers</em>.js"></script> <script src="../../.. (domid, new <em>OpenLayers</em>.LonLat(d.x,d.y), new <em>OpenLayers</em>.Size
2.9K20发布于 2018-10-23 - 来自专栏前端数据可视化
Vite + Vue3 + OpenLayers
theme: smartblue highlight: a11y-light 一、本文简介 本文案例使用 Vite 搭建项目，在 Vue 3 的基础上使用 OpenLayers 。 OpenLayers简介 OpenLayers 可以轻松地在任何网页中放置动态地图。它可以显示从任何来源加载的地图图块、矢量数据和标记。OpenLayers 的开发旨在进一步使用各种地理信息。 以上是官网对 OpenLayers （以后简称“ol”）的介绍。 为什么选择ol？
3.4K20编辑于 2022-04-15 - 来自专栏跟牛老师一起学WEBGIS
openlayers中海图的加载
概述 在openlayers中直接加载海图会有偏移，这是因为海图的坐标是做了便宜的，所以需要定义海图的坐标，本文将讲述如何实现，并对比OSM和高德。 效果 实现 <! <html> <head> <title>XYZ</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://<em>openlayers</em>.org 99; padding: 5px; background: white; } </style> <script src="https://openlayers.org
1.3K40发布于 2021-09-10 - 来自专栏跟牛老师一起学WEBGIS
Openlayers离线加载天地图
今天，我来说说如何实现天地图的离线以及Openlayers加载离线数据实现天地图数据的展示。 3、openlayers调用 从网上拔了下openlayers加载天地图的代码，并稍作修改，扩展了一个openlayers图层TiandituLayer，其代码如下： OpenLayers.Layer.TiandituLayer = OpenLayers.Class(OpenLayers.Layer.Grid,{ mapType : null, mirrorUrls : null, topLevel : null, bottomLevel /plugin/OpenLayers-2.13.1/theme/default/style.css" type="text/css"> <script src="../../../.. /plugin/<em>OpenLayers</em>-2.13.1/<em>OpenLayers</em>.js"></script> <script src="TiandituLayer-src.js"></script>
3.8K30发布于 2018-10-23 - 来自专栏跟牛老师一起学WEBGIS
openlayers实现多图显示
概述： 本文讲述在openlayers中如何实现多图联动。 思路： 1、判断鼠标在哪个地图上； 2、添加该地图的地图移动事件； 3、设置另外一个地图的bound为该地图的。 代码： <! DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>openlayers map</title> "></script> <script src="http://localhost/olapi/lib/<em>OpenLayers</em>/Lang/zh-CN.js"></script> <script ('map1', options); map2 = new OpenLayers.Map('map2', options); map1.addLayer (new OpenLayers.Control.Navigation()); map2.zoomToExtent(bounds) $("table").
1.7K30发布于 2018-10-23 - 来自专栏跟牛老师一起学WEBGIS
Openlayers中热力图的实现
/plugin/OpenLayers-2.13.1/OpenLayers.js"></script> <script type="text/javascript" src="extend/heatmap.js ["千米"] = OpenLayers.INCHES_PER_UNIT["km"]; 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["ft"]; //比例尺 map.addControl(new OpenLayers.Control.ScaleLine . */ OpenLayers.Layer.Heatmap = OpenLayers.Class(OpenLayers.Layer, { // the heatmap isn't a basic
4.1K30发布于 2018-10-23 - 来自专栏跟牛老师一起学WEBGIS
Openlayers4中的全屏
概述 Openlayers4中，ol.control.FullScreen()可实现地图的全屏展示，可是当地图的初始化宽度和高度都不是100%的时候，全屏的时候只会宽度的100%，高度还是原来地图的高度
96830发布于 2018-10-23 - 来自专栏跟牛老师一起学WEBGIS
Arcgis for js，Openlayers中加载GeoJSON
概述： 在前文中，讲述了在JAVA环境下如何将shp转换为GeoJSON，在本文，分别讲述在Arcgis for js，Openlayers2和Openlayers3 实现： 1、Openlayers2中加载GeoJSON 在OL2中，可以直接调用OL2的借口实现GeoJSON的加载，代码示例： <! DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>openlayers map</title> /plugin/OpenLayers-2.13.1/theme/default/style.css" type="text/css"> <style> html, body, # /plugin/OpenLayers-2.13.1/OpenLayers.js"></script> <script src="../../..
4.9K20发布于 2018-10-23 - 来自专栏跟牛老师一起学WEBGIS
巧用Openlayers4的Style
概述 非常细化Openlayers4中的StyleFunction，因为它可以让我非常方便的实现各种效果，本文带你一起一探究竟。
1.6K30发布于 2018-10-23 - 来自专栏前端数据可视化
Vite + Vue3 + OpenLayers 弹窗
install # 3、安装 ol npm i ol -S # 4、启动项目 npm run dev 使用 Vite 初始化项目并安装 ol ，更详细做法可以查看 『Vite + Vue3 + OpenLayers 起步』 三、思路与编码 思路 初始化地图 地图点击事件，并获取当前点击的坐标位置 弹出窗口 初始化地图 初始化地图详细操作可以查看 『Vite + Vue3 + OpenLayers 起步』 要初始化地图
2.1K21编辑于 2022-04-15 - 来自专栏跟牛老师一起学WEBGIS
Openlayers中Google地图的加载
概述： 本文讲述如何在Openlayers中加载Google的切片。 效果： ? 矢量图 ? 1、扩展的GoogleLayer代码如下： OpenLayers.Layer.GoogleLayer = OpenLayers.Class(OpenLayers.Layer.XYZ, { url url, OpenLayers.Util.getParameterString(this.params) ); }, CLASS_NAME: 'OpenLayers.Layer.GoogleLayer /plugin/OpenLayers-2.13.1/OpenLayers.js"></script> <script src="../../.. (), new <em>OpenLayers</em>.Control.LayerSwitcher() ] }; map = new <em>OpenLayers</em>.Map('map
3K50发布于 2018-10-23 - 来自专栏跟牛老师一起学WEBGIS
Openlayers3加载天地图
概述： 在前文中分别讲到了在Arcgis for js、Openlayers2中去加载天地图，同时也讲到了天地图的离线加载方式。 在本文，讲述在Openlayers3中实现在线/离线的天地图的加载。
2.3K30发布于 2018-10-23 - 来自专栏跟牛老师一起学WEBGIS
Openlayers2中vector扩展FeatureLayer
FeatureLayer是GraphicsLayer图层的一个扩展，本文讲述如何在Openlayers中通过Vector的扩展实现FeatureLayer。 面 实现代码： 1、FeatureLayer OpenLayers.Layer.FeatureLayer = OpenLayers.Class(OpenLayers.Layer, { isBaseLayer scope.styleMap) { scope.styleMap = new OpenLayers.StyleMap(); } scope.features (OpenLayers.Util.isArray(features))) { features = [features]; } if (OpenLayers.Util.indexOf(this.selectedFeatures, feature) !
1.7K60发布于 2018-10-23 - 来自专栏跟牛老师一起学WEBGIS
openlayers2渐变色渲染
DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>openlayers map</title> /plugin/OpenLayers-2.13.1/OpenLayers.js"></script> <script src="../../.. ["千米"] = OpenLayers.INCHES_PER_UNIT["km"]; 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["ft"]; //比例尺 map.addControl(new OpenLayers.Control.ScaleLine
2.8K20发布于 2018-10-23 - 来自专栏跟牛老师一起学WEBGIS
Openlayers2唯一值渲染
概述 本文讲述Openlayers2中实现唯一值渲染。 效果 源代码 <! /plugin/OpenLayers-2.13.1/OpenLayers.js"></script> <script src="../../.. ["千米"] = OpenLayers.INCHES_PER_UNIT["km"]; OpenLayers.INCHES_PER_UNIT["米"] = OpenLayers.INCHES_PER_UNIT ["m"]; OpenLayers.INCHES_PER_UNIT["英里"] = OpenLayers.INCHES_PER_UNIT["mi"]; OpenLayers.INCHES_PER_UNIT OpenLayers.StyleMap(null,{ "select": new OpenLayers.Style({ fillColor
1K20发布于 2018-10-23
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号