vue使用openlayers,vue引入openlayers
大家都知道使用开放层可以很灵活自由的做出各种地图和空间数据的展示。而且这个框架是完全免费和开源的，本文记录下某视频剪辑软件使用开放层入门，使用开放层创建地图组件的相关知识，需要的朋友一起学习下吧
开放层是一个模块化、高性能并且功能丰富的网络地理信息系统客户端的Java脚本语言包，用于显示地图及空间数据，并与之进行交互，具有灵活的扩展机制。
简单来说，使用开放层（后面简称ol)可以很灵活自由的做出各种地图和空间数据的展示。而且这个框架是完全免费和开源的。
前言
本文记录某视频剪辑软件使用开放层入门，使用开放层创建地图组件，分别使用开放层提供的地图和本地图片做为地图。
概观
开放层使得在任何网页中放置动态地图变得容易。它可以显示从任何来源加载的地图切片、矢量数据和标记OpenLayers的开发旨在促进各种地理信息的使用。它是完全免费的开源JavaScript，在2条款加州大学伯克利分校软件(Berkeley Software Distribution)许可（也称为免费)下发布。
官方地址：https://openlayers.org/
1. 安装 OpenLayers 库
cnpm安装开环（同Open Loop）
2. Vue 创建 OpenLayers 组件
效果图
Code
模板
div id=map class=map/div
/模板
脚本
导入“ol/ol。CSS”；
从" ol/地图"导入地图；
从" ol/source/OSM "导入OSM；
从" ol/图层/拼贴"导入图层
从" ol/视图"导入视图；
导出默认值{
已安装(){
这个。init map()；
},
方法：{
initMap() {
新地图({
图层：[
新平铺层({
资料来源：新OSM()
})
],
目标："地图",
视图：新视图({
中心：[0,0],
缩放：2
})
});
console.log(初始化完成);
}
}
};
/脚本
风格。地图{
宽度：100%;
高度：400像素
}
/风格
3. OpenLayers 使用本地图片作为地图
效果图：
Code
模板
差异
div id=map class=map/div
/div
/模板
脚本
导入“ol/ol。CSS”；
从" ol/图层/图像"导入图像图层
从" ol/地图"导入地图；
从" ol/proj/Projection "导入投影；
从" ol/source/ImageStatic "导入静态；
从" ol/视图"导入视图；
从" ol/范围"导入{获取中心}；
假设范围=[0,0,338,600];
让投影=新投影({
代码： xkcd-image ，
单位："像素",
范围：范围
});
导出默认值{
data() {
返回{
地图：{}
};
},
已安装(){
这个。init map()；
},
方法：{
initMap() {
this.map=新地图({
图层：[
新图像层({
来源：新静态({
属性： a href= http://xkcd。com/license。html rel=外部no follow xkcd/a，
网址： http://localhost:8080/img/123.5 CBA 1 af 6。 jpg ，
投影：投影，
图像范围：范围
})
})
],
目标："地图",
视图：新视图({
投影：投影，
中心：获取中心(范围),
缩放：1,
maxZoom: 4，
最小缩放：1
})
});
}
}
};
/脚本
风格。地图{
宽度：100%;
高度：400像素
}
/风格
到此这篇关于某视频剪辑软件开放层快速入门学习教程的文章就介绍到这了，更多相关某视频剪辑软件开放层入门内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。