OpenLayers地图api

OpenLayers官方示例详解三：Drag, Rotate, and Zoom

一、示例简介这个示例实现了按键Shift加上鼠标拖拽来围绕中心点旋转和缩放地图的功能二、代码详解首先了解一下本示例将用到的ol.interaction.DragRotateAndZoom类。ol.interaction.DragRotateAndZoom控件允许用户通过鼠标点击和拖拽来缩放和旋转地图，默认情况下，该控件仅限于按住Shift键时起作用。这个控件仅支持鼠标设备，并且这个控件不包括在默认
不睡觉的怪叔叔·2020-08-15 19:04

OpenLayers图形绘制三：图形交互编辑

OpenLayer针对图形的修改，提供了交互编辑控件ol.interaction.Modify，可以结合选择要素控件ol.interaction.Select实现。本示例在加载OpenStreetMap瓦片地图基础上，添加了一个点、线、多边形矢量要素，实现对这些绘制要素的编辑功能，即修改其几何信息。目录一、基础代码编写二、添加编辑的几何图形三、实现交互编辑一、基础代码编写新建一个ModifyFea
不睡觉的怪叔叔·2020-08-15 19:03

OpenLayers汇总目录

目录一、OpenLayers多源数据加载二、OpenLayers图形绘制三、OpenLayers标注功能四、OpenLayers官方示例解析一、OpenLayers多源数据加载1.OpenLayers多源数据加载一
不睡觉的怪叔叔·2020-08-15 19:03

openlayers自用小笔记

当前级别map.getView().getZoom()当前视野中map.getView().getCenter()map触发渲染映射--在渲染映射帧后触发当地图加载地图移动时触发map.on('postrender',function(e){});interaction交互DoubleClickZoom双击缩放DragAndDrop拖地车DragBox牵引箱DragPan龙盘DragRotate拖
咕噜咪·2020-08-15 19:03

openlayers摸爬滚打 2.坐标系转换工具类(Java)

进行坐标系转换使用下面的工具类，在网上找的，出处忘记了地球坐标系——WGS84：常见于GPS设备，Google地图等国际标准的坐标体系。火星坐标系——GCJ-02：中国国内使用的被强制加密后的坐标体系，高德坐标就属于该种坐标体系。百度坐标系——BD-09：百度地图所使用的坐标体系，是在火星坐标系的基础上又进行了一次加密处理。publicclassGPSUtils{privatestaticdoub
自挂东南只·2020-08-15 19:00

【转载】天地图、百度、高德、腾讯、Leaflet、openlayers地图图片叠加层切片生成工具使用指南(20191007修改)

高德加载自定义切片示例http://www.1hwj.net/down/gaode/map_gd.htmlhttp://www.1hwj.net/map/gaode/map_gd.html切片工具标准测试版下载：https://pan.baidu.com/s/1WLePRWZvmAX6BSOwy0ZuSg切片工具专业测试版下载：https://pan.baidu.com/s/1YhZ7w61EG7
为了淑宝努力努力·2020-08-15 19:22

Openlayers3 API中的几处坐标系，分别代表的含义总结

在openlayer中引入切片，添加各种服务，视角的定义等情况下都有对projection的属性进行设置，有的是默认值，有的需要自定义，但是他们与请求的服务之间或多或少存在着千丝万缕的联系。或者互不影响。本人在实践过程中，对经常出现的几个projection的理解进行了总结，直接看代码：dzjgeoServerwmsservice//加载geoserver的wms服务，注意坐标系,这里虽然加载的是
逸然健在·2020-08-15 19:16

19.2.26工作总结，openlayers+vue加载地图

知识整理从远程下载你的代码:gitclone仓库地址从远程更新合并你的代码:gitpulloriginmaster参考https://www.yiibai.com/git/git_pull.html从git服务器下载vue项目后,在下载文件的根目录下cmd,npminstall:安装项目的基础依赖库npmrundev:启动项目,具体启动过程参考:https://blog.csdn.net/six_
Plus王·2020-08-15 19:14

openlayers4xy坐标转为经纬度坐标

1、引入坐标转换js库文件proj4.js，地址：http://www.bootcdn.cn/proj4js/；2、加入需要的坐标参考的定义，两种方式：1）单个：proj4.defs('WGS84',"+title=WGS84(long/lat)+proj=longlat+ellps=WGS84+datum=WGS84+units=degrees");2）多个（分两种）：proj4.defs([[
风不起丶叶何以舞·2020-08-15 19:43

React 集成 OpenLayers6 加载天地图、百度、谷歌图层入门篇

一、请先学习OpenLayers入门篇es6之第一个地图链接:https://blog.csdn.net/qq_17025903/article/details/104843667二、天地图矢量图层加载创建
南归北隐·2020-08-15 19:11

OpenLayers 3 之 添加地图网格

在OpenLayers3中，渲染网格的类是“ol.Graticule”。本文中，我结合实例，讲解“ol.Graticule”的用法和具体实现。
庆祝亚运会·2020-08-15 19:04

OpenLayers 3 之 绘制图形（ol.interaction.Draw）详解

这次我们看看怎么利用OpenLayers3绘制各种各样的图形，并添加到图层显示。在OpenLayers3中负责绘制任务的是ol.interaction.Draw类，下面介绍这个类和功能的用法。
庆祝亚运会·2020-08-15 19:04

Openlayers - 点聚集，全球地震点聚集为例

GitHub地址：https://github.com/QingyaFan/openlayers-examples1.描述点聚集指在某个缩放级别下，将临近（一般用像素距离衡量）的点聚合为一个点要素显示，
庆祝亚运会·2020-08-15 19:04

OpenLayers 3 之 绘制图形（ol.interaction.Draw）原理解析

在OpenLayers3中，负责交互的模块中，有一个负责绘制图形的交互模块，这个交互子模块是ol.interaction.Draw。
庆祝亚运会·2020-08-15 19:04

OpenLayers 3 之 实时追踪轨迹-获取最后添加的要素

问题描述有时，往往有这样的需求：每隔一段时间查询一个物体的位置，然后将这个位置绘制在地图上，中间的点用普通的样式标识，当前位置（也就是最新的点位置）使用一个特殊的样式。我们可以这样实现，查询到一个新位置，将改点添加到地图上的同时，赋予其特殊的样式，当再查询到有新的位置时，获取最后添加的要素，删除其特殊样式，然后添加新的要素点位置。那么，问题来了：怎么获取最后添加的要素呢？方法一：getFeatur
庆祝亚运会·2020-08-15 19:04

OpenLayers 3 之 切换图层控件

在openlayers2中，是默认有切换图层控件的，但是由于某种原因，openlayers3中并没有默认实现，但却给我们很容易扩展的基类（ol.control.Control），我们可以自定义实现，并不是很难
庆祝亚运会·2020-08-15 19:04

mapboxgl - 用webgl展示海量数据，是否可行？

以后的文章我们将不仅仅局限于Openlayers，适合业务的技术才是好的技术，有的功能其他的库实现的比Openlayers好，我们也会聊，比如这次的mapboxgl。
庆祝亚运会·2020-08-15 19:03

OpenLayers 3 之 地图样式（ol.style）详解

地图样式是由style类控制的，其包含了地图样式的方方面面，例如，填充色、图标样式、图片样式、规则图形样式、边界样式、文字样式等，样式一般针对矢量要素图层。矢量图层样式可以事先写好，写成静态的，矢量图层直接按照定义好的样式渲染，也可以动态使用样式的set()方法，但是要注意刷新矢量图层，重新渲染，否则动态样式不生效。一、ol.style1.可以配置的选项/***@typedef{{geometry
庆祝亚运会·2020-08-15 19:03

OpenLayers 3 之 弹出框（popup）

正文在OpenLayers2.x的那个年代~-~|，我们知道OpenLaye
庆祝亚运会·2020-08-15 19:03

openlayer地图打印功能

openlayer地图打印功能https://openlayers.org/en/v4.6.5/examples/export-map.html?
阿星_·2020-08-15 19:33

openlayers3 自定义打包

1.简介首先放一个启发我的文章：http://www.jianshu.com/p/d06d58804414ol有很多库，有时候我们只需要部分，比如map,view.layer等。如果把整个文件都引入项目，有些浪费资源且文件过大，与最小化的思路相违。这时候就需要单独打包这些内容，这也是这边记录的主要内容，如何自定义打包我们需要的库？2.创建配置文件1.下载openlayer:npmiopenlaye
ChengYz_·2020-08-15 19:33

openlayers + Vue 设置feature的icon以及圆角矩形文本框

效果图代码:X:{{x}}Y:{{y}}import'ol/ol.css'importTileLayerfrom'ol/layer/Tile'importVectorLayerfrom'ol/layer/Vector'importVectorSourcefrom'ol/source/Vector'importXYZfrom'ol/source/XYZ'import{Map,View,Feature
名字太难随便取了·2020-08-15 19:30

OpenLayers中的球面墨卡托投影

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

Openlayers 加载ArcGIS Server切片服务（自定义切片方案）

背景最近遇到一个需求，要使用OpenLayer加载ArcGISServer发布的服务。如果直接拷贝OpenLayer提供的在线官方Demo，然后修改下地图服务地址是跑不通的，这是因为OpenLayer默认加载的ArcGIS服务是规范化的切片方案（从0级到20级，每一级的切片比例尺都是固定的），但是由于现场使用的是自定义的切片方案，所以还需要去调整下代码。关键点在加载ArcGISServer发布的自
啄慕鸟kevinzeng·2020-08-15 19:29

基于openlayers雷达图的叠加显示

本文介绍雷达拼图在OpenLayers上的叠加显示，雷达拼图是由中国气象局气象探测中心在《天气雷达拼图v3.0》系统中发布的，每个观测时次一幅PNG透明图片。
David_SIAT·2020-08-15 19:29

openlayers 显示闪烁的图标点

思路：需要在html代码生成N个要闪烁的点通过遍历生成html代码，然后再通过坐标定位点到相应的位置$("#map").append("");varpoint_div=document.getElementById("css_animation"+i);varpoint_overlay=newol.Overlay({element:point_div,positioning:'center-cen
上线就吃代码·2020-08-15 19:28

OpenLayers 3 之 Overlay（覆盖物）详解

Overlay从名字看，是覆盖图、覆盖物的意思，主要的用途就是在地图之上再覆盖一层，用以显示额外的可见元素，可见元素一般是HTML元素，利用overlay，可以将可见元素放置到地图的任意位置，形成地图上再浮动一层的效果。例如在地图上相应的坐标放置一个标志，标签，利用overlay都可以做到，具体来说，点击地图上某位置，在点击位置弹出弹出框就是利用了overlay。因为overlay是固定在特定坐标
庆祝亚运会·2020-08-15 19:56

OpenLayers 3 之 地图图层数据来源（ol.source）详解

source是Layer的重要组成部分，表示图层的来源，也就是服务地址。除了在构造函数中制定外，可以使用layer.setSource(source)稍后指定。一、包含的类型ol.source.BingMaps，必应地图的切片数据，继承自ol.source.TileImage；ol.source.Cluster，聚簇矢量数据，继承自ol.source.Vector；ol.source.ImageC
庆祝亚运会·2020-08-15 19:56

OpenLayers 3 简介

摘要主要聊聊OpenLayers是什么，怎么用，以及OpenLayers3相对于以前的版本有什么改进和不同。OpenLayers是干什么的？
庆祝亚运会·2020-08-15 19:56

通过在ol.source.ImageCanvas中获取VectorContext对象高效率绘制海量要素

使用OpenLayers构建项目时，有时会遇到一些性能优化的问题，比如大量要素的绘制。
战斗中的老胡·2020-08-15 19:55

OpenLayers 5 使用GeoJSON数据渲染热力图

GIS开发中会遇到需要使用热力图Heatmap的时候，openlayers5官方示例给出的是kml文件描述的热力图数据，开发中接触更多的还是GeoJSON格式，本文就使用GeoJSON格式来实现一个热力图
战斗中的老胡·2020-08-15 19:55

OpenLayers 6 + webpack 通过源码分析来实现一个简单的自定义控件

基本思路：通过阅读OpenLayers的源码，仿制一个点击之后可以弹出一个警告框的控件。实现步骤：
战斗中的老胡·2020-08-15 19:54

OpenLayers 6 中实现“上一视图”、“下一视图”的视图切换功能，类似arcgis for js的Navigation

需求：需要用OpenLayers实现视图切换，即在某一视图下，可以保存当前的视图状态，经过平移/缩放等改变视图的操作之后，通过点击按钮等交互动作可以回到上一视图，并且能够按顺序在保存的视图之间按顺序逐个切换
战斗中的老胡·2020-08-15 19:54

OpenLayers 6 实现仿Echarts风格的动态迁徙图/航班图

这是一个做完很久的demo，主要还是为了摆脱echarts那种“图层脱线”的问题，提升可视化渲染性能。使用的数据还是来自echarts，模拟了全国各地到湖南重点景区的客流情况。分析要实现动态迁徙图的效果，主要需解决两个问题曲线的绘制。因为给出的数据只有起点和终点两个点位，所以想要绘制曲线可以参考turf中的bezier曲线生成API。点迹的动画播放。仍然要依靠render机制，这里我还是使用比较熟
战斗中的老胡·2020-08-15 19:54

OpenLayers 6 绘制高德导航路径的蚂蚁线样式并实现箭头动画——VectorContext的重度使用

OpenLayers架构之内提供了矢量对象样式化的一些手段，但平时的使用总感觉有一些单一；而像高德、百度、腾讯地图这样的框架有着美观丰富的UI样式。
战斗中的老胡·2020-08-15 19:54

OpenLayers 5 使用turf.js渲染克里金插值计算的等值面

之前Trojx同学实现了一个克里金插值渲染等值面的例子，使用的是kriging.js内置的绘图函数，然后在openlayer中利用ImageCanvas渲染。这个方法比较简便，但是有一些性能上的问题：网格切分比较小的时候，总体的网格数增加，每次重新渲染都要将整个网格数组遍历一次，交互体验不是很好；网格是以方块的形式呈现的，视觉效果不如曲线和多边形。我使用了turf.js来处理网格数据，生成等值面，
战斗中的老胡·2020-08-15 19:54

OpenLayers 6 实现百度echarts风格的“空气质量”散点图

除了直方图等各种图标之外，echarts也有一些基于地图（当然是百度地图）的可视化功能，还有大神将OpenLayers和echarts结合起来做成了现成的组件供调用。
战斗中的老胡·2020-08-15 19:54

OpenLayers 6 实现带有4个控制点的三阶贝塞尔曲线

问题实现一个类似Photoshop钢笔工具画出来的贝赛尔曲线，带有4个控制点，可以通过控制点实现对曲线的修改。分析绘制贝塞尔曲线的原理比较简单，网上一搜一大把，对照着公式去计算就好了，这里有一篇可以参考的文章；控制点和曲线分别使用两个矢量图层渲染，便于后期开发隐藏控制点；实现为了方便计算，首先需要实现一个阶乘函数：functionfactorial(num){if(num{if(evt.featu
战斗中的老胡·2020-08-15 19:54

Openlayers源码实践系列：ol.layer.Vector矢量地图图层获取要素为空的问题原因分析及解决（基于版本6，数据使用GeoJSON）

前言ol.layer.Vector(vectorLayer)是我们在OpenLayers开发中使用非常频繁的一个图层容器类，有时我们需要在交互中获取矢量图层中的要素(Feature)对象，但是在某些情形下
战斗中的老胡·2020-08-15 19:54

OpenLayers 6 连点成线——限制只能在已有的点要素之间画线

分析：我们知道OpenLayers原生的ol.interaction.Draw类型是无法支持这种限制的。
战斗中的老胡·2020-08-15 19:54

OpenLayers 笔记4：矢量图层交互与选定矢量要素突出显示

目录ol.interaction.Select概述鼠标选定矢量要素突出显示OpenLayers提供ol.interaction.Select类，来实现对矢量图层的交互。
getMoreTime·2020-08-15 19:53

OpenLayers笔记2：点、线、面矢量要素的自定义渲染

新建矢量图层ol.layer.Vector时，可以通过使用ol.style来自定义渲染地图矢量要素的样式；目录ol.style概述点、线、面矢量要素的常规渲染方式点要素线要素面要素对同一要素图层中不同个体的区别渲染ol.style概述在ol.style中默认可以配置的要素包括：Fill：填充的样式，对应的模块为ol.style.Fill；Geometry：地理属性，对应模块为ol.style.St
getMoreTime·2020-08-15 19:53

openlayers 1

实例一第一个地图每一个openlayers的地图都是ol.Map的对象ol.Overlay用来实现弹出式窗口//创建地图newol.Map({//设置地图图层layers:[//创建一个使用OpenStreetMap
newbeeAmay·2020-08-15 19:22

openlayers custom marker and popup 动态标注提示信息

困惑的很久的openlayers动态标注提示信息问题，现已解决。
penghuangit·2020-08-15 19:49

通过Html2Canvas对OpenLayers截图

希望对需要的朋友提供参考本人通过html2canvas对项目中使用的openlayers叠加的图层进行截图，生成图层数据。其中对地图上叠加的矢量和栅格图层的截图中矢量截图没什么问题注意添加跨域就行了。
David_SIAT·2020-08-15 19:49

GeoServer基础教程（五）：使用GeoServer和OpenLayers发布地图服务

转载：https://ethanblog.com/tech/publish-wms-with-geoserver-and-openlayers.html在前面几节的关于GeoServer的基础教程中，我们介绍了如何使用
One程序猿·2020-08-15 19:48

openlayers矢量圆形获取圆心和半径

在地图初始化前定义的交互：varinteraction=newol.interaction.Draw({source:this.source,type:('Circle'),});需要使用变量保存起来，这里使用interaction保存。获取圆心和半径需要结合交互：如下interaction.on("drawend",function(event){varcenterLogLat,radius;v
Museions·2020-08-15 19:48

如何将谷歌地图在基于OpenLayers的服务器端进行部署的方法

原文转自：http://www.arceyes.com/bbs/thread-18475-1-1.html如何将谷歌地图在基于OpenLayers的服务器端进行部署的方法一、准备工作1、到OpenLayers
mrib·2020-08-15 19:47

如何在内网(局域网中)发布OpenLayers地图平台

一、概述这里以中间件作为谷歌地球(GoogleEarth)卫星地图发布引挚，杭州市4到14级谷歌地球卫星地图(WGS84经纬度投影)作为中间件的地图发布数据源，OpenLayers开源平台作为加载中间件发布的卫星影像数据平台
mrib·2020-08-15 19:47

在OpenLayers4中将地图及叠加显示的图层生成图片保存到数据库方法

在调用自己发布的图层服务时注意在图层源属性中加入跨域。newol.layer.Image({source:newol.source.ImageArcGISRest({ratio:1,params:{},crossOrigin:'anonymous',url:"http://10.5.1.186:6080/arcgis/rest/services/thly/thlyfq/MapServer"})})
David_SIAT·2020-08-15 19:17
上一页 41 42 43 44 45 46 47 48 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他