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中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
杨超越luckly5 小时前
ArcGISPro应用指南:ArcGISPro制图全流程详解
arcgis·信息可视化·gis·制图·arcgispro
一笑code8 小时前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
eric*16888 小时前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
喜欢敲代码的程序员20 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_1 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte1 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
一个有理想的摸鱼选手1 天前
CesiumLite-开箱即用的轻量化三维地图包(持续更新中...)
gis·cesium
skyymrj11 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D11 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台