基于Vue+Openlayer实现动态加载geojson的方法
作者:~疆 时间:2024-04-27 16:12:22
加载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>
来源:https://blog.csdn.net/qq_40323256/article/details/120042596
标签:Vue,Openlayer,geojson
0
投稿
猜你喜欢
Javascript"篱式"条件判断(翻译)
2008-08-01 12:21:00
python序列类型种类详解
2022-02-27 13:53:38
SQL Server中的XML数据类型详解
2024-01-15 20:56:44
mysql定时任务(event事件)实现详解
2024-01-25 13:22:18
Python利用带权重随机数解决抽奖和游戏爆装备问题
2023-09-21 10:16:43
Python语法垃圾回收机制原理解析
2021-04-02 13:37:45
通过python实现弹窗广告拦截过程详解
2022-04-12 09:21:31
常见数据库系统比较 Oracle数据库
2010-07-28 12:44:00
用JavaScript实现单继承和多继承的简单方法
2024-04-23 09:15:33
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2022-03-11 10:59:04
从git仓库中删除.idea文件夹的小妙招
2022-10-29 04:12:00
border:none;与border:0;的区别
2009-11-27 19:04:00
SQL2005学习笔记 EXCEPT和INTERSECT运算符
2024-01-14 16:15:15
Python实战之疫苗研发情况可视化
2023-08-19 15:29:35
解决Mysql报Invalid default value for ''operate_time''错误的问题
2024-01-14 08:42:16
Python3.5面向对象与继承图文实例详解
2021-05-14 15:48:42
如何用python爬取微博热搜数据并保存
2021-10-21 14:13:38
自适应网页设计(Responsive Web Design)
2012-05-02 10:49:07
mysql_connect(): Connection using old (pre-4.1.1) authentication protocol refused
2024-01-23 08:22:11
详解Python验证码识别
2023-11-12 23:46:40