Vue+OpenLayers6实战进阶专栏目录，Vue+OpenLayers实战案例，Vue+OpenLayers6实战教程

汤姆猫不是猫
498 阅读6分钟

返回入门到实战进阶汇总目录：汇总目录

前言

本篇作为Vue整合OpenLayers6实战进阶教程的目录，用于整理汇总专栏所有文章，方便查找。

本专栏预设读者已经熟练掌握Vue前端技术以及具有一定的OpenLayers开发使用经验。 未入门读者请先参考《Vue+OpenLayers6入门》专栏。

本专栏是讲解主流前端框架Vue整合前端最流行的JS二维地图引擎之一OpenLayers的实战教程。 openlayers

反馈建议

OpenLayers系列-交流专区，建议和问题反馈

Openlayers实战进阶

综合案例

  1. Openlayers实战，Openlayers如何设置米作为作为圆形的真实半径，解决圆形半径跟随地图缩放同时缩放的失真问题 图形交集计算
  2. OpenLayers实战，OpenLayers判断点位是否与多边形有交集，判断车辆是否在电子围栏内 鼠标经过要素事件
  3. OpenLayers实战，OpenLayers实现地图鼠标经过点要素时显示名称标注提示框，移出后隐藏 鼠标经过边界高亮显示：基于GeoJson格式数据
  4. OpenLayers实战，OpenLayers解析渲染GeoJson格式中国省级边界并实现鼠标经过区划高亮显示省级边界 鼠标经过边界高亮显示：基于TopoJson格式数据
  5. OpenLayers实战，OpenLayers解析渲染TopoJson格式区划边界数据和实现鼠标经过高亮显示区划边界和文字 鼠标点击选中边界范围高亮显示：基于GeoJson格式数据
  6. OpenLayers实战，OpenLayers实现GeoJson格式的省级区划数据渲染和鼠标点击省界自动选中并高亮显示省界范围，点击空白区域取消高亮 鼠标点击选中边界范围高亮显示：基于TopoJson格式数据
  7. OpenLayers实战，OpenLayers实现TopoJson格式区划边界鼠标点击选中高亮显示，点击空白区域取消高亮 Vue组件联动动态切换效果：基于TopoJson格式数据
  8. OpenLayers实战，OpenLayers结合TopoJson区划边界数据，结合下拉菜单实现城市切换，动态切换城市边界到地图视图视角范围内
  9. OpenLayers实战，OpenLayers点聚合有相同经纬度坐标时无法展开问题解决办法，当缩放级别达到一定等级后强行展开聚合为单个点

定位

  1. Openlayers实战，Openlayers获取浏览器当前用户的经纬度位置并定位到对应位置
  2. OpenLayers实战，OpenLayers获取移动端精确定位，OpenLayers适配App混合H5方式调用手机定位位置并定位到指定点
  3. OpenLayers实战，OpenLayers调用手机陀螺仪方向实现指南针效果 定位并高亮显示用户所在行政区划边界
  4. OpenLayers实战，OpenLayers获取用户定位位置并高亮显示用户所在行政区划边界

webgl图层运算符实战

  • match运算符实现一张合成拼接图根据坐标切片成单独图标渲染
  1. OpenLayers实战，WebGL图层如何使用一张拼接合成图片根据坐标切片成单个图片进行渲染
  • match运算符匹配多种颜色三角形实战案例
  1. OpenLayers实战，WebGL图层根据Feature要素的变量动态渲染多种颜色的三角形，适用于大量三角形渲染不同颜色
  • match运算符和interpolate插值运算符匹配多种颜色和多种直径大小的圆形圆点实战案例
  1. OpenLayers实战，WebGL图层根据Feature要素的变量动态渲染多种颜色和不同直径大小的圆形和圆点图形，适用于大量圆形圆点渲染不同颜色不同大小
  • case运算符结合逻辑运算符判断透明度，match运算符匹配多种颜色和interpolate插值运算符匹配大小
  1. OpenLayers实战，WebGL图层根据Feature要素的变量动态渲染多种颜色、不同长度和不同透明度的长方形（矩形）图形，适用于大量矩形图形渲染
  • match运算符配合鼠标经过事件高亮要素效果
  1. OpenLayers实战，WebGL图层鼠标经过要素高亮显示，根据变量自动修改WebGL图层要素的透明度、大小和颜色

动画特效

  1. Openlayers实战，Openlayers实现类似呼吸灯的闪烁圆圈特效，光晕扩散动画特效，可调光晕扩散速度，可调光晕圆圈大小
  2. Openlayers实战，OpenLayers实现定时闪烁动画效果，定时闪烁光晕特效

运动轨迹和迁徙图

  1. Openlayers实战，Openlayers一个车辆转向运动轨迹动画，支持根据轨迹运动方向自动改变车头转向角度，无需定时器，丝滑小车转向运动效果
  2. OpenLayers实战，OpenLayers实现多个车辆船舶运动轨迹动画和迁徙图效果，车头方向根据轨迹方向自动转向，无需定时器
  3. OpenLayers实战，OpenLayers实现多个轨迹运动动画，各个轨迹使用不同的运动速度，运动方向根据轨迹运动方向自动转向 气象台风动画
  4. OpenLayers实战，OpenLayers实现气象台风飓风运动轨迹运动动画，可调台风旋转速度和运动速度，静态图片旋转动画

特殊图形绘制

  1. OpenLayers实战，Openlayers实现绘制箭头，Openlayers绘制轨迹路径箭头，可调箭头角度和箭头长度 测量距离和测量区域面积
  2. OpenLayers实战，OpenLayers画线测量距离和画多边形测量区域面积

气象

风场效果 27. OpenLayers实战，OpenLayers使用wind-layer插件实现风场动态效果

台风/飓风 台风/飓风动画轨迹同时放在运动轨迹中： OpenLayers实战，OpenLayers实现气象台风飓风运动轨迹运动动画，可调台风旋转速度和运动速度，静态图片旋转动画

性能优化（瓦片加载速度优化）

  1. OpenLayers预加载瓦片，解决移动地图或缩放地图时出现空白瓦片的问题
  2. Openlayers优化加载地图瓦片太慢的问题，Openlayers瓦片缓存实现和请求失败瓦片重试功能
  3. Openlayers实战，Openlayers使用浏览器内置IndexDB数据库缓存地图瓦片，优化地图瓦片加载速度和浏览器内存占用

坐标转换

  1. OpenLayers实战，高德GCJ-02坐标系转WGS-84坐标系
  2. OpenLayers实战，OpenLayers高德地图瓦片位置纠偏，将高德底图瓦片位置转换为EPSG:4326和EPSG:3857

未完，持续更新中...

返回入门到实战进阶汇总目录：汇总目录

avatar
文章
阅读
粉丝