uniapp中使用openlayers

相关链接 https://codeleading.com/article/25216143964/#google_vignette

例子

<template>
  <view id="map-id" class="map-class"></view>
</template>

<script>
  export default {
    data() {
      return {
        mapIsLoad: false,
        mapBase: {},
        mapInit: '',
        mapPoints: [],
        mapLines: []
      };
    },
    created() {},
    methods: {}
  }
</script>

<script module="olMap" lang="renderjs">
  export default {
    data() {
  return {
    tiles: [],
    placeId: '',
        mapObj: null,
        viewObj: null,
        pointLayer: null, // 点位图层
        pointSelect: null, // 点位图层 点击
        SELayer: null // 起始、终点
      }
    },
    mounted() {
      if (typeof window.ol === 'function') {
        this.initOlMap();
    console.log(1)
      } else {
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js'; // 可以通过此方式导入jquery，echart库
        script.onload = this.initOlMap.bind(this);
        document.head.appendChild(script);
    console.log(12)
      }
    },
    methods: {
      initOlMap() {     
        // 地图
        var map = new ol.Map({
        // 绑定 DIV 元素
        target: 'map-id',
        // 添加图层
        layers: [
          new ol.layer.Tile({
          // 设置图层的数据源
          // source: new ol.source.OSM() 
          source: new ol.source.XYZ({
        // url: 'https://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png'
     url: 'http://192.168.22.43/mapGis/mapImage/base/{z}/{x}/{y}.png'
      }) 
          })
        ],
        // 设置视图窗口
        view: new ol.View({
          center: ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857'),
          zoom: 5
        })
        });
            },
    }
  };
</script>

<style lang="less">
  .map-class {
         width: 100%;
         height: 100%;
        }
</style>