随笔 - 35  文章 - 0  评论 - 0  阅读 - 9405

openlayers--添加数据源

调用地图服务接口后,对接口返回值做处理--添加数据源

if(res.features.length) {
//获取--根据行政区代码查询对应行政区的中心点
let lons = res.features[0].properties.LON;
let lats = res.features[0].properties.LAT;
pagemap.getView().setCenter([lons,lats])
if(res.features && res.features.length > 0) {
let { features } = res
  //边界的点位数组---中心点点位的数组
let polygonFeatures = [], pointFeatures = []
//叠加边界以及数量
features.map(feature => {
//绘制边界
let rings = feature.geometry.coordinates[0]
let featurePolygon = new ol.geom.Polygon(rings)
let _feature = new ol.Feature({geometry: featurePolygon})
    //featureStyle 边界线以及边界内容的样式
_feature.setStyle(this.featureStyle()['sourceData'])
polygonFeatures.push(_feature)

//绘制中心点文字
let pointCenter = [feature.properties.LON,feature.properties.LAT];
let featurePoint = new ol.geom.Point(pointCenter)
let pointFeature = new ol.Feature({
geometry: featurePoint,
name: data.value,
});
    //createPointStyle 中心点的图文标注样式设置
pointFeature.setStyle(this.createPointStyle(pointFeature));
})
//乡镇排名叠加火情点
if(this.paimingArr){
this.paimingArr.map(item=>{
let pointFireCenter = [Number(item.longitude),Number(item.latitude)];
let featureFirePoint = new ol.geom.Point(pointFireCenter)
let pointFireFeature = new ol.Feature({
geometry: featureFirePoint,
name: item.towername,
});
     //createImgStyle 行政区内所有点位的图文标注样式设置
pointFireFeature.setStyle(this.createImgStyle(pointFireFeature));
pointFireFeature.set('monthFireInfo',item);
pointFeatures.push(pointFireFeature)
})
}
this.addVectorLayers(pointFeatures)
this.clickToPop();
}
}
posted on   kaookiee  阅读(124)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示