vue 中使用openLayers

最新推荐文章于 2024-07-26 22:40:26 发布

先new一个对象.

最新推荐文章于 2024-07-26 22:40:26 发布

阅读量2.1k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Gyh9421/article/details/126174742

版权

首先在终端openLayers 包

npm i ol

初始化BingMap地图

这里我是将方法挂载到函数的原型上，通过导入导出来实现的可参考

第一步：先创建一个js文件，名字自定义

第二步：页面new 一个函数，用于我们存放方法再原型上

function BINGMAP() {

}

let BING = new BINGMAP();

第三步：我们先将提前下载好的ol 导入到地图，由于方法较多，需要一一导入

import 'ol/ol.css'

import BingMaps from "ol/source/BingMaps";

import Map from "ol/Map";

第四步：将初始化方法挂载到函数原型上

BINGMAP.prototype.initialize = (data) => {
    console.log(data);
    // console.log(data);
    layers = new TileLayers({
        visible: true,
        preload: Infinity,
        source: new BingMaps({
            key: data.key,
            imagerySet: data.styles,

        }),
      
    BingMap = new Map({
        layers: [layers, vector],
        target: data.mapId,
        view: new View({
            center: [data.lng, data.lat],
            zoom: data.zoom,
            maxZoom: 18,
            projection: 'EPSG:4326',
            constrainResolution: true, // 设置缩放级别为整数 
            smoothResolutionConstraint: false, // 关闭无级缩放地图

        }),
        interactions: new defaults({
            doubleClickZoom: false, //屏蔽双击放大事件
        })
    });
   
};

第五步：将这个函数导出

export {
    BING,
}

第六步：在vue页面导入

import { BING} from "../assets/api/bingMap";

第七步: 调用BING原型上的方法

首先在页面给个div容器来承载地图

<div id="map" ref="olMap"></div>

在mounted中调用方法

mounted() {
    BING.initialize({
      lng: 121.54066,
      lat: 38.96305,
      mapId: "map",
      zoom: 17,
      key: "这个参数为BingMap的key",
      styles: "Aerial",
      flag: false,
    });
}