基于Vue+Openlayer实现动态加载geojson的方法
程序员文章站
2022-03-25 13:49:18
加载1个或多个要素
加载1个或多个要素
<template>
<div id="map" style="width: 100vw; height: 100vh"></div>
</template>
<script>
import "ol/ol.css";
import tilelayer from "ol/layer/tile";
import vectorlayer from "ol/layer/vector";
import vectorsource from "ol/source/vector";
import xyz from "ol/source/xyz";
import { map, view, feature, ol } from "ol";
import { style, stroke, fill } from "ol/style";
import { polygon, multipolygon } from "ol/geom";
import areageo from "@/assets/chengdu.json";
export default {
data() {
return {
map: {},
arealayer: {},
};
},
mounted() {
this.initmap(); //初始化地图方法
this.addarea(areageo); //添加区域图层方法
this.pointmove();
this.getfeaturebyclick();
},
methods: {
pointmove() {
// 设置鼠标划过矢量要素的样式
this.map.on("pointermove", (e) => {
const ishover = this.map.hasfeatureatpixel(e.pixel);
this.map.gettargetelement().style.cursor = ishover ? "pointer" : "";
});
},
getfeaturebyclick() {
this.map.on("click", (e) => {
let features = this.map.getfeaturesatpixel(e.pixel);
this.map.getview().fit(features[0].getgeometry(), {
duration: 1500,
padding: [100, 100, 100, 100],
});
});
},
/**
* 设置区域
*/
addarea(geo = {}) {
if (object.keys(geo).length == 0 && geo.features.length == 0) return;
// 设置图层
this.arealayer = new vectorlayer({
source: new vectorsource({
features: [],
}),
});
// 添加图层
this.map.addlayer(this.arealayer);
let features = geo.features;
for (let i in features) {
let areafeature = {};
if (features[i].geometry.type == "multipolygon") {
areafeature = new feature({
geometry: new multipolygon(features[i].geometry.coordinates),
});
} else if (features[i].geometry.type == "polygon") {
areafeature = new feature({
geometry: new polygon(features[i].geometry.coordinates),
});
}
areafeature.setstyle(
new style({
fill: new fill({ color: "#4e98f444" }),
stroke: new stroke({
width: 3,
color: [71, 137, 227, 1],
}),
})
);
areafeature.setproperties(features[i].properties);
this.arealayer.getsource().addfeature(areafeature);
}
},
/**
* 初始化地图
*/
initmap() {
this.map = new map({
target: "map",
layers: [
new tilelayer({
source: new xyz({
url: "http://map.geoq.cn/arcgis/rest/services/chinaonlinestreetpurplishblue/mapserver/tile/{z}/{y}/{x}",
}),
}),
],
view: new view({
projection: "epsg:4326",
center: [103, 31],
zoom: 7,
}),
});
},
},
};
</script>
到此这篇关于vue+openlayer动态加载geojson的文章就介绍到这了,更多相关vue openlayer加载geojson内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
上一篇： 删除包含表情字符的字符串
下一篇： JSONP 通用函数封装
推荐阅读
-
jQuery实现动态加载(按需加载)javascript文件的方法分析
-
vue+echarts实现动态绘制图表及异步加载数据的方法
-
AngularJS实现根据变量改变动态加载模板的方法
-
基于Nacos实现Spring Cloud Gateway实现动态路由的方法
-
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
-
基于vue和react的spa进行按需加载的实现方法
-
c# 动态加载dll文件,并实现调用其中的方法(推荐)
-
c# 动态加载dll文件,并实现调用其中的简单方法
-
jQuery基于ajax实现页面加载后检查用户登录状态的方法
-
jQuery实现动态加载(按需加载)javascript文件的方法分析