基于Vue+Openlayer实现动态加载geojson的方法
作者:~疆 发布时间:2024-04-27 16:12:22
标签:Vue,Openlayer,geojson
加载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
0
投稿
猜你喜欢
- 本文讲解了一个使用XML技术上传文件的例子,使用该方法没有传统方法中的种种限制。 这个例子讲述了如何使用MSXML3.0和ADO Strea
- 最近因项目需要用ACCESS做数据库开发WEB项目看论坛上还许多人问及ACCESS被注入的安全问题许多人解决的方法仍然是用Replace替换
- 这篇文章主要介绍了Python检查 云备份进程是否正常运行代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价
- 如下所示:import dateutildef before_month_lastday(ti): today=dateutil
- 支付宝支付和微信支付是当今互联网产品常用的功能,我使用Django Rest Framework实现了网页上支付宝支付和微信支付的一个通用服
- 在上篇博客中,提到了对一个脚本进行的多次优化。当时以为已经优化得差不多了,但是当测试人员测试时,我才发现,踩到了Python的一个大坑。在上
- 1、单个像素(画点)利用pygame画点主要有三种方法:方法一:画长宽为1个像素的正方形import pygame,syspygame.in
- 从字符串载入模板我们可以定义模板字符串,然后载入并解析渲染:template.New(tplName string).Parse(tpl s
- 引言我们将学习如何构建一个终端应用程序(CLI应用程序)来管理我们的通讯录我们将使用type来构建CLI应用程序,使用Rich来创建彩色终端
- 以下插件是我在项目中经常使用的jQuery插件,不见得是最好的,但是我目前接触到的jQuery插件中最适合我的。01. jQuery.Fle
- 使用索引的场景:阿里云日志里出现了慢sql 然后发现publish_works_id字段会经常用于一些关联,所以决定把这个字段加上
- my.ini在参考https://www.jb51.net/article/100284.htm之后执行mysqld --initializ
- # encoding:utf-8### 文件名如:# 下吧.mp3##import os,refs=os.listdir('xb
- pycharm常用快捷键1、编辑(Editing)Ctrl + Space基本的代码完成(类、方法、属性)Ctrl + Alt + Spac
- 以下的文章主要是介绍SQL Server数据库与其实际应用元数据,我前两天在相关网站看见SQL Server数据库与其实际应用元数据的资料,
- 今天使用pip安装第三库时,有时会报错:pip._vendor.urllib3.exceptions.ReadTimeoutError: H
- FlashPaper 是Macromedia推出的一款电子文档类工具,通过使用本程序,你可以将需要的文档通过简单的设置转换为SWF格式的Fl
- 1.背景在python运行一些,计算复杂度比较高的函数时,服务器端单核CPU的情况比较耗时,因此需要多CPU使用多进程加快速度2.函数要求笔
- 前言Django提供了多种装饰器, 其中login_required可能是经常会使用到的。 这里介绍下四种使用此装饰器的办法。当然, 在使用
- 一、概论超大型系统的特点为:1、处理的用户数一般都超过百万,有的还超过千万,数据库的数据量一般超过1TB;2、系统必须提供实时响应功能,系统