Class: Graphic

Graphic

高效率点图层源。能够支持前端百万点数据的渲染，并支持 GeoJSON、TopoJSON、二维表等多种数据格式，支持修改样式， 支持属性筛选、鼠标事件等交互操作。

new Graphic(options)

Usage
// 浏览器
<script type="text/javascript" src="https://iclient.supermap.io/dist/openlayers/iclient-ol.js"></script>
<script>
  new ol.source.Graphic(options);
  
</script>

// ES6 Import
import { Graphic } from '@supermapgis/iclient-ol';

new Graphic(options);
openlayers/overlay/Graphic.js, line 34
Name Type Description
options Object

参数。

Name Type Default Description
map ol.Map

OpenLayers 地图对象。
graphics OverlayGraphic

高效率点图层点要素。
render string 'canvas' 可选

指定使用的渲染器。可选值："webgl"，"canvas"（webgl 渲染目前只支持散点）。
isHighLight boolean true 可选

事件响应是否支持要素高亮。
highLightStyle ol.style.Style defaultHighLightStyle 可选

高亮风格。
color Array.<number> [0, 0, 0, 255] 可选

要素颜色。当 OverlayGraphic 的 style 参数传入设置了 fill 的 HitCloverShape 或 CloverShape，此参数无效。
highlightColor Array.<number> 可选

webgl 渲染时要素高亮颜色。
opacity number 0.8 可选

要素不透明度。当 OverlayGraphic 的 style 参数传入设置了 fillOpacity 或 strokeOpacity 的 HitCloverShape 或 CloverShape，此参数无效。
radius number 10 可选

要素半径，单位为像素。当 OverlayGraphic 的 style 参数传入设置了 radius 的 HitCloverShape 或 CloverShape，此参数无效。
radiusScale number 1 可选

webgl 渲染时的要素放大倍数。
radiusMinPixels number 0 可选

webgl 渲染时的要素半径最小值，单位为像素。
radiusMaxPixels number Number.MAX_SAFE_INTEGER 可选

webgl 渲染时的要素半径最大值，单位为像素。
strokeWidth number 1 可选

边框大小。
outline boolean false 可选

是否显示边框。
onHover function 可选

图层鼠标悬停响应事件（只有 webgl 渲染时有用）。
onClick function 可选

图层鼠标点击响应事件（webgl、canvas 渲染时都有用）。

Extends

Methods

addGraphics(graphics)

openlayers/overlay/Graphic.js, line 280

追加点要素，不会覆盖之前的要素。

Name Type Description
graphics Array.<OverlayGraphic>

点要素对象数组。

clear()

openlayers/overlay/Graphic.js, line 375

释放图层资源。

getGraphicBy(property, value){OverlayGraphic}

openlayers/overlay/Graphic.js, line 292

在 Vector 的要素数组 graphics 里面遍历每一个 graphic，当 graphic[property]===value 时，返回此 graphic（并且只返回第一个）。

Name Type Description
property string

graphic 的属性名称。
value string

property 所对应的值。
Returns:
Type Description
OverlayGraphic 一个匹配的 graphic。

getGraphicById(graphicId){OverlayGraphic}

openlayers/overlay/Graphic.js, line 310

通过给定一个 ID，返回对应的矢量要素。

Name Type Description
graphicId string

矢量要素的属性 ID。
Returns:
Type Description
OverlayGraphic 一个匹配的 graphic。

getGraphicsByAttribute(attrName, attrValue){Array.<OverlayGraphic>}

openlayers/overlay/Graphic.js, line 320

通过给定一个属性的 key 值和 value 值，返回所有匹配的要素数组。

Name Type Description
attrName string

属性的 key 值。
attrValue string

属性的 value 值。
Returns:
Type Description
Array.<OverlayGraphic> 一个匹配的 graphic 数组。

getGraphicsInExtent(extent)

openlayers/overlay/Graphic.js, line 568

在指定范围中获取几何要素面积。

Name Type Description
extent Object

长度范围。

getLayerState(){Object}

openlayers/overlay/Graphic.js, line 446

获取当前地图及图层状态。

Returns:
Type Description
Object 地图及图层状态，包含地图状态信息和本图层相关状态信息。

removeGraphics(graphics)

openlayers/overlay/Graphic.js, line 341

删除要素数组，默认将删除所有要素。

Name Type Description
graphics Array.<OverlayGraphic> 可选

删除的 graphics 数组。

setGraphics(graphics)

openlayers/overlay/Graphic.js, line 267

设置绘制的点要素，会覆盖之前的所有要素。

Name Type Description
graphics Array.<OverlayGraphic>

点要素对象数组。

setStyle(styleOptions)

openlayers/overlay/Graphic.js, line 414

设置图层要素整体样式（接口仅在 webgl 渲染时有用）。

Name Type Description
styleOptions Object

样式对象。

Name Type Default Description
color Array.<number> [0, 0, 0, 255] 可选

点颜色。
radius number 10 可选

点半径，单位为像素。
opacity number 0.8 可选

不透明度。
highlightColor Array 可选

高亮颜色，目前只支持 rgba 数组。
radiusScale number 1 可选

点放大倍数。
radiusMinPixels number 0 可选

半径最小值，单位为像素。
radiusMaxPixels number Number.MAX_SAFE_INTEGER 可选

半径最大值，单位为像素。
strokeWidth number 1 可选

边框大小。
outline boolean false 可选

是否显示边框。

update()

openlayers/overlay/Graphic.js, line 383

更新图层。