vue的openlayers使用教程,vue使用openlayers
这篇文章主要介绍了Vue Openlayer加载动画效果的实现代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
注意：实现动画时不能有scoped！！！！
通过可交换的图像格式
模板
测试
div id= map ref= map style= width:100 VW；高度：100英尺/格
/div
/模板
脚本
导入“ol/ol。CSS”；
从" ol "导入{地图、视图、覆盖};
从" ol/图层/拼贴"导入图层
从" ol/source/OSM "导入OSM；
导出默认值{
名称： gif ，
data() {
返回{
地图：{},
覆盖：{},
标记点：{},
地理数据：{
类型：“FeatureCollection”，
功能：[
{
类型："特征",
属性：{
标题： 警报1,
},
几何图形：{
类型："点",
坐标：[91.48879670091165,37.8314884701121],
},
},
{
类型："特征",
属性：{
标题： 警报2,
},
几何图形：{
类型："点",
坐标：[99.19515576149941,26.713646654711134],
},
},
{
类型："特征",
属性：{
标题： 警报3,
},
几何图形：{
类型："点",
坐标：[123.74363825288785,44.3664825734726],
},
},
],
},
};
},
已安装(){
这个。init map()；
这个。add gif()；
},
方法：{
//初始化地图
initMap() {
this.map=新地图({
目标："地图",
图层：[
新平铺层({
来源：新OSM()，
}),
],
视图：新视图({
预测：“EPSG:4326”，
中心：[104.912777,34.730746],
变焦：4.5,
}),
});
},
//使用覆盖物添加GIF格式格式动态图标点位信息
addGif() {
让坐标=这个。getcoordinatesbygeojson(这个。geojsondata)；
对于(坐标中的常数I){
设gif _ span=document。createelement(“span”)；
文档。文档元素。appendchild(gif _ span)；
这个. nextTick(()={
this.markerPoint=新覆盖({
位置：坐标[我]，
element: gif_span，
定位："中心-中心",
});
这个。地图。添加覆盖(这。标记点)；
});
}
},
//根据矢量数据数据获取坐标集
getCoordinatesByGeojson(geojsonData){
设坐标=[];
geojsondata。特色。地图((要素)={
坐标=[.坐标，特色。几何。坐标]；
});
返回坐标；
},
},
};
/脚本
样式lang=scss 。测试{
跨度{
显示：内嵌-块；
宽度：80px
高度：80px
边界半径：50%;
背景：URL( https://智能花园-管理。成都OSS-。阿里云。com/gif。gif’)
不重复；
背景-尺寸：80像素80像素
}
}
/风格
通过关键帧@关键帧
模板
测试
div id= map ref= map style= width:100 VW；高度：100英尺/格
/div
/模板
脚本
导入“ol/ol。CSS”；
从" ol "导入{地图、视图、覆盖};
从" ol/图层/拼贴"导入图层
从" ol/source/OSM "导入OSM；
导出默认值{
名称： gif ，
data() {
返回{
地图：{},
覆盖：{},
点覆盖：{},
地理数据：{
类型：“FeatureCollection”，
功能：[
{
类型："特征",
属性：{
标题： 警报1,
},
几何图形：{
类型："点",
坐标：[91.48879670091165,37.8314884701121],
},
},
{
类型："特征",
属性：{
标题： 警报2,
},
几何图形：{
类型："点",
坐标：[99.19515576149941,26.713646654711134],
},
},
{
类型："特征",
属性：{
标题： 警报3,
},
几何图形：{
类型："点",
坐标：[123.74363825288785,44.3664825734726],
},
},
],
},
};
},
已安装(){
这个。init map()；
这个。add gif()；
},
方法：{
//初始化地图
initMap() {
this.map=新地图({
目标："地图",
图层：[
新平铺层({
来源：新OSM()，
}),
],
视图：新视图({
预测：“EPSG:4326”，
中心：[104.912777,34.730746],
变焦：4.5,
}),
});
},
//使用覆盖物添加GIF格式格式动态图标点位信息
addGif() {
让坐标=这个。getcoordinatesbygeojson(这个。geojsondata)；
对于(坐标中的常数I){
设point _ div=document。createelement( div )；
点_格。class name= CSS _ animation
点_格。id=` coordinate _ $ { I }
文档。文档元素。appendchild(point _ div)；
这个. nextTick(()={
this.point_overlay=新叠加({
位置：坐标[我]，
元素：point_div
定位："中心-中心",
});
这个。地图。添加覆盖(这。point _ overlay)；
});
}
},
//根据矢量数据数据获取坐标集
getCoordinatesByGeojson(geojsonData){
设坐标=[];
geojsondata。特色。地图((要素)={
坐标=[.坐标，特色。几何。坐标]；
});
返回坐标；
},
},
};
/脚本
样式lang=scss 。测试{。css _动画{
高度：50px
宽度：50px
边界半径：50%;
背景：rgba(255，0，0，0.9)；
方框阴影：插入0 0 8px红色；
transform:scale(0)；
动画：我的前3s
动画-迭代-计数：无限；//无限循环
}
@关键帧我的第一个{
到{
变换：缩放(2);
背景：rgba(0，0，0，0)；
box-shadow: inset 0 0 50px rgba(255，0，0，0)；
}
}
}
/风格
既可加载动画，又可获取动画所在要素点的属性
注意：该代码存在问题。目前只能要么点击获取属性，要么展示动画，而不能同时存在，还有待优化！
模板
测试
div id= map ref= map style= width:100 VW；高度：100英尺/格
差异
id=popup
style=
位置：绝对；
背景色：rgba(47，57，90，0.678)；
底部：20px
左：30px
边框：1px纯白；
填充：10px
宽度：60px
{{ properties.title }}
/div
/div
/模板
脚本
导入“ol/ol。CSS”；
从" ol "导入{地图、视图、覆盖};
从" ol/source "导入{ OSM，向量为向量源}；
从" ol/层"导入{ Vector as VectorLayer，Tile as Tile layer }；
从" ol/format/GeoJSON "导入geo JSON
从" ol/交互/选择"导入选择；
从" ol/事件/条件"导入{ altKeyOnly，click，指针移动}；
从" ol/style "导入{填充、描边、样式、圆形}。
导出默认值{
名称： gif ，
data() {
返回{
地图：{},
图层：{},
覆盖：{},
点覆盖：{},
地理数据：{
类型：“FeatureCollection”，
功能：[
{
类型："特征",
属性：{
标题： 警报1,
},
几何图形：{
类型："点",
坐标：[91.48879670091165,37.8314884701121],
},
},
{
类型："特征",
属性：{
标题： 警报2,
},
几何图形：{
类型："点",
坐标：[99.19515576149941,26.713646654711134],
},
},
{
类型："特征",
属性：{
标题： 警报3,
},
几何图形：{
类型："点",
坐标：[123.74363825288785,44.3664825734726],
},
},
],
},
选择：{},
属性：{
标题： ,
},
};
},
已安装(){
这个。init map()；
//这个。添加gif()；//注释掉后，点击可获取特征属性
},
方法：{
//初始化地图
initMap() {
this.layer=new VectorLayer({
来源：新矢量源({
特点：新GeoJSON().readFeatures(this.geojsonData)，
}),
});
this.map=新地图({
目标："地图",
图层：[
新平铺层({
来源：新OSM()，
}),
这一层，
],
视图：新视图({
预测：“EPSG:4326”，
中心：[104.912777,34.730746],
变焦：4.5,
}),
});
this.select=新选择({
条件：点击，//单击选择
});
这个。地图。addinteraction(this。选择)；
let overlayer _ popup=new overlayer({
元素：文档。getelementbyid( popup )。
定位："中心-中心",//一定要加上，否则会有偏移
});
this.select.on(select ，(e)={
设坐标=e . mapbrowserevent。坐标；//获取选择的坐标
设feature select=e . selected[0]；//选中的特征要素
if (e.selected.length！==0) {
overlayer_popup.setPosition(坐标);
这个。地图。添加叠加层(overlayer _ popup)；
}否则{
overlayer _ popup。设置位置(" ")；
}
如果（功能选择){
这个。属性=功能选择。获取属性()；//获取当前要素的所有属性
//设置选中的样式
featureSelect.setStyle(
新样式({
图片：新圆圈({
半径：10,
填充：新填充({
//矢量图层填充颜色，以及透明度
颜色： rgba(255，0，0，0.5)，
}),
笔画：新笔画({
//边界样式
颜色： rgba(100，90，209，0.6)，
宽度：3,
}),
}),
})
);
}
});
//设置鼠标划过矢量要素的样式
this.map.on(pointermove ，(e)={
const结束=这个。地图。hasfeatureatpixel(e . pixel)；
这个。地图。gettargetelement()样式。光标=是悬停？指针":";
});
},
//使用覆盖物添加GIF格式格式动态图标点位信息
addGif() {
让坐标=这个。getcoordinatesbygeojson(这个。geojsondata)；
对于(坐标中的常数I){
设point _ div=document。createelement( div )；
点_格。class name= CSS _ animation
点_格。id=` coordinate _ $ { I }
文档。文档元素。appendchild(point _ div)；
这个. nextTick(()={
this.point_overlay=新叠加({
位置：坐标[我]，
元素：point_div
定位："中心-中心",
});
这个。地图。添加覆盖(这。point _ overlay)；
});
}
},
//根据矢量数据数据获取坐标集
getCoordinatesByGeojson(geojsonData){
设坐标=[];
geojsondata。特色。地图((要素)={
坐标=[.坐标，特色。几何。坐标]；
});
返回坐标；
},
},
};
/脚本
样式lang=scss 范围。测试{
}
/风格
样式lang=scss 。测试{。css _动画{
高度：50px
宽度：50px
边界半径：50%;
背景：rgba(255，0，0，0.9)；
方框阴影：插入0 0 8px红色；
transform:scale(0)；
动画：我的前3s
动画-迭代-计数：无限；//无限循环
}
@关键帧myfirst {
到{
变换：缩放(2)；
背景：rgba(0，0，0，0)；
box-shadow: inset 0 0 50px rgba(255，0，0，0)；
}
}
}
/风格
这就是这篇关于Vue Openlayer加载动画的文章。更多相关Vue Openlayer加载动画内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。