vue引入高德地图,openlayers加载百度地图
这篇文章主要介绍了某视频剪辑软件利用开放层加载天地图和高德地图，下文章主要由两部分完成开放层加载天地图和加载高德地图，下面来看看详细内容吧，需要的朋友可以参考一下，希望对大家有所帮助
目录
一、天地图部分1、在某视频剪辑软件中安装开放层二、高德地图部分
一、天地图部分
1、在vue中安装openlayers
npm i -保存开环（同Open Loop）
这里说的某视频剪辑软件是基于脚手架构建的。新建个页面，也就是某视频剪辑软件文件，配置好路由。接着就是可以直接放入我的代码运行显示了。
某视频剪辑软件利用开放层加载天地图和高德地图
模板
div class=wrapper
差异天地图/div
div class=map id=olMap/div
/div
/模板
脚本
导入“ol/ol。CSS”；
导入{
从" ol/层"平铺为平铺层}；
从" ol/source/XYZ "导入XYZ；
导入{
默认为" ol/控制"中的默认控件}；
从" ol/Map.js "导入地图；
从" ol/View.js "导入视图；
导出默认值{
data() {
返回{
地图：空，
解析器：null，
};
},
已安装(){
这个。init map()；
},
方法：{
initMap() {
常数映射=新地图({
目标：" olMap "，
视图：新视图({
中心：[0,0],//中心点经纬度
缩放：4,//图层缩放大小
预测：“EPSG:4326”，
}),
控件：默认控件({
缩放：真的，
归因：假的，
旋转：假，
}),
});
this.map=地图
//添加地图
let URL= http://t { 0-7 }。天地图。com/数据服务器？x={ x } y={ y } l={ z } ；
URL=` {
url}T=vec_ctk=替代你的键
常量源=新XYZ({
网址：网址，
预测：“EPSG:4326”，
});
const tdtLayer=新瓷砖层({
来源：来源，
});
这个。地图。添加层(TDT层)；
//添加注记
URL= http://t { 0-7 }。天地图。com/数据服务器？x={ x } y={ y } l={ z } ；
URL=` {
url}T=cva_ctk=替代你的键
const sourceCVA=新XYZ({
网址：网址，
预测：“EPSG:4326”，
});
const tdtcvaLayer=新切片图层({
来源：sourceCVA，
});
这个。地图。添加层(tdtcvaLayer)；
},
},
};
/脚本
样式范围。地图{
宽度：100%;
身高：100vh
}
/风格
天地图就可以显示出来了。
效果图：
二、高德地图部分
相对于天地图，高德地图就容易多了，直接上代码
模板
div class=wrapper
差异高德地图/div
div id=map/div
/div
/模板
脚本
导入{
" ol "中的地图、视图、要素}
从" ol/proj "导入*作为奥尔普罗伊
导入{
点}来自" ol/geom "
导入{
" ol/Style "中的样式、填充、描边、圆形
//添加图层
从" ol/图层/拼贴"导入图层
导入{
" ol/层"中的矢量作为矢量层}
导入{
XYZ，矢量作为矢量源}来自" ol/source "
//引入样式文件
导入 ol/ol.css
导出默认值{
data() {
返回{
地图：空
}
},
已安装(){
这个。init()；
这个。set marker()；
},
方法：{
init(){
this.map=新地图({
目标："地图",
层：[新平铺层({
来源：新XYZ({
URL: https://wprd 0 { 1-4 }。是。高德。com/appmaptile？lang=zh _ cn size=1 style=7x={ x } y={ y } z={ z } ，
})
})
],
视图：新视图({
//将西安作为地图中心
//olProj.fromLonLat方法将经纬度转换成对应的坐标
中心：olProj.fromLonLat([108.945951，34.465262])，
缩放：2
}),
})
},
setMarker(){
let _style=新样式({
图片：新sCircle({
半径：10,
笔画：新笔画({
颜色： #fff ，
}),
填充：新填充({
颜色： #3399CC ，
}),
}),
});
let _feature=新功能({
几何：新点(olProj.fromLonLat([108.945951，34.465262])，
});
_ feature . set style(_ style)；
let _marker=新矢量层({
来源：新矢量源({
功能：[_feature]，
}),
});
this . map . add layer(_ marker)；
},
},
}
/脚本
样式范围
#地图{
/*屏幕宽度和高度*/
宽度：100vw
身高：100vh
}
/风格
这就是这篇关于vue使用openlayers加载天空地图和高德地图的文章。有关openlayers加载天空地图和高德地图的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。