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);
相关推荐
GIS之家11 小时前
vue3+arcgisAPI4示例:绘图工具动态修改样式导出GeoJSON(附源码下载)
arcgis·gis·webgis
叫我阿柒啊12 小时前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
工业互联网专业1 天前
基于Spark的新冠肺炎疫情实时监控系统_django+spider
python·spark·django·vue·毕业设计·源码·课程设计
SheldonChang1 天前
Onlyoffice集成与AI交互操作指引(Iframe版)
java·人工智能·ai·vue·onlyoffice·postmessage
lichong9511 天前
【混合开发】Android+Webview+VUE播放视频之视频解析工具mediainfo-Macos
android·macos·架构·vue·音视频·api·postman
PBitW2 天前
element plus 使用细节 (二)
前端·vue·element plus·element使用细节
叫我阿柒啊2 天前
从全栈开发到云原生:一位Java工程师的实战经验分享
java·spring boot·redis·云原生·kafka·vue·全栈开发
叫我阿柒啊2 天前
Java全栈工程师的实战面试:从Vue到Spring Boot的技术旅程
java·spring boot·微服务·vue·api·react·rest
GISBox2 天前
GISBox矢量服务使用指南:从数据导入到服务发布
react.js·json·gis
刺客-Andy3 天前
CSS中使用 HSL(Hue, Saturation, Lightness) 动态生成色值
前端·css·前端框架·vue