react使用OpenLayers实现类似船某网在地图放大时展示具体船舶符号缩小时显示聚合小点效果

一、效果

如图所示,地图缩小(即比例尺放大)时,显示聚合小绿点;

地图放大(比例尺缩小)时,展示具体船舶符号:

二、思路

1)设置2个图层,一个展示聚合小绿点;一个展示具体船舶符号。

2)它们通过设置minZoom和maxZoom属性来控制图层的显隐。缩小时,聚合小绿点图层显示,具体船舶符号图层隐藏;放大时,相反。

三、实现

1、上代码

javascript 复制代码
import React, { useEffect, useRef } from 'react';
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { fromLonLat } from 'ol/proj';
import WebGLPointsLayer from 'ol/layer/WebGLPoints';
import { Vector as VectorSource } from 'ol/source';
import { Feature } from 'ol';
import { Point } from 'ol/geom';
import Cluster from 'ol/source/Cluster';

const MapComponent = () => {
  const mapRef = useRef();

  useEffect(() => {
    const map = new Map({
      target: mapRef.current,
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: fromLonLat([0, 0]),
        zoom: 2
      })
    });

    const vectorSource = new VectorSource();
    const clusterSource = new Cluster({
      distance: 3,
      source: vectorSource
    });

    const shipLayer = new WebGLPointsLayer({
      source: vectorSource,
      style: {
        symbol: {
          symbolType: 'image',
          src: 'path/to/ship-icon.png',
          size: 20,
          rotateWithView: false,
          displacement: [0, 0]
        }
      },
      minZoom: 10, // 显示船舶符号的最小缩放级别
      maxZoom: Infinity // 无限大,表示不会因为缩放级别过大而隐藏
    });

    const clusterLayer = new WebGLPointsLayer({
      source: clusterSource,
      style: {
        symbol: {
          symbolType: 'square', // 使用方块
          size: 8,
          color: 'rgba(0, 230, 0, 1)',
          rotateWithView: false,
          displacement: [0, 0],
          opacity: 1,
          stroke: {
            color: 'rgba(0, 230, 0, 1)',
            width: 1
          }
        }
      },
      minZoom: 0, // 显示聚合点的最小缩放级别
      maxZoom: 10 // 显示聚合点的最大缩放级别
    });

    map.addLayer(shipLayer);
    map.addLayer(clusterLayer);

  	return <div ref={mapRef} style={{ width: '100%', height: '400px' }}></div>;
}));

export default MapComponent;

2、代码解释

openlayers中,图层(layer)会有一个数据来源(source)。其中,简单小点图层的数据来源,又来源于具体船舶图层的数据来源。

1)数据来源:

javascript 复制代码
const vectorSource = new VectorSource();
const clusterSource = new Cluster({
  distance: 3,
  source: vectorSource
});

2)图层:

javascript 复制代码
const shipLayer = new WebGLPointsLayer({
  source: vectorSource,
  。。。
});

const clusterLayer = new WebGLPointsLayer({
  source: clusterSource,
  。。。
});

3)图层设置缩放属性,控制显隐:

javascript 复制代码
const shipLayer = new WebGLPointsLayer({
	。。。
  minZoom: 10, // 显示船舶符号的最小缩放级别
  maxZoom: Infinity // 无限大,表示不会因为缩放级别过大而隐藏。其实不设置也可以
});

const clusterLayer = new WebGLPointsLayer({
	。。。
  minZoom: 0, // 显示聚合点的最小缩放级别
  maxZoom: 9 // 显示聚合点的最大缩放级别
});

四、题外话

openlayers中,控制图层中的对象变化特别简单,只需操作source里面的feature就可以了。

相关推荐
ReBeX2 天前
【GeoJSON在线编辑平台】(1)创建地图+要素绘制+折点编辑+拖拽移动
前端·javascript·gis·openlayers·webgis
GoppViper1 个月前
uniapp中<map>地图怎么实现点位聚合?
前端·前端框架·uni-app·uniapp·地图·聚合
zj靖3 个月前
Openlayers6之地图覆盖物Overlay详解及使用,地图标注及弹窗查看详情(结合React)
前端·react.js·openlayers
zj靖3 个月前
Openlayers6 图形绘制和修改功能(结合React)
前端·react.js·openlayers
zj靖3 个月前
three.js 模型高亮效果实现说明(结合react)
react.js·openlayers
瑕、疵4 个月前
openlayers 3d 地图 非三维 立体地图 行政区划裁剪 地图背景
前端·vue.js·3d·reactjs·openlayers
张飞的猪大数据5 个月前
Elasticsearch如何聚合查询多个统计值,如何嵌套聚合?并相互引用,统计索引中某一个字段的空值率?语法是怎么样的
elasticsearch·聚合查询·聚合·控值率
卷新心菜5 个月前
三十三、openlayers官网示例Drawing Features Style——在地图上绘制图形,并修改绘制过程中的颜色
前端·gis·openlayers·openlayers官网示例
在星空下5 个月前
【openlayers系统学习】1.1渲染GeoJSON,添加link交互
学习·openlayers·webgis