uni 引入 openlayers
公司最近项目非要用这玩意,是真难引入,网上方法也没有或者说的不明白。
废话不多说 直接上代码 js css可以直接用 连接 也可以去 官网下载, 国外网站 死慢死慢。
<template>
<view class="container">
<view id="olMap" class="olMap">
</view>
</view>
</view>
</template>
```javascript
<script module="ol" lang="renderjs" >
//import "../../static/css/ol.css"; //main 引入了
//import "@/static/js/ol.js";
//import data from "@/static/js/china.json";
export default {
data() {
return {
map: null,
}
},
mounted() {
if (typeof window.ol === 'function') {
this.initAmap()
} else {
// 动态引入较大类库避免影响页面展示
const link = document.createElement('link');
link.href = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css";
link.rel = 'stylesheet';
link.type = 'text/css';
link.onload = () => {
const script = document.createElement('script')
script.src = '../../static/js/ol.js'
script.onload = this.initAmap.bind(this)
document.head.appendChild(script)
}
document.head.appendChild(link);
}
},
methods: {
initAmap() {
this.map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: "olMap",
view: new ol.View({
zoom: 11,
center: [120.4, 36.1],
projection: "EPSG:4326"
})
})
}} }
</script>
<style>
.olMap{
width: 100%;
height:1000rpx;
}
</style>