vue中利用openlayers

港控/mmm° 2023-07-18 05:58 29阅读 0赞

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

import ol from 'openlayers;

然后设置成全局属性

Vue.prototype.$ol=ol;

使用ol时，只需要使用this.$ol就可以了。

下面来说使用ol加载天地图

首先定义一个装载地图的容器，使用id进行标识，其他标识方式也可以试试

<div id='map'>
    
    </div>

然后在方法里写入

var ol = this.$ol;
              // var $ = this.$jq;
              var l1 = new ol.layer.Tile({
                source: new ol.source.XYZ({
                  url: "http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}"// 注记
                })
              });
              var l2 = new ol.layer.Tile({
                source: new ol.source.XYZ({
                  url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"  // 行政区划
                })
              });
              var map = new ol.Map({
                target: 'map',
                view: new ol.View({
                  center: ol.proj.fromLonLat([108.532, 34.145]),
                  zoom:5,
                  // minZoom: 5
                }),
                controls: [
     
                ]
     
              });
              map.addLayer(l1);
              map.addLayer(l2);

直接新建两个图层l1  天地图的注记图层，l2天地图的行政区划图层， 区别就是source不同

然后建立map，target就是那个地图容器，view是视图，center设置中心点坐标，zoom为缩放级别，minZoom最小缩放级别。

controls:我给设置为空，不然就会出现ol底下的那个logo.

最后，用addLayer方法将l1、l2两个图层加入到map中。

另天地图有以下几种地图服

天地图还有多种服务类型

发表评论取消回复

表情：

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

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

相关阅读

相关 043：vue+openlayers利用canvas clip 实现探照灯效果（代码示例）

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

朱雀/ 2024年04月08日 08:22/ 0 赞/ 95 阅读

相关 110：vue+openlayers利用setSource来显示隐藏地图（代码示例）

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

- 日理万妓/ 2024年04月07日 10:29/ 0 赞/ 67 阅读

相关 137：vue+openlayers 绘制矩形，利用createBox来处理

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

柔情只为你懂/ 2024年04月03日 07:15/ 0 赞/ 71 阅读

相关 165：vue+openlayers 利用turf实现遮罩挖洞效果

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

「爱情、让人受尽委屈。」/ 2024年04月01日 14:50/ 0 赞/ 49 阅读

相关 245：vue+openlayers 利用canvas绘制边线纹路

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

ゞ浴缸里的玫瑰/ 2024年02月19日 08:43/ 0 赞/ 21 阅读

相关 vue中利用openlayers

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

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

相关 Vue+Openlayer中使用select选择要素

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAfueWhg_size_17_color_

小鱼儿/ 2022年09月08日 11:52/ 0 赞/ 217 阅读

相关 Vue+Openlayer中实现动画animate

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

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

相关 vue集成openlayers

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

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

相关 vue中使用openlayer实现视图联动

multiView.vue <template> <div class="main"> <div id="m

我就是我/ 2021年07月25日 11:19/ 0 赞/ 479 阅读