Openlayer

openlayers浅入（了解框架逻辑以及简单使用）

openlayers浅入（了解框架逻辑以及简单使用）项目需求，使用openlayers替换天地图api开发，记录openlayer的使用简介OpenLayers是一个用于开发WebGIS客户端的JavaScript
我胖虎不答应！！·2023-04-05 10:32

OpenLayers持续学习（1）

（1）创建一幅基础地图实例化一个map构造函数，基础配置有target,view,layerimage.png（2）添加投影image.png（3）overlayOverlaysarevisiblewidgets.UnlikeControls,theyarenotinafixedpositiononthescreen,butaretiedtoageographicalcoordinate,sopa
西兰花伟大炮·2023-04-05 09:41

OpenLayers5通过改变STYLES属性的方式改变地图服务的样式

切换地图样式//通过修改STYLES属性，进而修改地图服务样式importMapfrom'ol/Map.js';importViewfrom'ol/View.js';importTileLayerfrom'ol/layer/Tile.js';importTileWMSfrom'ol/source/TileWMS.js';exportdefault{name:"TestOL",data(){retu
WebGiser·2023-04-05 08:03

统计图源代码_openlayers4 入门开发系列结合 echarts4 实现统计图(附源码下载)

前言openlayers4官网的api文档介绍地址openlayers4api，里面详细的介绍openlayers4各个类的介绍，还有就是在线例子：openlayers4官网在线例子，这个也是学习openlayers4
weixin_39540023·2023-04-05 04:38

openlayers示例教程100+【目录】

目前已完成220个示例openlayers示例教程100+教程旨在为开发者提供简单快捷的代码示例，复制即可用。在每一个示例中，都凝练着简明扼要的代码，做到简易实现，轻松学会。
还是大剑师兰特·2023-04-03 17:28

229：vue+openlayers解决setText不能立即更新文字的问题

第229个点击查看专栏目录本示例的目的是介绍如何在vue+openlayer中解决setText()不能立即更新文字的问题。出现这个示例是因为协助一位订阅用户解决上述问题。
还是大剑师兰特·2023-04-03 17:17

QGIS+PostgreSQL/PostGIS+GeoServer+OpenLayers 开源webGIS部署一条龙

1、软件准备绘图：QGIS数据库：PostgreSql+PostGIS服务管理：GeoServer前端框架：OpenLayers2、下载安装QGIS下载链接：qgis下载下载下来后一路默认安装即可（Windows
CSTopDown·2023-04-03 14:10

openlayers点击事件

1.事件监听--feature//为地图注册鼠标单击事件的监听map.on('singleclick',event=>{map.forEachFeatureAtPixel(event.pixel,feature=>{//为移动到的feature发送自定义的singleclick消息feature.dispatchEvent({type:'singleclick',event:event});});
MarvinCHN·2023-04-03 11:40

OpenLayers 3 之 地图图层(Layers) 详解

在OpenLayers中，图层是使用layer对象表示的，主要有热度图层(hea
杨亚仑·2023-04-02 19:15

如何在openlayers中使用iconfont或font Awesome字体图标

新建一个最简单的helloworld页面3.看看效果4.注意点1-需使用Unicode写法4.注意点2-需注意iconfott.woff2的请求顺序5.特殊图标的制作6.总结前言  本文我们主要讲下如何在openlayers
xiangshangdemayi·2023-04-02 19:43

vue+openlayers图形交互，实现多边形绘制、编辑和保存

知识点：1.绘制多边形，实例化ol.interaction.Draw对象draw_inter=newol.interaction.Draw({source:source_draw,//矢量地图源type:"Polygon",//绘图类型});//将交互绘图对象添加到地图中map.addInteraction(draw_inter)2.图形交互编辑，实例化ol.interaction.Select对
小黑猪hhh·2023-04-02 19:04

openlayers3教程详细_OpenLayers 3 入门教程

OpenLayers3入门教程摘要OpenLayers3对OpenLayers网络地图库进行了根本的重新设计。
weixin_39800990·2023-04-02 19:28

openlayers3教程详细_openLayers 3知识回顾

openlayers知识前段时间帮助同事重构一个地图类的项目，然后就学习了openLayer3这个框架，但是官网上没有中文版，也没有详细的例子解释，我只能遇到看不懂的就翻译成中文来用，为了方便以后再用这个
weixin_39612220·2023-04-02 19:57

openlayer 图层上下_OpenLayers 之 图层(Layers) 详解

在OpenLayers
啊看看·2023-04-02 19:27

使用GeoServer+OpenLayers发布和调用WMTS、Vector Tile矢量切片服务 | Publishing and Calling WMTS, Vector Tile Service.

WebGIS系列：1.搭建简易WebGIS网站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers32.使用GeoServer+QGIS发布WMTS服务3.使用GeoServer
weixin_30786617·2023-04-02 19:54

Openlayers(三) vue3结合Geoservser加载城市边界

Openlayers+Geoservser(三)vue3使用总结1.简介Openlayers是一个专为WebGIS客户端开发提供的JavaScript类库包，用于实现标准格式发布的地图数据访问。
学习才能变得强大·2023-04-02 19:16

openlayers 使用天地图 切换图层

前言：刚开发完一个模块，主要的功能都是由openlayers实现的，写篇博客，一个是为后来者指引条明路（前端的大佬们都只喜欢讲理论，我不喜欢理论，我只喜欢实现的过程，所以这篇文章我只会告诉你怎么实现。
liuqing0.0·2023-04-02 19:42

Openlayers + Vue实现GIS地图的一些常见问题（整理）

学习教程为：《WebGIS之Openlayers全面解析（第二版）》一书。
canxuezhang·2023-04-02 19:28

Openlayers（四）WMTS请求优化和图层颜色更改

Openlayers（四）WMTS请求优化和图层颜色更改目标优化WMTS请求WMTS前端修改图层颜色效果对比优化后原图加载我们自定义图层时候，我们的面数据在地图上只显示部分位置，但是使用WMTS加载满屏瓦片会导致很多无效的瓦片请求
学习才能变得强大·2023-04-02 19:19

2021-04-07 地图可视化开发技术选型

1.二维地图开发可供选择的sdk有Openlayers，leafLet，高德sdk，百度sdk等。本着开源，性能强大的特点，选择Openlayers。
如沐知风·2023-04-02 11:31

geoserver 下载安装以及发布图层

目录一、前期准备二、下载安装geoserver1下载安装2测试卸载三、geoserver发布图层过程–矢量图层发布发布wmts服务1添加工作空间2添加存储仓库3发布图层4选择“openlayers”预览图层
水w·2023-04-02 00:01

开发网页HTML标签解决Google浏览器乱码问题

1、遇到的问题在学习openlayers时，复制官网提供的入门样例代码在Webstorm中，在google浏览器中执行，出现乱码问题。用360浏览器执行时未出现乱码问题。
嘀灬学生卡·2023-04-01 16:46

leaflet 显示不同颜色的点划线（123）

直接复制下面的vue+openlayers源代码，操作2分钟即可运行实现效果.文章目录示例效果配置方式示例源代码（共110行）安装插件相关API参考：专栏目标示例效果配置方式1）查看基础设置：https
还是大剑师兰特·2023-04-01 09:29

Vite + Vue3 + OpenLayers

一、本文简介本文案例使用Vite搭建项目，在Vue3的基础上使用OpenLayers。阅读本文需要有一定Vue3基础。
德育处主任·2023-03-31 22:19

开源WebGIS开发——如何创建一张地图

一、创建一张地图分为五个步骤1、下载openlayers开发包2、创建一个HTML网页并引入openlayers（包括css样式和js文件）3、创建图层对象，引入地图资源ol.Layer（引入OSM地图资源
YUANXLLL·2023-03-31 05:10

openlayers添加标注(含聚合标注)、覆盖物、绘制路线

如何用openlayers加载手绘地图可以看另一篇文章：https://www.jianshu.com/p/0b4fd0173b56一、加载矢量标注及聚合标注通常需要在地图上标注出一些景点、建筑或者公共设施
银月silvermoon·2023-03-31 02:54

OpenLayers加载不同类类型的天地图(矢量图、影像图、地形图)并实现动态切换效果

前言OpenLayers开发库如何实现加载不同类类型的天地图(矢量图、影像图、地形图)并实现动态切换效果，如下图所示。
动立信息服务·2023-03-29 19:16

OpenLayers 6加载各种地图源的方法(天地图、百度、高德、ArcGIS、Bing、OSM、Google等)

前言OpenLayers是一个用于开发WebGIS客户端的JavaScript包。
动立信息服务·2023-03-29 19:45

OpenLayers 引入gif 动态图片（gifler）辅助实现

2022-09-16-17-40-18.gif一、引入gifler.js在public/index.html里面引入(注意：npm引入的不是最新版，有些方法不能使用)二、引入地图importgifImagfrom'@/assets/img/map/1.gif'import'ol/ol.css'import{Map,View,Feature}from'ol'importPointfrom'ol/ge
冰落寞成·2023-03-29 03:42

openlayers源码学习

当深入下去的时候其实发现自己什么都不懂，要时刻提醒自己的无知平均地球半径exportconstDEFAULT_RADIUS=6371008.8;根据2个经纬度点获取距离角度转弧度/***Convertsdegreestoradians.**@param{number}angleInDegreesAngleindegrees.*@return{number}Angleinradians.*/expo
solfKwolf·2023-03-28 22:26

Cesium加载Geoserver发布的WMS、WMTS、TMS服务

1、Cesium加载Geoserver发布的WMS服务（1）登录Geoserver，点击LayerPreview按钮，在右侧某个图层点击OpenLayers按钮。
WebGiser·2023-03-28 17:24

OpenLayers +GeoJSON 绘制省边界

GeoJSON数据阿里云数据可视化平台使用GeoJson数据有两种方式1、在线引入（注意，http是不允许向https发送请求的，想使用的话，保证域名是https或者localhost）constsource=newVectorSource({url:'https://geo.datav.aliyun.com/areas_v3/bound/410000_full.json',format:newG
冰落寞成·2023-03-27 16:27

基于openlayers6的基本地图操作--5. 测距测面

参考官网例子，修改封装成measure.jsimportDrawfrom'ol/interaction/Draw';import{unByKey}from'ol/Observable.js';importOverlayfrom'ol/Overlay';import{getArea,getLength}from'ol/sphere.js';import{LineString,Polygon}from
初见_JS·2023-03-24 03:43

开源GIS-第三篇:postgis中地理几何元素的增删改（后端：springboot+postgis）

地理几何元素的增删改分为两种方式，一种是在后端对数据库进行操作，另一种是在前端对feature要素进行修改（具体形式跟前端的技术有关，比如Leaflet、Openlayer）。
mutouren123xixi·2023-03-23 18:33

OpenLayers如何获取手动绘制的GeoJson数据

1.前言因为目前市面上与OpenLayers相关的项目实在太少，大部分也是不会开源的项目，所以每次要找一些资源和教程总是很难。网上的相关资料不是官网的例子就是版本过低的代码。
前端小黑·2023-03-23 14:23

js - canvas事件检测

【背景】canvas事件检测是一个很常见的问题，目前常用的有几种：用isPointInStroke或isPointInPath检测用点击位置与各要素线的距离来进行运算，对面等要素来说比较困难openlayers2
李司徒·2023-03-23 08:03

vue 引入 OpenLayers

一、VUE引入OpenLayersnpminstallol二、初始化一个地图import'ol/ol.css'import{Map,View}from'ol'importTileLayerfrom'ol
冰落寞成·2023-03-22 00:31

封装openlayer,简易开发地图

安装依赖npminstallolol-utils创建地图render(url,id,center)创建地图url:地图地址id:用于挂载地图的节点idcenter:地图中心点经纬度import{render}from'ol-utils';window.onload=function(){//谷歌在线地图leturl='http://www.google.cn/maps/vt/pb=!1m4!1m3
Homary·2023-03-20 09:33

openlayers源码分析（2）

FeatureFeature的父类是BaseObject，先从构造函数开始构造函数参数可以是一个Geometry对象或者是一个对象包含属性，但是这个对象必须有个geometry属性，而且值必须是Geometry类型。构造函数前面主要是对私有变量初始化。/***@param{import("./geom/Geometry.js").default|Object=}opt_geometryOrProp
solfKwolf·2023-03-20 03:24

Openlayers中多边形的聚合

持续三天不断尝试之后获得了一些不为人知的辛酸orz关于OpenLayers的Clusterol.source.Clusterol利用这个js对象实现对地图上feature进行聚合展示的控制，所有的features
MMMOOO·2023-03-19 10:13

OpenLayers之图文标记

第一次更新：代码说明：html中是页面的基本骨架添加checkbox标签，用户可以选择VectorLabel或OverlayLabel类型；添加text标签，输入想要添加的文字标记；添加button按钮，用来启动文字标注功能和清除地图上的标注；添加map的div添加标注点的divjs代码实现功能创建ONE类，添加Map属性，并指定相应的默认值；在类中添加DrawingAndTextAnnotati
多智而近妖精·2023-03-18 21:41

openlayers text多背景颜色

image.pngfeature=newol.Feature({geometry:newol.geom.Point([121.359045,31.317679]),});constsymbol={icon:"./img/images/earthquake.png",scale:0.8,textColor:"#fff",font:"14pxCalibri,sans-serif",};feature.
happy_port·2023-03-16 08:08

OpenLayers + TopoJSON 绘制边界

一、准备TopoJson数据可以在DataV.GeoAtlas上下载1663222270105.png二、引入TopoJson数据，并绘制addTopoJson(){console.log(this.geoJSonData)constfeatures=newTopoJSON({featureProjection:'EPSG:4326'}).readFeatures(this.geoJSonData
冰落寞成·2023-03-15 11:54

openLayers点击事件

任何在地图上点击的事件，都是在map.on里面注册事件事件类型参考api：openLayers的api地址：https://openlayers.org/en/latest/apidoc/在api中左侧
壹家全栈·2023-03-14 07:25

openlayers 使用canvas绘制圆形头像图标

记录一个使用canvas将一张图片等比缩放，裁剪为一个圆1、原始图片在这里插入图片描述2、绘制后在地图中呈现的样式在这里插入图片描述3、设置样式的函数/***设置Style*/setStyleOnPersonLocation(feature){constdata=feature.values_varimgUrl='https://person_head_img/avatar.jpg'//绘制圆角矩
奔跑的痕迹·2023-03-12 19:04

openlayers 文字竖直显示

image.pngconststartPoint=[132,28];conststyle=newol.style.Style({text:newol.style.Text({font:"bold14pxCalibri,sans-serif",scale:1,text:"",fill:newol.style.Fill({color:"green"}),}),});["48","小","时","警",
happy_port·2023-03-11 11:54

WebGIS开发-openlayers5入门(2)

上节我们讲述如何将地图展示在页面，本节我们继续学习如何在地图上进行图形的绘制，废话不多说，开撸。基本流程newmap()---买块地newVectorLayer()、newTileLayer()---盖个房newFeature()---建个屋newPolygon()、newLineString()、newPoint()---整点家具newStyle()---搞搞装修流程有了，接下来一步一步进行代码
Hi___World·2023-03-09 23:07

MapBox动态气泡图渲染教程

对于mapbox和openlayers这样的框架来讲，气泡图中的气泡本质上就是一个div，就是将一个dom元素追加到canvas上的固定位置而已。
疯狂的GISer·2023-02-23 13:50

使用openlayer使用画图(Draw)功能(vue项目)

项目地址https://github.com/18595439829/vuecli3dev分支效果实例矩形选中.jpg不规则选中.jpg1.vue项目中下载ol包npminstallol--save2.新建一个js文件,如:draw.js;引入ol必要的组件//draw.jsimport"ol/ol.css";importMapfrom"ol/Map";importViewfrom"ol/View
羊驼626·2023-02-05 17:31

openlayers5使用GeoJSON数据渲染热力图

GIS开发中会遇到需要使用热力图Heatmap的时候，openlayers5官方示例给出的是kml文件描述的热力图数据，开发中接触更多的还是GeoJSON格式，本文就使用GeoJSON格式来实现一个热力图
耗子在简书·2023-02-02 04:21
上一页 6 7 8 9 10 11 12 13 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他