openlayers6专题
OpenLayers6入门，OpenLayers实现在地图上拖拽编辑修改绘制图形
专栏目录： OpenLayers6入门教程汇总目录 前言 在前面一章中，我们已经学会了如何绘制基础的三种图形线段、圆形和多边形：《OpenLayers6入门，OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形》，那么本章将在此基础上实现图形的拖拽编辑功能，方便我们对绘制后的图形进行修改操作。 二、依赖和使用 "ol": "^6.15.1" 使用n
OpenLayers6实战，OpenLayers鼠标拖拽方式绘制半圆环形（半圆扇形）
专栏目录： OpenLayers实战进阶专栏目录 前言 本章讲解如何使用OpenLayers特殊图形绘制，通过鼠标拖拽方式来绘制出半圆环形（半圆扇形）的功能，效果像磁铁一样的半圆弧。 上一章中我们以及实现了四分之一圆环形的特殊图形绘制《OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制环形（四分之一圆环），OpenLayers特殊图形绘制》，本章在上一章章基础上修改而成。
OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制椭圆
专栏目录： OpenLayers实战进阶专栏目录 前言 本周讲解使用OpenLayers在地图上实现鼠标拖拽方式绘制椭圆的功能。 二、依赖和使用 "ol": "^6.15.1" 使用npm安装依赖 npm install ol@6.15.1 使用Yarn安装依赖 yarn add ol vue中如何使用： vue项目使用请参考这篇文章：
OpenLayers6实战，OpenLayers绘制六角形（六角星）图形，OpenLayers绘制特殊图形
专栏目录： OpenLayers实战进阶专栏目录 前言 本章讲解使用OpenLayers实现六角形（六角星）特殊图形的绘制功能。 本章是在《OpenLayers6实战，OpenLayers绘制特殊图形，OpenLayers绘制四角形（菱形），OpenLayers绘制菱形》，《OpenLayers6实战，OpenLayers绘制五角星，OpenLayers绘制特殊图形，地图上画五角星》基础上
OpenLayers6入门，OpenLayers使用地图全屏控件，控制地图进入全屏和退出全屏
专栏目录： OpenLayers6入门教程汇总目录 前言 本章介绍OpenLayers6如何使用全屏控件，来控制地图全屏和退出全屏的功能。 注意：这里的全屏控件全屏指的是地图容器全屏，并非整个网页全屏。 网页整体全屏可以参考专栏中的另一篇文章：《OpenLayers6入门，OpenLayers如何实现地图全屏和退出全屏操作，实现指定网页节点全屏和退出全屏》 二、依赖和使用 "ol
OpenLayers6入门，OpenLayers加载必应地图（BingMap），需要申请api key
专栏目录： OpenLayers入门教程汇总目录 前言 本章讲解OpenLayers如何加载必应地图（BingMap）到地图上。 需要提前到必应开发者中心申请对应的地图访问api key才可以加载地图。 二、依赖和使用 "ol": "^6.15.1" 使用npm安装依赖 npm install ol@6.15.1 使用Yarn安装依赖 yarn add ol vue中
OpenLayers6入门，OpenLayers6地图默认使用什么投影? 要如何更改OpenLayers6地图的投影？
专栏目录： OpenLayers6入门教程汇总目录 前言 OpenLayers地图默认使用什么投影? 在回答这个问题之前，我们需要了解什么是地图投影。 什么是地图投影？ 地图投影是将球面地图上的三维地理坐标系（经纬度）转换成平面地图上的二维坐标系的过程。由于地球是一个近似的椭球体，而平面地图是一个二维表面，因此需要采用适当的投影方式来实现这种转换。 更多地图投影知识请参考博主另一篇文
OpenLayers6入门，如何销毁已经创建好的OpenLayers地图容器
专栏目录： OpenLayers入门教程汇总目录 前言 本章介绍如何销毁已经创建好的OpenLayers地图容器。 在某些场景下，可能会需要销毁之前的地图，重新创建新的地图的需要，因此本章介绍一下在开始创建地图前如何先销毁之前的地图的功能。 二、依赖和使用 "ol": "^6.15.1" 使用npm安装依赖 npm install ol@6.15.1 使用Yarn安装依赖
openlayers6实现可拖拽点位，点位可拖拽移动点击移动
openlayers6实现可拖拽点位 实现功能：需要实现地图上点击出现点位，此点位可拖拽，并且点击移动，从而实现地图选点的功能 使用技术：openlayers6 + react + 高德地图底图 1. 第一步：初始化地图容器 html代码：新增dom节点 <div id="testMap" style={{width: '100vw', height: '100vh'}}></div>
react中用openlayers6预览图片
react中用openlayers6预览图片 在做项目的时候发现预览图片不能放大缩小，也不能移动，感觉不如用openlayers写一个图片预览的demo组件，虽然有点大材小用，可是本着学习的原则了解一下openlayers也是蛮好的。 记录下遇到的几点难点 ol的官网说实话都是英文，对于英文小白来说感觉不是很友好，不过还是找到了图片为地图加载的demo链接：openlayers静态图片demo
openlayers6【二十三】vue LineString 实现地图轨迹路线，设置起点和终点的标注信息详解
文章目录 1.写在前面2. 创建轨迹线段，设置起点和终点位置和样式代码3. 完整代码4. track-car.json 轨迹JSON数据 1.写在前面 本文主要是下面一个简单切经典的需求场景，在地图上根据轨迹的经纬度数据，通过openlayers的LineString 方法创建一条线，并且设置起点和终点的标注信息。下面是效果图。 2. 创建轨迹线段，设置起点和终点位置和样式
OpenLayers入门，OpenLayers6的WebGLPointsLayer图层样式运算符详解
专栏目录： OpenLayers入门教程汇总目录 前言 本章讲解使用OpenLayers6的WebGL图层显示大量点情况下，列举出所有WebGLPointsLayer图层所支持的所有样式运算符大全。 二、基于的OpenLayers版本 "ol": "^6.15.1" 使用npm安装依赖 npm install ol@6.15.1 使用Yarn安装依赖 yarn add o
openlayers6【十五】地图样式 Style类详解
文章目录 1. 写在前面2. ol.style 属性及子类2.1 可以配置的选项2.2 子类（针对矢量要素） 3. ol.style 样式举栗详解3.1 geometry：要素的属性3.2. fill ：填充样式3.3 stroke：边界线条3.4 image：图片样式3.5. text - 文字3.6. ol.style 设置动态样式 4. 写在最后 1. 写在前面 地图样式
Openlayers6 入门（一）加载天地图在线瓦片
今天开始为大家带来零基础入门Openlayers的教程，轻松实现加载天地图瓦片。 一、准备工作 ①到Openlayers官网下载Openlayers的API包。 下载地址：https://openlayers.org/download/ ②创建一个Web工程，使用IDEA工具创建的Web工程 使用IDEA工具创建Web工程 ③将API包放至工程lib文件夹下，并创建一个Ma