Openlayer

OpenLayers入门，OpenLayers如何使用超图地图（supermap）发布的地图服务作为基础图层

专栏目录：OpenLayers入门教程汇总目录前言前面几章，已经介绍了如何使用一张图片作为地图图层、如何使用xyz瓦片服务作为地图图层等等。本章将介绍一下如何使用国产超图地图发布的地图服务。
汤姆猫不是猫·2023-11-01 01:33

OpenLayers入门，使用OpenLayers叠加多边形、圆形、线段和点要素到地图上

专栏目录：OpenLayers入门教程汇总目录前言本章详细介绍一下如何使用OpenLayers叠加多边形、圆形、线段和点要素到地图上，并设置样式。
汤姆猫不是猫·2023-11-01 01:33

OpenLayers入门，使用webgl图层叠加超大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题

专栏目录：OpenLayers入门教程汇总目录前言OpenLayers地图中当叠加超过几千以上要素点就开始变慢，一万以上的要素点的时候，浏览器页面就开始卡顿或直接卡死，甚至浏览器会弹出是否等待页面加载的提示
汤姆猫不是猫·2023-11-01 01:33

OpenLayers入门，OpenLayers如何加载xyz瓦片图层

专栏目录：OpenLayers入门教程汇总目录一、前言xyz是简单的地图瓦片服务，使用Z为地图缩放级别，使用X和Y对图层图片进行切割编号，URL通常为http://…/Z/X/Y.png，其中Z为缩放级别
汤姆猫不是猫·2023-11-01 01:03

OpenLayers入门，OpenLayers使用一张图片作为地图的基本底图

专栏目录：OpenLayers入门教程汇总目录前言如果我们项目没有vmts、vms、xyz等地图服务，只有一张静态图片，也可以作为地图基本图层使用。
汤姆猫不是猫·2023-11-01 01:03

OpenLayers入门，OpenLayers动画效果实现，OpenLayers实现轨迹运动动画

专栏目录：OpenLayers入门教程汇总目录一、前言本章介绍如何使用OpenLayers实现动画效果和运动轨迹动画。
汤姆猫不是猫·2023-11-01 01:02

OpenLayers入门，OpenLayers如何使用gifler库来实现gif动态图图片叠加到地图上

专栏目录：OpenLayers入门教程汇总目录前言OpenLayers本身不支持gif图片作为图标要素显示到地图上，所以需要通过其他办法来实现支持gif图片。
汤姆猫不是猫·2023-11-01 01:32

Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts、TMS和XYZ介绍

Gis开发入门，OpenLayers、Leaflet、Maplibre-gl、Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍1、四大前端地图库介绍OpenLayers、Leaflet、
汤姆猫不是猫·2023-11-01 01:32

OpenLayers入门，OpenLayers实现多个轨迹运动动画效果，也可以实现二维地图迁徙图效果

专栏目录：OpenLayers入门教程汇总目录一、前言在上一章中OpenLayers入门，OpenLayers动画效果实现，OpenLayers实现轨迹运动动画，我们已经实现了单个轨迹运动动画效果。
汤姆猫不是猫·2023-11-01 01:32

OpenLayers入门，vue项目集成并使用OpenLayers地图的两种方式

专栏目录：OpenLayers入门教程汇总目录一、前言OpenLayers本身已经是支持模块化，所以引入vue项目很简单。
汤姆猫不是猫·2023-11-01 01:02

OpenLayers入门，OpenLayers使用百度地图底图作为图源，不需要地图开放平台token就可以访问

专栏目录：OpenLayers入门教程汇总目录前言一般使用百度地图是需要注册百度地图开放平台并获得对应的访问token才能访问地图的api，我们只使用百度的地图底图作为图层图源，不使用百度地图开放平台的
汤姆猫不是猫·2023-11-01 01:32

OpenLayers入门，OpenLayers如何使用高德地图底图作为图层图源

专栏目录：OpenLayers入门教程汇总目录前言只使用高德地图的底图图源，不使用高德开放平台的api，使用OpenLayer实现地图功能。
汤姆猫不是猫·2023-11-01 01:31

OpenLayers入门，OpenLayers通过WMTSCapabilities.xml加载GeoServer发布的标准wmts地图服务

专栏目录：OpenLayers入门教程汇总目录前言1、什么是wmts（Web地图平铺服务）？
汤姆猫不是猫·2023-11-01 01:31

Vue+OpenLayers6入门到实战进阶案例汇总目录，兼容OpenLayers7和OpenLayers8

本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。本专栏源码是由OpenLayers结合Vue框架编写。
汤姆猫不是猫·2023-11-01 01:30

OpenLayers - Vector绘制地图省市区（十）

简介本文讲解经常在开发中出现的功能，绘制地图省市区。主要使用Vector图层通过绘制多边行的方法，绘制出省市区的多边行，把该图层添加到地图图层上，就实现了绘制省市区图形。Vector矢量图层：在客户端呈现的矢量数据。构成一个矢量图层需要一个数据源(source)和一个样式(style)，数据源构成矢量图层的要素，样式规定要素显示的方式和外观。一个矢量图层包含一个到多个要素(feature)，每个要
nie-ny·2023-10-31 15:23

openlayer实现2d地图展示

需引入三个包包在底部链接需要自取弹出层样式如下因为我想做的是双击点然后展示点的信息/*地图弹出层样式*/.ol-popup{position:absolute;border:1px#37ACCDsolid;background:linear-gradient(rgba(0,118,255,0.5)0%,rgba(21,67,191,0.5)0%,#1543bf100%);padding:15px;
Owen_Number_One·2023-10-31 15:22

OpenLayers4 省界鼠标滑动特效（高亮省份加声音）

VectorLayer //style样式灰色黑色字体白色边界varstyle=newol.style.Style({fill:newol.style.Fill({color:'rgba(0,0,255,0.9)'}),stroke:newol.style.Stroke({color:'#319FD3',width:1}),text:newol.style.Text({font:'12pxCali
相心胖·2023-10-31 15:44

Openlayers 点击地图 行政地区高亮显示

一、选择的地区高亮以中国地图为例，默认显示中国地图，点击省市，点击区域高亮显示1、定义高亮区域的样式：varhighlightStyle=newol.style.Style({fill:newol.style.Fill({color:"#245189",//高亮区域填充颜色，可用rgba值}),stroke:newol.style.Stroke({color:"#3e84cf",//高亮区域的边界
都是风景 幸会·2023-10-31 15:43

OpenLayers实战，OpenLayers实现TopoJson格式区划边界鼠标点击选中高亮显示，点击空白区域取消高亮

专栏目录：OpenLayers实战进阶专栏目录前言本章使用OpenLayers实现从vue项目中加载assets资源目录中的TopoJson格式数据，实现鼠标点击区划边界范围内时选并高亮显示，点击区划边界区域外取消高亮的功能
汤姆猫不是猫·2023-10-31 15:05

Vite + Vue3 + OpenLayers 手动激活地图

一、需求说明Vite+Vue3+OpenLayers手动激活地图开发中遇到一种需求：需要展示地图，但默认不影响页面滚动。点击地图后，在地图上方滚动鼠标滚轮可以缩放地图。
德育处主任·2023-10-31 00:28

OpenLayers实战，OpenLayers获取用户定位位置并高亮显示用户所在行政区划边界

专栏目录：OpenLayers实战进阶专栏目录前言本篇文章通过国内的省、自治区和直辖市的GeoJson数据作为行政区划边界数据，然后根据用户定位位置，通过OpenLayers计算得到用户所在行政区划，并使用
汤姆猫不是猫·2023-10-30 19:41

OpenLayers入门，OpenLayers从vue的assets资源路径加载TopoJson文件并解析数据叠加到地图上，以加载世界各国边界为例

专栏目录：OpenLayers入门教程汇总目录前言本章以加载世界各国边界的TopoJson格式数据为例，讲解如何使用OpenLayers从vue的assets资源路径加载TopoJson文件并解析数据叠加到地图上
汤姆猫不是猫·2023-10-30 19:41

OpenLayers实战，OpenLayers解析渲染TopoJson格式区划边界数据和实现鼠标经过高亮显示区划边界和文字

专栏目录：OpenLayers实战进阶专栏目录前言本章使用OpenLayers实现从vue项目中加载assets资源目录中的TopoJson格式数据，解析渲染TopoJson格式行政区划边界数据，并且实现鼠标经过区域高亮显示区划边界和文字的功能
汤姆猫不是猫·2023-10-30 19:41

GIS开发入门，GeoJSON是什么？GeoJSON格式标准介绍

前言GEOJSON是gis地图中常用的数据格式，制作地图时用于存储各种地理数据，使用时通过OpenLayer、Leaflet、mapLibre-gl或者Cesium加载GEOJSON即可渲染出GEOJSON
汤姆猫不是猫·2023-10-30 19:10

GIS开源工具分享，Geojson格式转Topojson格式，使用TopoJSON Server工具进行Geojson转换为Topojson

Geojson介绍GEOJSON是gis地图中常用的数据格式，制作地图时用于存储各种地理数据，使用时通过OpenLayer、Leaflet、mapLibre-gl或者Cesium加载GEOJSON即可渲染出
汤姆猫不是猫·2023-10-30 19:38

Vue+Openlayers实现地图上绘制线

场景Vue+Openlayers实现显示图片并分优先级多图层加载：Vue+Openlayers实现显示图片并分优先级多图层加载_BADAO_LIUMANG_QIZHI的博客-CSDN博客上面是添加多个点的图层
霸道流氓气质·2023-10-30 14:32

前端开发---在vue项目中使用openLayers

前端开发之在vue项目中使用openLayers前言效果图在vue中渲染地图安装ol插件1、调用插件2、初始话地图3、地图点击事件4、重置坐标5、通过坐标改变视图6、保存坐标点vue中使用的源码前言本篇文章主要讲解
冯浩(grow up)·2023-10-28 13:46

vue 使用openlayers导出渲染的地图

下载地图官方示例：http://openlayers.org/en/latest/examples/export-map.htmlhttp://openlayers.org/en/latest/examples
ღ张明宇࿐·2023-10-28 12:46

vue+openlayers5学习总结（七）vue封装的一些功能

目录1.封装测量及拖拽geojson功能1.封装测量及拖拽geojson功能vue中使用方法self.source=newVectorSource({wrapX:true});//varmeasurevector=measure.vector(self.source);vardragAndDropInteraction=newDragAndDrop({formatConstructors:[GPX
张栓来·2023-10-27 22:06

开源WebGIS开发——openlayers核心组件之ol.Map

openlayers是一个按照面向对象原则设计的一个开发库，里面的一切都是对象。
YUANXLLL·2023-10-27 22:05

openlayers地图组件的封装

#Gmaps{width:100%;height:100%;}/***moveEvent地图的移动事件*clickEvent地图自定义点击事件*getMap挂载到实例的方法，获取地图实例*mapType平面图地址中文planeC卫星中文satelliteE默认平面图中文*///谷歌地图import"ol/ol.css";import{Map,View}from"ol";import{unByKey
Mingchen Shao·2023-10-27 22:58

基于Vue的Openlayers6自定义测量组件，直接拿来用

基于Vue的Openlayers6自定义测量组件，直接拿来用功能需求实现主要API源代码在做WebGIS项目开发时，往往都有一个测量的基础功能，这个功能虽然不算太难，但是往往确花费不少的时间去完成，以前都是基于
GIS小猪·2023-10-27 22:26

Vue+Openlayer封装拾取坐标组件-LjOlPickCoordinate

点击地图，可复制点击处坐标复制功能使用vue-clipboard2，参考：Vue实现复制粘贴-基于vue-clipboard2_李疆的博客-CSDN博客_vuejs实现复制首先下载复制文本组件vue-clipboard2cnpmi-Svue-clipboard2main.js中引入importVueClipboardfrom'vue-clipboard2'Vue.use(VueClipboard)
疆~·2023-10-27 22:55

Openlayers---创建地图

写在前面公司基于以前项目做升级,以前我是用openlayer3写的,现在openlayers都升级到5了,不由得感叹学不动了.话虽说但是还的学,不学谁养我呀?
前端小孟·2023-10-27 22:24

基于openlayers扩展添加天地图背景组件

最近公司有个需求，直接在地图上可以切换天地图的地图和卫星图作为背景图，撇开ol自带的layerswitcher(天地图的标注和底图是分开的,因此算两个layer,切换不方便)，自己扩展了一个mapswitcher，将天地图的卫星图和地图做了封装，先来个封装好的效果图:卫星图：地图：注意在地图右上角的位置多了一个单选框,可以选择“卫星图”或者“地图”。OK，画不多说，先看一下天地图对外的的地图服务：
jjxliu306·2023-10-27 22:22

vue+openlayer封装

一．安装openlayernpminstallol二．配置config.jsexportdefault{    loadConfig:{        url:'http://xxx.xx.xxx.xx
是可爱的大福呀~·2023-10-27 22:21

vue 封装openlayers的Map组件

/utils/openlayers/css/OverviewMap.css';importMapfrom'ol/Map.js';importViewfrom'ol/View.js';importTileLayerfrom'ol
gis_SSS·2023-10-27 22:21

openlayers 地图组件封装

openlayers地图组件封装{{popup.content}}GIS服务测距离测面积清空打印地图矢量底图卫星底图注记层行政区划{{isFullScreen?"
天天向上1024·2023-10-27 22:46

前端访问geoserver服务发生跨域的解决办法，以及利用html2canvas下载绘制的地图

我的业务场景：需要利用html2canvas下载Openlayers绘制的地图。预期：可以下载成图片甚至其他格式（svg）文件。结果：下载下来是个空白图片。
ღ张明宇࿐·2023-10-27 15:25

使用openlayers加载离线瓦片地图

一、需求背景我们现在的项目就说使用openlayer+geoServer自己发布的矢量地图，是和公安合作的项目，由于政府大都使用的是天地图，所以需要将geoServer的矢量地图改为天地图，搭配openlayers
老电影故事·2023-10-26 08:32

OpenLayers入门，快速搭建vue+OpenLayers地图脚手架项目

专栏目录：OpenLayers入门教程汇总目录前言本章针对Vue初学者，对Vue不熟悉，甚至还不会Vue的入门学生读者。
汤姆猫不是猫·2023-10-25 23:46

openlayers+vue的bug

使用addInteraction添加交互draw绘制，预期removeInteraction删除交互draw绘制时不再绘制，但是删除绘制不起作用，各种找原因，结果把data中的map变量注释掉即可，原因未知。绘制取消import"ol/ol.css";importGeoJSONfrom'ol/format/GeoJSON'import{Map,View}from"ol";importTileLay
dragonzoebai·2023-10-25 14:46

OpenLayers5实现点击地图查询要素信息

WebGIS开发中，点击查询是最常用的一种查询方式。本文从开源框架的角度，从前台到服务端到数据库等多个角度，多种方式实现点击查询。1、map的click事件该方法，通过鼠标在地图上点击的坐标，与当前矢量图层做相交分析查询，得到查询的要素及其所属的Layer对象import'ol/ol.css';importMapfrom'ol/Map';importViewfrom'ol/View';import
WebGiser·2023-10-22 01:46

openlayers 案例详细代码

地图层级:{{zoom.toString().substring(0,zoom.toString())}}importMapfrom'ol/Map'importleftListfrom'@/views/list/index'importHeaderfrom'@/views/index/Header'importPlaceInfofrom'@/views/component/info/PlaceIn
CV工程师!!·2023-10-21 15:29

使用geoserver发布tif栅格地图并使用openlayers加载

文章目录geoserver安装部署使用QGIS配准工具将图片转化为栅格地图通过geoserver地图服务发布tif地图新建工作区添加数据存储新建栅格数据源发布图层编辑图层预览图层使用openlayers
冰羽幻灵·2023-10-20 13:48

Vue+Openlayers 访问geoserver坐标系转换

Openlayers帮我们定义的投影坐标系projection只有EPSG:4326、EPSG:3857这两种参数,加入要引用其他的参数，则会报错。
小zhi学习·2023-10-20 10:48

Vue+Openlayers 坐标转换

前篇提到openlayers帮我们提供的投影坐标系projection参数只有两个EPSG:4326、EPSG:3857。
小zhi学习·2023-10-20 10:18

openlayers6加载各种地图服务

MapService.js代码/*各种地图服务的公共接口*/importTileLayerfrom'ol/layer/Tile';importXYZfrom'ol/source/XYZ';importWMTSfrom'ol/source/WMTS';importTileWMSfrom'ol/source/TileWMS';importTileImagefrom"ol/source/TileImag
WebGiser·2023-10-20 01:32

在 vue3 中使用 openlayers 制作旅行地图

由于上半年经常跑出去玩，突然想做一个旅行地图的博客，想起之前接触过openlayers的项目，也懒得去调查别的库了，直接用openlayers开干。
shellingford-ly·2023-10-19 10:28

OpenLayers6（3）：Vue导出图片时报错“Uncaught DOMException: Failed to execute ‘toDataURL on ‘HTMLCanvasElement”

1.版本OpenLayers：6.4.32.导出时候遇到报错3.原因分析原因：openlayers中加载的图层中存在不允许跨域的图层；解决：找到相应的图层，添加crossOrigin:'anonymous
碰碰qaq·2023-10-17 11:11
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他