这篇文章给大家分享的是有关Vue如何创建OpenLayers组件的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
cnpm install ol
计算
安全
数据库
网络和加速
企业服务
<template>
<div id="map" class="map"></div>
</template>
<script>
import "ol/ol.css";
import Map from "ol/Map";
import OSM from "ol/source/OSM";
import TileLayer from "ol/layer/Tile";
import View from "ol/View";
export default {
mounted() {
this.initMap();
},
methods: {
initMap() {
new Map({
layers: [
new TileLayer({
source: new OSM()
})
],
target: "map",
view: new View({
center: [0, 0],
zoom: 2
})
});
console.log("init finished");
}
}
};
</script>
<style>
.map {
width: 100%;
height: 400px;
}
</style> <template>
<div>
<div id="map" class="map"></div>
</div>
</template>
<script>
import "ol/ol.css";
import ImageLayer from "ol/layer/Image";
import Map from "ol/Map";
import Projection from "ol/proj/Projection";
import Static from "ol/source/ImageStatic";
import View from "ol/View";
import { getCenter } from "ol/extent";
let extent = [0, 0, 338, 600];
let projection = new Projection({
code: "xkcd-image",
units: "pixels",
extent: extent
});
export default {
data() {
return {
map: {}
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
this.map = new Map({
layers: [
new ImageLayer({
source: new Static({
attributions: '© <a href="http://xkcd.com/license.html" rel="external nofollow" >xkcd</a>',
url: "http://localhost:8080/img/123.5cba1af6.jpg",
projection: projection,
imageExtent: extent
})
})
],
target: "map",
view: new View({
projection: projection,
center: getCenter(extent),
zoom: 1,
maxZoom: 4,
minZoom: 1
})
});
}
}
};
</script>
<style>
.map {
width: 100%;
height: 400px;
}
</style>感谢各位的阅读！关于“Vue如何创建OpenLayers组件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
