uniapp引入openLayers天地图

最新推荐文章于 2024-09-19 12:12:36 发布

周周不爱喝粥

最新推荐文章于 2024-09-19 12:12:36 发布

阅读量1.7k

点赞数 1

分类专栏： uniapp 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/cherisezhou/article/details/126119578

版权

uniapp 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

注意：需要在官网下载openLayers
npm install ol
OpenLayers - Get the Code

一、设置容器

注意：需要设置宽高

二、使用步骤

1.引入库

代码如下（示例）：

 import 'ol/ol.css';
 import Map from 'ol/Map';
 import OSM from 'ol/source/OSM';
 import TileLayer from 'ol/layer/Tile';
 import View from 'ol/View';
 import TileWMS from 'ol/source/TileWMS';

2.初始化地图方法

代码如下（示例）：

//地图初始化
                initMap(){
                    helper.map = new Map({
                      layers: [
                        new TileLayer({
                          source: new OSM(),
                        }),
                      ],
                      target: 'map',
                      view: 
                      new View({
                          center: [111.47, 27.24], //定义地图的经度和纬度
                          projection:'EPSG:4326',
                          zoom: 12, //定义地图显示的层级
                          maxZoom: 30 //最大缩放
                      }),
                       
                    });
                    
                    helper.map.once('postrender', function(event) {//地图加载完成
                        
                    });
                },