openlayers5学习笔记-001

tmp.initPoint = function (items) {
                //初始化所有农户点坐标，聚合
                var count = items.length;
                var features = new Array(count);

                for (var i = 0; i < items.length; i++) {
                    var item = items[i];
                    var feature = new Feature({
                        geometry: new Point([item.x, item.y])
                    });

                    features[i] = feature;
                }

                var source = new VectorSource({
                    features: features
                });

                var clusterSource = new Cluster({
                    distance: 200,
                    source: source,
                    geometryFunction: function (evt) {
                        return evt.getGeometry();
                    }
                });

                var styleCache = {};
                var clusters = new VectorLayer({
                    source: clusterSource,
                    style: function (feature) {
                        var size = feature.get('features').length;
                        var style = styleCache[size];
                        if (!style) {
                            style = new Style({
                                image: new CircleStyle({
                                    radius: 15,
                                    stroke: new Stroke({
                                        color: '#fff'
                                    }),
                                    fill: new Fill({
                                        color: '#ff0000'
                                    })
                                }),
                                text: new Text({
                                    text: size.toString(),
                                    fill: new Fill({
                                        color: '#fff'
                                    })
                                })
                            });
                            styleCache[size] = style;
                        }
                        return style;
                    }
                });

                return clusters;
            }

 

//初始化地图

tmp.initMap = function (items) {
                //自定义瓦片地图
                var baseMapLayer = new TileLayer({
                    source: new ol.source.XYZ({
                        url: '/maps/{z}/{x}/{y}.png',
                        attributions: "XX公司"
                    })
                });

                //高德地图
                var gaodeMapLayer = new TileLayer({
                    source: new ol.source.XYZ({
                        url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
                    })
                });

var vectorArea = new VectorLayer({
                    source: new VectorSource({
                        url: '/data/kml/ChinaArea.kml',
                        format: new KML()
                    })
                });

                var clusters = tmp.initPoint(items);

                tmp.map = new Map({
                    layers: [gaodeMapLayer, clusters, vectorArea],
                    target: 'map',
                    controls: ol.control.defaults().extend([
                        new ol.control.FullScreen(),
                        new ol.control.MousePosition(),
                        new ol.control.ScaleLine(),
                        new ol.control.ZoomSlider(),
                        new ol.control.Attribution(),
                        new ol.control.Rotate()

                    ]),
                    view: new View({
                        projection: 'EPSG:4326',
                        zoom: 10,
                        maxZoom: mapMaxZoom,
                        minZoom: mapMinZoom,
                        center: tmp.CenterPoint
                    })
                });

                //事件：抓
                tmp.map.on('pointerdrag', function (evt) {
                    var t = tmp.map.getView();
                });

                //事件：地图移动结束
                tmp.map.on('moveend', function (evt) {
                    //console.log(evt.frameState.extent);

                });
            };