在uniapp中试图引入openlayers前端库,我尝试了特别引入多种方法一直不成功,还以为是包的版本问题或者链接响应问题,结果是因为css样式一直设置错误,要把的样式在设置成100vw/100vh或者固定值才能成功显示。
下面放整体代码:
<template>
<view class="container">
<view id="olMap" class="olMap">
<button>点我一下试试</button>
</view>
</view>
</template>
<script module="ol" lang="renderjs">
//视图层renderjs操作,注意此层中不能uniapp提供相关接口。
// import '../../static/openlayer/v6.6.1-dist/ol.js'不支持此导入方式否则,打包失败
export default {
data() {
return {
title: 'Hello'
}
},
mounted() {
if (typeof window.ol === 'function') {
this.initAmap()
} else {
const script = document.createElement('script')
script.src = 'static/js/ol.js' //可以通过此方式导入jquery,echart库
script.onload = this.initAmap.bind(this)
document.head.appendChild(script)
}
},
methods: {
initAmap() {
this.map = new ol.Map({
layers: [
// 默认方法
// new ol.layer.Tile({
// source: new ol.source.OSM()
// })
// redis服务器
// new ol.layer.Tile({
// source: new ol.source.TileWMS({
// url: 'http://10.133.20.9:38080/geoserver/hz/wms',
// params: {
// 'FORMAT': 'image/png',
// tiled: true,
// "STYLES": '',
// "LAYERS": 'hz:geotools_coverage',
// "exceptions": 'application/vnd.ogc.se_inimage',
// tilesOrigin: 105.43304443359374 + "," + 32.101189732320925
// }
// })
// //new ol.source.OSM()
// })
//天地图
//矢量底图
new ol.layer.Tile({
source: new ol.source.XYZ({
url:'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=053318a29e7ee8be40a0958754cc1827'
})
}),
//矢量标记
new ol.layer.Tile({
source: new ol.source.XYZ({
url:'http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=053318a29e7ee8be40a0958754cc1827'
})
}),
],
target: "olMap",
view: new ol.View({
// center: ol.proj.fromLonLat([0, 0]),
projection: "EPSG:4326", //使用这个坐标系
center: [104, 30], //初始坐标
zoom: 12,
minZoom: 10,
maxZoom: 17
})
})
},
}
}
</script>
<style lang="scss">
@import url("@/static/js/ol.css");
html,
body {
height: 100vh;
width: 100vw
}
#olMap {
position: relative;
width: 100vw;
height: 100vh;
}
</style>
参考:https://blog.csdn.net/weixin_40043172/article/details/126875789;https://www.bilibili.com/video/BV1Su411q7pz/?spm_id_from=333.788.top_right_bar_window_history.content.click