随笔分类 - openlayer
摘要：openlayers 截图 OK，我承认，这篇博文是一个水文。 最新做了一个功能，就是 openlayers 展示二维 GIS 数据后，可以把当前的视角导出图片。 直接写代码吧，没啥好说的： // 截图 toImg() { if (this.map) { let canvas = this.map.
阅读全文
摘要：openlayers实现热力图效果 这个在之前的博客里面分享过了，再稍微说一下。 先说效果，最终实现的效果就是下面这个样子的，如果需要的话就接着看，如果不是这个样子就不要看了。 使用 vue 项目导入 openlayers 这个就不说了，如果需要的话去看之前的博客。 使用热力图其实和添加点是一样的，
阅读全文
摘要：openlayers 打标记点 这个效果其实和高德地图百度地图差不多了，就是说，有一个经纬度，我想在这个点的位置打一个标记。 那个蓝点就是我们的地点标识。 下面说一下效果实现的代码，很简单，不用说，直接上代码。 addTag() { let feature = new Feature({ id: "
阅读全文
摘要：openlayers根据半径绘制圆形，多圆连线并标记距离 实现一个什么效果呢，就是在openlayers上面，绘制三个圆形，绘制完成之后，三个圆心连接起来，然后标记出每两个圆心之间的距离。 期望效果： 写在前面 其实这个效果很好实现的，之前有几篇博文呢，关于 openlayers 根据半径绘制圆形，
阅读全文
摘要：vue 项目 openlayer 加载 WMS 图层 这个是啥子情况呢，是我用 openlayer 加载 geoserve 发布的图层，然后发布出来的图层是 wms 的，所以说这篇博文主要是用来操作 vue 项目使用 openlayers 加载 geoserve 发布的 wms 图层。 geoser
阅读全文
摘要：vue 项目 openlayers 点击弹窗 这个写的稍微简单一点就行了，其实呢，这个不是很难，主要是知道原理就可以了。 我想实现的内容是什么意思呢？就是说页面上有很多坐标点，点击坐标点的时候在相应的位置弹出一个框，然后框里显示出这个坐标点的相关数据。 解释 这个内容的其实就是添加一个弹窗图层，然后
阅读全文
摘要：vue 项目使用 openlayers根据半径绘制圆形、绘制多边形 这个地方我就简单点写吧，因为一些东西比较乱，有的包啥的就按照官网API开发文档根据报错提示自己添加就可以了，我这个地方就不重复写了。 绘制圆形 这里的绘制圆是指当后台返回数据，告诉你以某个经纬度坐标为圆心，或者是顶点，以 r 为半径
阅读全文
摘要：openlayer 绘制扇形 我在网上看了很多说是绘制扇形的方法，但是我用的时候都不是很好玩，所以说呢，我自己整理了一下，符合了我想要的效果，尽管我能力有限，还是决定分享一下，因为找资料太难了！ 我比较懒，就不废话了，直接上代码！ 创建openlayers地图 包我就不复制了，根据官网提供的API自
阅读全文
摘要：Openlayers 接入 Geojson 文件实现行政区域边界绘制 openlayers 绘制行政区域边界的问题其实不是很麻烦，其实如果有区域的坐标列表，那么按照坐标列表绘制多边形就可以了，关键是没有。有两个办法，一个是高德地图支持查询行政区的范围坐标，感兴趣的话可以去看一下高德的API接口，一个
阅读全文
摘要：vue openlayer 添加风场效果 一个简单的小demo，就是在一个openlayers地图上面添加风场效果。 话不多说，直接进入正题。 首先我们需要安装一个插件。 插件地址：https://www.npmjs.com/package/ol-wind npm install ol-windy
阅读全文
摘要：vue 使用 openlayer 实现测距功能 首先呢说明一下，我是跟着一个大佬学的，所以我是个小次佬，openlayer的官网上面给出了案例，但是习惯vue开发的我完全不理解，关键是连注释都没多少，而且我 openlayer 用的本来就不多。 然后这里分享一下官网的测距案例：https://ope
阅读全文
摘要：vue openlayer 使用 谷歌地图 图层 首先呢，openlayer地图使用的时候有一个默认的地图样式，就是下面这个样子的呢！ 但是呢，有些人不是很喜欢这些东西的呢，比如想换成谷歌的图层，其实很简单，就是下面的代码。 相关类库： import 'ol/ol.css'; import Map
阅读全文
摘要：openlayer 绘制自定义坐标点 引入相应的库 import 'ol/ol.css'; import Map from 'ol/Map'; import OSM from 'ol/source/OSM'; import TileLayer from 'ol/layer/Tile'; import
阅读全文
摘要：openlayer 热力图显示 相关库类 import moment from 'moment' import Projection from 'ol/proj/Projection' import Static from 'ol/source/ImageStatic' import Map fro
阅读全文
摘要：openlayer 绘制多边形 /*** 绘制多边形 points：多边形顶点组成的列表 */ drawPolygon(points) { let layer = this.getLayerFromMap(this.map, 'polygon') // 先查看一下之前是否存在，如果存在先移除 if
阅读全文
摘要：openlayer添加自定义图片图层 这个就是有一种图片，把他放到openlayer里面去！ 首先引入相关的库文件 import Projection from 'ol/proj/Projection' import Static from 'ol/source/ImageStatic' impor
阅读全文
摘要：openlayer 绘制线 上一小节说了一下openlayer绘制坐标标记点，这一次说一下绘制线，其实也很简单。 // 初始化地图 initMap() { map = new Map({ layers: [ new TileLayer({ source: new OSM(), }), ], targ
阅读全文
摘要：openlayers添加坐标点 上一节说了一下vue接入openlayer，这一节说一下在openlayer上面绘制点。 其实呢，openlayer还是蛮强大的，但是入门我觉得不容易，分享一张大神做的简化的openlayer结构图。 所以说通过这张图可以看出来，添加一个展示的坐标点，需要一个feat
阅读全文
摘要：vue 项目安装 openlayer 今天呢，稍微说一下关于 vue 项目使用 openlayer 的一些操作，我也是刚开始学习，在摸索。 比较讨厌的一点就是他的官网说明文档啥的都是英文的，对英语不好的很不友好，我也看不懂，但是我下了一个有道翻译，关键是刚接触，不了解，都不知道怎么检索能得到答案，没
阅读全文
