vue集成openlayers

矫情吗；* 2022-02-13 15:07 273阅读 0赞

## 下载依赖 ##

cnpm i -S ol

## 创建地图文件 ##

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

*  按需引入相应的API，具体查看[官方文档][Link 1]

<script>
    import Map from "ol/Map";
    import View from "ol/View";
    // 添加图层
    import TileLayer from "ol/layer/Tile";
    import XYZ from "ol/source/XYZ";
    import TileWMS from "ol/source/TileWMS.js";
    // 格式化地理坐标
    import {  fromLonLat } from "ol/proj.js";
    export default { 
      data() { 
        return { 
          map: null,
          //后台服务器地址
          urlRoot: "http://193.112.110.27:8080/geoserver/gee/wms?",
        };
      },
      mounted() { 
        this.init();
      },
      methods: { 
        init() { 
          // 经纬度转化
          var center = fromLonLat([101.34272, 23.6042484]);
          // 自定义图层
          this.layers = [
            new TileLayer({ 
              source: new TileWMS({ 
                url: this.urlRoot, //图层地址
                params: {  LAYERS: "fangchenggang:other_sea" }, //图层名称
                serverType: "geoserver", //后台服务器
                zIndex: 2 //图层层级
              })
            }),
            new TileLayer({ 
              source: new TileWMS({ 
                url: this.urlRoot,
                params: {  LAYERS: "fangchenggang:realm" },
                serverType: "geoserver"
              }),
              zIndex: 3
            }),
            new TileLayer({ 
              source: new TileWMS({ 
                url: this.urlRoot,
                params: {  LAYERS: "fangchenggang:stockpile" },
                serverType: "geoserver"
              }),
              zIndex: 3
            }),
            new TileLayer({ 
              source: new TileWMS({ 
                url: this.urlRoot,
                params: {  LAYERS: "fangchenggang:road" },
                serverType: "geoserver"
              }),
              zIndex: 3
            }),
            new TileLayer({ 
              source: new TileWMS({ 
                url: this.urlRoot,
                params: {  LAYERS: "fangchenggang:railway" },
                serverType: "geoserver"
                //crossOrigin: 'anonymous'
              }),
              zIndex: 3
            }),
            new TileLayer({ 
              source: new TileWMS({ 
                url: this.urlRoot,
                params: {  LAYERS: "cesium:storage_yard" },
                serverType: "geoserver"
              }),
              zIndex: 3
            })
          ];
          // 加载地图
          this.map = new Map({ 
            target: "map", //地图容器
            layers: [        
            //加载天地图天地图
            new TileLayer({ 
              source: new XYZ({ 
                url: "https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              }),
              zIndex: 1
            })],
            view: new View({ 
              projection: "EPSG:3857",
              //初始化地图中心
              center: center,
              zoom: 2,
              // 镜头
              maxZoom: 18,
              minZoom: 13
            }),
            logo: false
          });
          //添加图层
          this.map.addLayer(layers);
        }
      }
    };
    </script>

## 其他API ##

*  从地图中删除给定的叠加层。

this.map.removeLayer(layer);

*  设置图层显示或隐藏

this.layers.road.setOpacity(0)

[Link 1]: https://openlayers.org/en/latest/apidoc/

发表评论取消回复

表情：

评论列表（有 0 条评论，273人围观）

还没有评论，来说两句吧...

相关阅读

相关 166：vue+openlayers 绘制椭圆形

![在这里插入图片描述][a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center] 第166个 [点击查看专栏目录][Link 1]

迷南。/ 2024年04月01日 15:31/ 0 赞/ 77 阅读

相关 vue中利用openlayers

首先在vue中安装openlayes依赖，现在推荐使用ol，ol需要一个一个的引入，我嫌麻烦就直接用的openlayers，我把openlayrs定义为全局变量，下载完open

港控/mmm°/ 2023年07月18日 05:58/ 0 赞/ 16 阅读

相关 Vue+Openlayer使用modify修改要素

> import \{ Modify \} from "ol/interaction"; > 1. 可自动捕捉 > 2. 可修改点、线、面。不用自己声明要修改的要素类

悠悠/ 2022年09月10日 07:20/ 0 赞/ 229 阅读

相关 Vue+Openlayer动态加载geojson

加载1个或多个要素 ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size

喜欢ヅ旅行/ 2022年09月09日 13:48/ 0 赞/ 271 阅读

相关 Vue+Openlayer实现实时定位

参考：[https://blog.csdn.net/weixin\_39340061/article/details/108196570][https_blog.csdn.ne

今天药忘吃喽~/ 2022年09月09日 10:56/ 0 赞/ 186 阅读

相关 Vue+Openlayer实现轨迹路线

![20210907104631391.gif][] <template> <div> <div id="map" ref="map" s

桃扇骨/ 2022年09月09日 00:18/ 0 赞/ 539 阅读

相关 Vue+Openlayer实现gif动态图

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFF

刺骨的言语ヽ痛彻心扉/ 2022年09月08日 14:47/ 0 赞/ 292 阅读

相关 Vue+Openlayer加载动画

> 注意：实现动画时不能有scoped！！！！通过gif ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q

红太狼/ 2022年09月08日 11:41/ 0 赞/ 262 阅读

相关 Vue+Openlayer中实现动画animate

参考：[https://blog.csdn.net/qq\_29722281/article/details/103834483][https_blog.csdn.net_qq

拼搏现实的明天。/ 2022年09月07日 14:56/ 0 赞/ 229 阅读

相关 vue集成openlayers

下载依赖 cnpm i -S ol 创建地图文件 <div class="map"></div> 按需引入相应的API，具体查看[官方文档

矫情吗；*/ 2022年02月13日 15:07/ 0 赞/ 274 阅读