Openlayer

openlayer——瓦片计算

瓦片计算不同环境条件下，加载具有不同细节的图片资源，可以提高效率，但这并不是终点。瓦片技术可以更进一步提高效率。其原理是将一张大图片切割成很多张小图片，按照呈现需要，加载其中的几张小图片即可。为什么这样就能提高效率？因为屏幕显示窗口的大小是固定，比如屏幕分辨率是800*600，或者1024*768，又或者是1920*800等等。如果屏幕分辨率是800*600，一张大图是9000*9000，那么同一
Lucky_wangtao·2020-08-15 19:06

openlayers 6【一】 简介openlayers背景，优势，如何使用及实际使用场景

openlayers官网地址：https://openlayers.org/1.自己学习openlayers的背景最近公司项目需要使用到GIS地图为依托做一些交互（如点聚合分散，热力图，地图下钻，图层叠加
@必意玲·2020-08-15 19:06

openlayer 拖动，旋转和缩放

拖动，旋转和缩放Drag,Rotate,andZoomimportMapfrom'ol/Map.js';importViewfrom'ol/View.js';import{defaultsasdefaultInteractions,DragRotateAndZoom}from'ol/interaction.js';importTileLayerfrom'ol/layer/Tile.js';impo
Lucky_wangtao·2020-08-15 19:05

openlayer轨迹简单DEMO

代码如下openlayer轨迹简单DEMO.ol-popup{position:absolute;background-color:white;-webkit-filter:drop-shadow(01px4pxrgba
qq_35763837·2020-08-15 19:34

OpenLayers官方示例详解十四之可重用地图源（Reusable Source）

目录一、示例简介二、代码详解一、示例简介这个示例展示如何更新地图中的瓦片。可以调用source.setUrl()来更新瓦片地图源的URL，请注意，当更改瓦片地图源的URL时，在加载完新的瓦片之前，将不会替换现有的瓦片。如果想要清除当前呈现的瓦片，则可以调用source.refresh()方法。二、代码详解ReusableSourceJanuaryJanuary(withbathymetry)Jul
不睡觉的怪叔叔·2020-08-15 19:04

OpenLayers官方示例详解八之鼠标位置控件（Mouse Position）

目录一、示例简介二、代码详解一、示例简介使用鼠标位置控件（ol/control/MousePosition）来动态显示地图上鼠标光标的坐标并且可以由用户调整投影和坐标精度。二、代码详解MousePositionProjectionEPSG:4326EPSG:3857Precision//创建MousePosition控件varmousePositionControl=newol.control.M
不睡觉的怪叔叔·2020-08-15 19:04

OpenLayers官方示例详解一：Custom Interactions

目录一、示例概述二、代码详解2.1、派生自定义类Drag2.1、添加Drag类的原型方法2.3、将自定义交互小部件添加到地图三、完整代码四、总结一、示例概述这个示例演示了通过ol/interactions/Pointer类创建一个自定义交互小部件（custominteraction）。这个自定义小部件的功能是让用户能够在地图上面自由地拖动要素。二、代码详解2.1、派生自定义类Drag为了实现这个自
不睡觉的怪叔叔·2020-08-15 19:04

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实现。
不睡觉的怪叔叔·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

openlayer4中获取地图坐标的方法

WFSvarmap=newol.Map({layers:[newol.layer.Tile({source:newol.source.OSM()})],target:'map',view:newol.View({center:ol.proj.transform([104,30],'EPSG:4326','EPSG:3857'),zoom:10})});//监听singleclick事件/*map.
浪子边·2020-08-15 19:21

基于openlayer4生成热力图

ol加载热力图radiussizeblursize//底图varraster=newol.layer.Tile({source:newol.source.Stamen({layer:'toner'})});varmap=newol.Map({layers:[raster],target:'map',view:newol.View({center:[117.3626,32.9184],project
_奈落_·2020-08-15 19:17

基于openlayer4画区域

画区域-->varraster=newol.layer.Tile({source:newol.source.OSM()});varwkt='';//区域wkt点集varformat=newol.format.WKT();varfeature=format.readFeature(wkt,{dataProjection:'EPSG:4326',featureProjection:'EPSG:4326
_奈落_·2020-08-15 19:17

基于openlayer4画线，鼠标悬浮线上弹窗

根据点位画线、鼠标悬浮提示信息-->.ol-popup{position:absolute;background-color:white;-webkit-filter:drop-shadow(01px4pxrgba(0,0,0,0.2));filter:drop-shadow(01px4pxrgba(0,0,0,0.2));padding:15px;border-radius:10px;borde
_奈落_·2020-08-15 19:17

基于openlayer4打点，点击点位弹出窗

打点位、点击点位弹出信息-->//初始给的中心点坐标。varcenterX=117.3626;varcenterY=32.9184;//我们需要一个vector的layer来放置图标varlayer=newol.layer.Vector({source:newol.source.Vector()})varmap=newol.Map({layers:[newol.layer.Tile({//加载互联
_奈落_·2020-08-15 19:16

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

在openlayer中引入切片，添加各种服务，视角的定义等情况下都有对projection的属性进行设置，有的是默认值，有的需要自定义，但是他们与请求的服务之间或多或少存在着千丝万缕的联系。
逸然健在·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

openlayer添加面图层和geojson数据

关键是styles和空间坐标系的转换！！！！varstyles=newol.style.Style({fill:newol.style.Fill({color:'green'}),stroke:newol.style.Stroke({color:'red',width:2}),image:newol.style.Circle({radius:7,fill:newol.style.Fill({col
晴天蜗牛·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 自定义打包

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

基于Openlayer获取wms服务要素信息

OL实例如下： varwmsSource=newol.source.ImageWMS({url:'https://ahocevar.com/geoserver/wms',params:{'LAYERS':'ne:ne'},serverType:'geoserver',crossOrigin:'anonymous'});varwmsLayer=newol.layer.Image({sour
David_SIAT·2020-08-15 19:29

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

背景最近遇到一个需求，要使用OpenLayer加载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渲染。
战斗中的老胡·2020-08-15 19:54
上一页 21 22 23 24 25 26 27 28 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他