Openlayer【三】—— 绘制多边形&GeoJson边界绘制

1.1、绘制多边形

在绘制多边形和前面绘制线有异曲同工之妙,多边形本质上就是由多个点组成的线然后连接组成的面,这个面就是最终的结果,那么这里使用到的是Polygon对象,而传给这个对象的值也是多个坐标,坐标会一个个的连起来组成一个面,而绘制多边形只需要塞进去多少个顶点即可

js 复制代码
const vectorSource = new VectorSource();
const vectorLayer = new VectorLayer({
  source: vectorSource
});
this.map.addLayer(vectorLayer);
const coordinates = [
  this.getRandomSmallCoordinate(),
  this.getRandomSmallCoordinate(),
  this.getRandomSmallCoordinate(),
  this.getRandomSmallCoordinate()
];
const polygonGeometry = new Polygon([coordinates]);

const polygonFeature = new Feature(polygonGeometry);

polygonFeature.setStyle(
  new Style({
    stroke: new Stroke({
      color: "red",
      width: 2
    }),
    fill: new Fill({
      color: "rgba(255,255,0,0.7)"
    })
  })
);

vectorSource.addFeature(polygonFeature);

1.2、绘制geoJson数据

在这里可以通过 GeoJSON 读取 GeoJSON 格式读取和写入数据的要素格式,在echart当中渲染地图也是使用这种数据格式的,那么这样的话就可以获取对应的geojson文件来把对应的地图渲染到地图上。

这里用到的json文件可以去网站上【阿里云数据可视化平台】进行下载,这里使用一个json文件进行加载渲染,

js 复制代码
let features = new GeoJSON().readFeatures(require('./mapJson/changsha.json'));
var vectorSource = new VectorSource({ features: features });
let lineLayer = new VectorLayer({
  id: item.id,
  name: "hunan border",
  opacity: 1,
  zIndex: 1,
  source: vectorSource
});
this.map.addLayer(lineLayer);
相关推荐
龙哥·三年风水3 小时前
群控系统服务端开发模式-应用开发-前端框架
分布式·vue·群控系统
cs_dn_Jie9 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
枝上棉蛮11 小时前
GISBox VS ArcGIS:分别适用于大型和小型项目的两款GIS软件
arcgis·gis·数据可视化·数据处理·地理信息系统·gis工具箱·gisbox
Yaml412 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
计算机-秋大田21 小时前
基于Spring Boot的船舶监造系统的设计与实现,LW+源码+讲解
java·论文阅读·spring boot·后端·vue
Yaml41 天前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
清灵xmf1 天前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
琴~~3 天前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
程序员徐师兄3 天前
基于 JavaWeb 的宠物商城系统(附源码,文档)
java·vue·springboot·宠物·宠物商城
ReBeX3 天前
【GeoJSON在线编辑平台】(1)创建地图+要素绘制+折点编辑+拖拽移动
前端·javascript·gis·openlayers·webgis