4. Openlayers 点、线、面基本样式渲染（结合Vue 详细教程）

已于 2023-06-24 19:24:06 修改
阅读量4.9k 收藏 23
点赞数 5
分类专栏： OpenLayers详细教程 文章标签： vue.js javascript 前端
于 2023-06-11 23:03:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28613375/article/details/131159493
版权

目录

Openlayers 点、线、面基本样式渲染

效果截图：

1. OpenLayers 样式系统

2. 创建 Vue 项目并引入 OpenLayers

3. 创建地图组件

4. 添加地图容器和样式

5. 添加地图及样式设置

6.完整代码

Openlayers 点、线、面基本样式渲染

在本篇博客中，我们将学习如何在 OpenLayers 中使用样式系统，并在 Vue 项目中绘制点、线、面的基本样式。首先，我们将学习 OpenLayers 的样式系统，然后使用 Vue 创建一个地图组件，并在地图组件中添加点、线、面要素并为其设置样式。

效果截图：

1. OpenLayers 样式系统

OpenLayers 中的样式（Style）用于定义地图要素的外观。样式系统包括以下几个主要类型：

  • Style：要素的基本样式，可以包括图形（image）、笔触（stroke）、填充（fill）等属性。
  • Image：用于为点要素或标注设置图形。可以使用圆形（Circle）、图标（Icon）等不同类型的图形。
  • Stroke：设置线条样式，例如颜色、宽度、虚线等。
  • Fill：设置填充样式，例如颜色。

2. 创建 Vue 项目并引入 OpenLayers

首先，在终端中运行以下命令创建一个新的 Vue 项目：

vue create ol-vue-map

然后进入项目目录，并安装 ol 和 ol-vue 依赖：

cd ol-vue-map
npm install ol ol-vue --save

3. 创建地图组件

在 src/components 目录下创建一个名为 OlMap.vue 的新组件。接下来我们将在这个组件中创建地图以及绘制带有基本样式的点、线、面要素。

4. 添加地图容器和样式

在 OlMap.vue 的模板部分添加一个 div 标签作为地图容器，并设置样式：

<template>
  <div>
    <div ref="map" class="map"></div>
  </div>
</template>

<style scoped>
  .map {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
  }
</style>

5. 添加地图及样式设置

在 OlMap.vue 的脚本部分，首先导入所需的 OpenLayers 模块：

  import "ol/ol.css";
  import Map from "ol/Map";
  import View from "ol/View";
  import TileLayer from "ol/layer/Tile";
  import OSM from "ol/source/OSM";
  import VectorLayer from "ol/layer/Vector";
  import VectorSource from "ol/source/Vector";
  import Feature from "ol/Feature";
  import Point from "ol/geom/Point";
  import LineString from "ol/geom/LineString";
  import Polygon from "ol/geom/Polygon";
  import { fromLonLat } from "ol/proj";
  import { Circle, Fill, Stroke, Style } from "ol/style";
  import XYZ from "ol/source/XYZ";

接下来添加 createMap 方法，以实现地图的创建并绘制带有基本样式的点、线、面要素：

export default {
    name: "OlMap",
    mounted() {
      // 创建地图
      this.createMap();
    },
    methods: {
      createMap() {
        // 创建ArcGIS World Street Map图层
        const arcGISLayer = new TileLayer({
          source: new XYZ({
            url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}"
          })
        });

        // 创建地图容器
        const map = new Map({
          target: this.$refs.map,
          layers: [arcGISLayer],
          view: new View({
            center: fromLonLat([120, 30]),
            zoom: 8
          })
        });

        // 绘制点、线、面要素
        const pointFeature = new Feature({
          geometry: new Point(fromLonLat([120, 30])),
          name: "Point"
        });
        const lineFeature = new Feature({
          geometry: new LineString([fromLonLat([119, 29]), fromLonLat([120, 31])]),
          name: "Line"
        });
        const polygonFeature = new Feature({
          geometry: new Polygon([
            [
              fromLonLat([121, 29]),
              fromLonLat([122, 29]),
              fromLonLat([122, 30]),
              fromLonLat([121, 30]),
              fromLonLat([121, 29])
            ]
          ]),
          name: "Polygon"
        });

        // 样式设置
        const styleFunction = feature => {
          const geometryType = feature.getGeometry().getType();

          const styles = {
            Point: new Style({
              image: new Circle({
                radius: 10,
                fill: new Fill({
                  color: "rgba(255, 0, 0, 0.6)"
                })
              })
            }),
            LineString: new Style({
              stroke: new Stroke({
                color: "rgba(0, 0, 255, 0.6)",
                width: 5
              })
            }),
            Polygon: new Style({
              fill: new Fill({
                color: "rgba(0, 255, 0, 0.4)"
              }),
              stroke: new Stroke({
                color: "rgba(0, 255, 0, 1)",
                width: 3
              })
            })
          };

          return styles[geometryType];
        };

        // 创建矢量图层
        const vectorLayer = new VectorLayer({
          source: new VectorSource({
            features: [pointFeature, lineFeature, polygonFeature]
          }),
          style: styleFunction
        });

        // 将矢量图层添加到地图上
        map.addLayer(vectorLayer);
      }
    }
  };

将 OlMap.vue 组件导入到项目的主页面，并添加到模板中：

<template>
  <div>
    <OlMap></OlMap>
  </div>
</template>

<script>
import OlMap from "@/components/OlMap.vue";

export default {
  components: {
    OlMap,
  },
};
</script>

6.完整代码

<template>
  <div>
    <div ref="map" class="map"></div>
  </div>
</template>

<script>
  import "ol/ol.css";
  import Map from "ol/Map";
  import View from "ol/View";
  import TileLayer from "ol/layer/Tile";
  import OSM from "ol/source/OSM";
  import VectorLayer from "ol/layer/Vector";
  import VectorSource from "ol/source/Vector";
  import Feature from "ol/Feature";
  import Point from "ol/geom/Point";
  import LineString from "ol/geom/LineString";
  import Polygon from "ol/geom/Polygon";
  import { fromLonLat } from "ol/proj";
  import { Circle, Fill, Stroke, Style } from "ol/style";
  import XYZ from "ol/source/XYZ";
  export default {
    name: "OlMap",
    mounted() {
      // 创建地图
      this.createMap();
    },
    methods: {
      createMap() {
        // 创建ArcGIS World Street Map图层
        const arcGISLayer = new TileLayer({
          source: new XYZ({
            url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}"
          })
        });

        // 创建地图容器
        const map = new Map({
          target: this.$refs.map,
          layers: [arcGISLayer],
          view: new View({
            center: fromLonLat([120, 30]),
            zoom: 8
          })
        });

        // 绘制点、线、面要素
        const pointFeature = new Feature({
          geometry: new Point(fromLonLat([120, 30])),
          name: "Point"
        });
        const lineFeature = new Feature({
          geometry: new LineString([fromLonLat([119, 29]), fromLonLat([120, 31])]),
          name: "Line"
        });
        const polygonFeature = new Feature({
          geometry: new Polygon([
            [
              fromLonLat([121, 29]),
              fromLonLat([122, 29]),
              fromLonLat([122, 30]),
              fromLonLat([121, 30]),
              fromLonLat([121, 29])
            ]
          ]),
          name: "Polygon"
        });

        // 样式设置
        const styleFunction = feature => {
          const geometryType = feature.getGeometry().getType();

          const styles = {
            Point: new Style({
              image: new Circle({
                radius: 10,
                fill: new Fill({
                  color: "rgba(255, 0, 0, 0.6)"
                })
              })
            }),
            LineString: new Style({
              stroke: new Stroke({
                color: "rgba(0, 0, 255, 0.6)",
                width: 5
              })
            }),
            Polygon: new Style({
              fill: new Fill({
                color: "rgba(0, 255, 0, 0.4)"
              }),
              stroke: new Stroke({
                color: "rgba(0, 255, 0, 1)",
                width: 3
              })
            })
          };

          return styles[geometryType];
        };

        // 创建矢量图层
        const vectorLayer = new VectorLayer({
          source: new VectorSource({
            features: [pointFeature, lineFeature, polygonFeature]
          }),
          style: styleFunction
        });

        // 将矢量图层添加到地图上
        map.addLayer(vectorLayer);
      }
    }
  };
</script>

<style scoped>
  .map {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
  }
</style>

完成以上步骤后，在项目中运行主页面，您将看到一个包含点、线、面要素的地图。这些要素使用了自定义的样式进行绘制。希望本篇教程能帮助你了解如何在 Vue 项目中使用 OpenLayers 进行样式与渲染。祝你学习愉快！

三维giser
关注
  • 5
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
Vue+OpenLayers6入门教程汇总目录，OpenLayers教程，Vue+OpenLayers中文文档，OpenLayers手册，OpenLayers6文档教程，OpenLayers中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-21 8369
OpenLayers介绍，相比较其他地图引擎有什么优点四种流行地图引擎比较Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍。
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
10-31 2802
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
openlayers+vue实现缓冲区
Yu_Jian_Qt的博客
01-26 1000
缓冲区是地理空间目标的一种影响范围或服务范围,是对选中的一组或一类地图要素(点、线或面)按设定的距离条件,围绕其要素而形成一定缓冲区多边形实体,从而实现数据在二维空间得以扩展,后续也可以生成栅格进行叠加分析等。
天地图开发实战：Vue结合OpenLayers实现动态点位地图
最新发布
m0_54340021的博客
06-13 1022
本篇文章详细介绍了如何使用Vue.js和OpenLayers库结合天地图API，开发一个具有点位图标渲染和点击地图获取经纬度功能的地图组件。文章从环境搭建到具体代码实现，逐步引导读者完成地图组件的开发。首先，介绍了必要的库安装和组件模板设置。随后，深入讲解了脚本部分，包括地图初始化、图层添加、坐标转换、事件监听等关键技术点。通过实践，我们学习了如何创建地图实例、添加天地图图层、设置点位图标样式，并实现了点击地图更新点位经纬度的功能。文章最后提供了对组件进行进一步扩展和定制的建议，以满足更广泛的应用需求。
openLayers新手入门三：画点
qq_42323429的博客
02-09 2024
openLayer画点
vue2和vue3中使用openlayers离线地图（一）
林依.的博客
07-20 4877
vue使用openlayers离线地图
vue openlayers 初始化地图加载 详解
luoawai的博客
06-03 1074
1. openlayers 简介：openlayers是一个开源免费的js库，用于在网页中实现地图的动态显示和交互。一起看看官方对openlayers的介绍。 OpenLayers使在任何网页中放置动态地图变得容易。它可以显示地图块，矢量从任何源加载的数据和标记。 开发OpenLayers是为了进一步使用各种地理信息。 它是完全免费的开源JavaScript。 2. 话不多说，先看效果 3. 在vue环境下，创建一个Map地图 3.1 npm 安装 openlayers cnpm i
OpenLayers使用
Pluto_fxy的博客
08-13 3310
最近项目有用到ol来加载地图并进行一些常规的操作，ol的官网以api的格式来写的，而且全英文，对新手来说简直太不友好了（碎碎念）所以写个文章来记录一下，以备不时之需。
在Vue项目中使用openlayers开发GIS项目
huangzhixin1996的博客
06-25 1426
说起点位不得不提到feature对象,feature可以理解成是我们自定义在地图上添加的元素,所以要把点位信息赋予给feature,然后再把feature添加到地图上。地图的初始化完成后，它只是一个具备了地图API的容器，在页面上的显示依然是一片空白，这个时候我们就需要为它添加图层，展示我们所需要的地图，这里以天地图图层作为例子。地图上添加了各种各样的元素之后,我们还想要能够地图根据我们的反馈,给我们展示对应的信息,此时需要添加可以跟地图交互的代码。
vue openlayers学习
七月❤的博客
10-16 874
1、安装vue-cli3.0.1:https://cli.vuejs.org/guide/installation.html cnpm install -g @vue/cli vue -V 查看版本(出现错误【 vue' 不是内部或外部命令，也不是可运行的程序 或批处理文件】处理方法 https://blog.csdn.net/Morphinee/article/details/10...
vue整合openlayers.zip
05-26
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、易用性和高性能著称。OpenLayers 是一个开源的JavaScript库，专门用于在Web浏览器中显示地图和地理数据。而GeoServer是一个开源的地理信息系统（GIS）...
加载时闪烁点样式的启动画面.zip
07-10
模仿UC等软甲加载时检测网络的闪烁点效果，具体美化交给大家自己了，希望大家能有用的上。   
Openlayers实现点闪烁扩散效果
01-18
本文实例为大家分享了Openlayers实现点闪烁扩散效果的具体代码，供大家参考，具体内容如下 点闪烁样式： DOM的样式实现 /**橙色点扩散闪烁样式*/ .point_animation{ background: #ff9900; width: 6px; height: 6px; border: 2px #ff9900 solid; border-radius: 50%; position: absolute; } .point_animation p, .point_animation span{ position: absolute; width: 4px; he
openlayers动态线
12-22
openlayers通过canvas绘制路线，动态模拟动态起点到终点的过程
openlayers 态势箭头、进击箭头等
02-28
矢量图层用于显示由点、线、面等几何对象组成的地理数据。在态势箭头或进击箭头的场景中，我们可以使用LineString几何对象来表示箭头路径，而使用ArrowHead符号化方法来绘制箭头的头部。 1. **创建LineString几何...
前端数据可视化demo 项目使用了vue3，由vite构建
04-28
以下将详细阐述项目中涉及的关键技术和知识点。 ### Vue3 Vue3是Vue.js框架的最新版本，它带来了许多性能优化和新特性。Vue3引入了Composition API，这使得组件逻辑更加模块化，提高了代码的可复用性和可维护性。...
openlayers发布简易离线地图DEMO
12-06
离线地图的实现主要依赖于将在线地图数据预先下载并存储在本地，然后通过OpenLayers来读取和渲染这些存储的数据。在这个DEMO中，我们重点关注两个关键点：地图瓦片的组织和OpenLayers的配置。 1. **地图瓦片的组织*...
MapObject学习笔记－第五讲 MO图形的绘制
weixin_34184561的博客
05-22 226
第五讲 MO图形的绘制      MO虽然不是绘图软件，但经常要用到在地图上画点标明位置，画矩形或多边形标明地图查询范围等操作，因此也需要用到一些基本的绘图功能。 MO的绘图就是在MAP上产生图形对象的过程，图形对象主要有：Point（点），Points（点集）、Line（线）、Rectangle（矩形）、Polygon（多边形）、Ellipse（椭圆）。 绘图时，先要创建一个绘图对象，给他...
OpenLayers 的 Overlay 与 vue 组件结合案例
05-26
以下是一个简单的 OpenLayers Overlay 与 Vue 组件结合的案例： 1. 在 Vue 组件中定义一个 div 元素，并设置其样式和位置，作为 OpenLayers Overlay 的容器。 ```html <template> <div class="map-overlay" ref="overlay"></div> </template> <style> .map-overlay { position: absolute; top: 10px; right: 10px; z-index: 100; } </style> ``` 2. 在 Vue 组件中引入 OpenLayers 库，并在 mounted 钩子函数中创建一个 Overlay 对象，并将其添加到地图上。 ```javascript import ol from 'openlayers'; export default { mounted() { const map = new ol.Map({ target: 'map', // ... }); const overlay = new ol.Overlay({ element: this.$refs.overlay, positioning: 'top-right' }); map.addOverlay(overlay); } } ``` 3. 在 Vue 组件中定义一个方法，用于更新 Overlay 中的内容。这个方法可以根据需要接受一个参数，并将其渲染到 Overlay 容器中。 ```javascript export default { // ... methods: { updateOverlay(content) { this.$refs.overlay.innerHTML = content; } } } ``` 4. 在 Vue 组件中使用 updateOverlay 方法，更新 Overlay 中的内容。 ```javascript export default { // ... mounted() { // ... const overlay = new ol.Overlay({ element: this.$refs.overlay, positioning: 'top-right' }); map.addOverlay(overlay); // 更新 Overlay 内容 this.updateOverlay('Hello, World!'); } } ``` 这个案例中，我们使用了 OpenLayers 的 Overlay 对象来创建一个浮动面板，然后将其与 Vue 组件结合，通过 updateOverlay 方法来更新 Overlay 中的内容。这种方式可以方便地将 OpenLayers 的地图功能与 Vue 组件结合起来，实现更加灵活和丰富的交互效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三维giser

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值