使用openPlayer，根据坐标加载覆盖物

使用openPlayer，根据坐标加载覆盖物

本文默认您已经使用OL成功加载离线瓦片

openPlayer加载离线瓦片

一、加载覆盖物

1、需求

根据后端返回的坐标数据，在页面初次渲染的时候，加载所有数据坐标的覆盖物

2、代码实现

<template>
    <div id="map"></div>
</template>
<script>
//导入基本模块
import 'ol/ol.css';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { Map, View, Feature } from 'ol';
import { fromLonLat, toLonLat, transform } from 'ol/proj';
import { Fill, Style, Stroke } from 'ol/style';
import { Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';
import { Polygon, Circle } from 'ol/geom';
import { getVectorContext } from 'ol/render';
import Overlay from "ol/Overlay";
export default {
    data() {
        return {
            map: null,
            tileLayer: null,   // 离线瓦片的图层
            tileSource: null,   // 离线瓦片资源
            vector: null,
            saveClickPixel : []
        };
    },
    methods: {
        initMap() {
            this.tileLayer = new TileLayer({
                source: new XYZ({
                    url: window.customizeConfig.mapUrl,
                }),
            });
            // 加载所有数据覆盖物
            this.$parent.firstAddAllRectangle();
            this.map = new Map({
                layers: [this.tileLayer],
                view: new View({
                    center: transform([113.645358, 34.750684], 'EPSG:4326', 'EPSG:3857'),
                    minZoom: 0, // 最小缩放级别  
                    maxZoom: 11, // 最大缩放级别
                    zoom: 9
                }),
                target: "map", // 将地图注入到 dom 元素中，此处写 dom id
            });
            this.map.on('singleclick', (evt) => {
                var feature = this.map.forEachFeatureAtPixel(evt.pixel,(feature, layer)=> {
                    return feature;
                });
                if (feature) {
                    // 自定义全屏按钮   会改变原有覆盖物的   事件对象的evt.pixel    导致feature/layer  获取失败
                    // 所以需要保存这个evt.pixel;
                    this.saveClickPixel = evt.pixel;
                    this.$parent.saveArticleId = feature.values_.articleId;
                    this.$parent.isShowFigureInfoDialog = true;
                } else {
                    var layer = this.map.forEachFeatureAtPixel(this.saveClickPixel,(feature, layer)=> {
                        return layer;
                    });
                    if (layer) {
                        this.$parent.saveArticleId = layer.values_.articleId;
                        this.$parent.isShowFigureInfoDialog = true;
                    }
                }
            });
        },
        // 绘制多边形（点集数组结构是[[xxxx(米),xxxx],[   xxxx,xxxx],.....]）
        // ol加载的瓦片  需要展示feature    必须使用  经纬度转米
        addAllRectangle(allCoordinates) {
            // 经纬度转为米：transform([113.645358, 34.750684], 'EPSG:4326', 'EPSG:3857')
            let overlayGroupArr = [];
            allCoordinates.forEach((item, index) => {
                var polygonPoi = [];
                item.coordinates.forEach(itemCoordinate => {
                    polygonPoi.push(transform([+itemCoordinate[1], +itemCoordinate[0]], 'EPSG:4326', 'EPSG:3857'));
                });
                overlayGroupArr[index] = new VectorLayer({
                    source: new VectorSource({
                        features: [new Feature({
                            geometry : new Polygon([
                                polygonPoi
                            ]),
                            // 外部加载进来的 都保存在当前Feature 对象的  values_ 字段下
                            articleId: item.articleId
                        })],
                    }),
                    style: {
                        'stroke-width': 2,
                        'stroke-color': "#1890FF",
                        'fill-color': [24, 144, 255, 0.1],
                    },
                    articleId: item.articleId
                });
            });
            overlayGroupArr.forEach(featureItem => {
                this.map.addLayer(featureItem);
            })
        },
        // 点击定位直接飞入到具体组坐标位置
        addRectangle(polygonPoi, articleId) {
            // 地图飞入指定坐标位置
            this.map.getView().animate({
                // center: fromLonLat([+polygonPoi[0][1], +polygonPoi[0][0]])
                center: transform([+polygonPoi[0][1], +polygonPoi[0][0]], 'EPSG:4326', 'EPSG:3857')
            });
        },
    },
    mounted() {
        this.initMap();
    },
};
</script>
<style scoped>
#map {
    width: 100%;
    height: 100%;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,
.ol-zoom {
    display: none;
}
#map>>>canvas {
    width: 100%;
}
</style>

3、加载覆盖物总结

• 本文加载的是多边形覆盖物Ploygon，处理的坐标数据格式是： [[米,米],[米,米],,,]
• 后端返回的如果是三位数和两位数的点位组合，即是经纬度，需要转换为米，才能加载出来覆盖物:transform([+itemCoordinate[1], +itemCoordinate[0]], 'EPSG:4326', 'EPSG:3857')
• 因为是多边形，所以点位个数不固定的。需要动态遍历加载点位allCoordinates
• 如果点击覆盖物事件中，需要传递外部数据，则需要将数据挂载到VectorLayer或者Feature对象下
• 点击定位，根据坐标，飞入到地图具体位置this.map.getView().animate({ center: transform([+polygonPoi[0][1], +polygonPoi[0][0]], 'EPSG:4326', 'EPSG:3857')
• 点击覆盖物事件触发暂未找到（如果您知道，请留言给我，谢谢）
• 点击覆盖物：这里是触发map对象的点击事件，如下所示

// 功能 点击覆盖物 打开覆盖物详情信息面板
this.map.on('singleclick', (evt) => {
    var feature = this.map.forEachFeatureAtPixel(evt.pixel,(feature, layer)=> {
        return feature;
    });
    if (feature) {
        // 自定义全屏按钮   会改变原有覆盖物的   事件对象的evt.pixel    导致feature/layer  获取失败
        // 所以需要保存这个evt.pixel;
        this.saveClickPixel = evt.pixel;    // 重点
        this.$parent.saveArticleId = feature.values_.articleId;
        this.$parent.isShowFigureInfoDialog = true;
    } else {
        var layer = this.map.forEachFeatureAtPixel(this.saveClickPixel,(feature, layer)=> {
            return layer;
        });
        if (layer) {
            this.$parent.saveArticleId = layer.values_.articleId;
            this.$parent.isShowFigureInfoDialog = true;
        }
    }
});