在uniapp中使用openlayers

大家好，我是梦起，由于高德地图和百度地图的收费，对于我这种白嫖党，感觉少了点什么，像我这种穷的叮当响的，还要找我收费，那必须得找个免费的替代它。openlayers就成为我的选择。 首先，咱们需要下载openlayers

npm install ol

然后引入相关需要的包及样式

import 'ol/ol.css'
import { Map, View } from 'ol'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import Feature from 'ol/Feature'
import { LineString, Point, Polygon } from 'ol/geom'
import { Fill, Stroke, Style, Text, Circle, Icon } from 'ol/style'
import ollayerTile from 'ol/layer/Tile'
import olsourceOSM from 'ol/source/OSM'
import {get as getProjection} from 'ol/proj';
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import { ScaleLine, defaults as defaultControls, MousePosition } from 'ol/control'
import { transform } from 'ol/proj'

初始化地图方法

initMap(){
    //天地图影像
    var tdt = new TileLayer({
      source: new XYZ({
        url: 'http://t2.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=天地图申请key',
        projection: 'EPSG:3857',
        crossOrigin: '*',
      }),
    })
    //天地图标注
    var tdtLabel = new TileLayer({
      source: new XYZ({
        url: 'http://t2.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=天地图申请key',
        projection: 'EPSG:3857',
      }),
    })
    this.map = new Map({
      controls: defaultControls({
        attribution: false,
        zoom: false,
        rotate: false,
      }),
      target: 'map',
      layers: [tdt, tdtLabel],
      view: new View({
        projection: 'EPSG:3857',
        center: transform([102.712251, 25.040609], 'EPSG:4326', 'EPSG:3857'),
        zoom: 10,
        maxZoom: 18, //最大缩放级别
      }),
    })
    // 监听地图点击
    this.map.getViewport().addEventListener('click', (event) => {
      event.preventDefault()
      var coordinate = this.map.getEventCoordinate(event)
      var pixel = this.map.getPixelFromCoordinate(coordinate)
      var feature = this.map.forEachFeatureAtPixel(pixel, (feature) => {
        return feature
      })
    })
}

运行到h5一看，完美，但是运行到APP端时，白屏了，控制台报错：createElement of undefined，查找相关资料了解到，APP端不支持直接操作dom，但好在uniapp考虑到了我们非原生开发者的困难，有一个renderjs，于是使用renderjs，完美在APP端运行。效果如下

其实上面的写下来，大家是不是感觉似曾相识，没错，解决uniapp中使用openlayers在APP中不生效bug这篇文章上也写了类似的，今天加点东西。有一些需求是在地图的基础上加载部分其他数据，并实现相关业务，那么问题来了，要加载其他数据，就避免不了网络请求。但是renderjs不支持uni.request，当然可以使用fetch，但是由于我使用了自己封装好的请求方法，想想改动有点大，我有点懒，然后，我去找了一下相关资料，可以通过vsrc来实现renderjs和非renderjs之间通信，最终实现代码如下 效果如下：