圆符号
用法
let data = {
"type": "FeatureCollection",
"features": [
{
"id": "1",
"type": "Feature",
"properties": {
"name": "circle1",
"color": "#00ffff"
},
"geometry": {
"coordinates": [
6971.5378667085715,
14385.014943907285
],
"type": "Point"
}
},
{
"id": "2",
"type": "Feature",
"properties": {
"name": "circle2",
"color": "#ff00ff"
},
"geometry": {
"coordinates": [
21789.770621477073,
14037.169104593304
],
"type": "Point"
}
}
]
}
let circle = new vjmap.Circle({
data: map.toLngLat(data), // CAD几何坐标转渲染经纬度
// 图标名来源于geojson属性中的icon字段
circleColor: ['case', ["boolean", ["feature-state", "hover"], false], '#ff0000', ['get', 'color']],
circleRadius: 5,
isHoverPointer: true,
isHoverFeatureState: true
});
circle.addTo(map);
circle.clickLayer(e => map.logInfo(`您点击了第 ${e.features[0].id} 个，名称为 ${e.features[0].properties.name}，颜色为 ${e.features[0].properties.color} `))
circle.hoverPopup(f => `<h3>ID: ${f.properties.name}</h3>Color: ${f.properties.color}`, { anchor: 'bottom' });
在沙箱中运行，调用唯杰地图公共演示服务
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打开地图
let res = await svc.openMap({
mapid: "sys_hello", // 地图ID
mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
style: vjmap.openMapLightStyle() // div为深色背景颜色时，这里也传深色背景样式
})
if (res.error) {
// 如果打开出错
showError(res.error)
return;
}
// 获取地图范围
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
// 根据地图范围建立几何投影坐标系
let prj = new vjmap.GeoProjection(mapBounds);
//
// 地图对象
let map = new vjmap.Map({
container: 'map', // DIV容器ID
style: svc.rasterStyle(), // 样式，这里是栅格样式
center: prj.toLngLat(mapBounds.center()), // 设置地图中心点
zoom: 1, // 设置地图缩放级别
pitch: 0,
antialias: true,
renderWorldCopies: false // 不显示多屏地图
});
// 关联服务对象和投影对象
map.attach(svc, prj);
await map.onLoad();
let data = {
"type": "FeatureCollection",
"features": [
{
"id": "1",
"type": "Feature",
"properties": {
"name": "circle1",
"color": "#00ffff"
},
"geometry": {
"coordinates": [
6971.5378667085715,
14385.014943907285
],
"type": "Point"
}
},
{
"id": "2",
"type": "Feature",
"properties": {
"name": "circle2",
"color": "#ff00ff"
},
"geometry": {
"coordinates": [
21789.770621477073,
14037.169104593304
],
"type": "Point"
}
}
]
}
let circle = new vjmap.Circle({
data: map.toLngLat(data), // CAD几何坐标转渲染经纬度
// 图标名来源于geojson属性中的icon字段
circleColor: ['case', ["boolean", ["feature-state", "hover"], false], '#ff0000', ['get', 'color']],
circleRadius: 10,
isHoverPointer: true,
isHoverFeatureState: true
});
circle.addTo(map);
// 点击事件
circle.clickLayer(e => map.logInfo(`您点击了第 ${e.features[0].id} 个，名称为 ${e.features[0].properties.name}，颜色为 ${e.features[0].properties.color} `))
// hover事件
circle.hoverPopup(f => `<h3>ID: ${f.properties.name}</h3>Color: ${f.properties.color}`, { anchor: 'bottom' });也可以用先单独创建数据源，再创建圆图层的写法，如
map.addSource("circleSources", {
type: "geojson",
data: data
});
map.addLayer({
id: 'circleLayer',
source: 'circleSources',
type: 'symbol',
"layout": {},
"paint": {
'circle-color': ['case', ["boolean", ["feature-state", "hover"], false], '#ff0000', ['get', 'color']],
'circle-radius': 10
}
})
或 属性用驼峰式大小写，不用区分layout还是paint属性
map.addGeoJSONSource("circleSources", data);
map.addCircleLayer("circleLayer", "circleSources", {
circleColor: ['case', ["boolean", ["feature-state", "hover"], false], '#ff0000', ['get', 'color']],
circleRadius: 10
})
这种通过创建数据源和图层的写法，响应事件时，需要监听地图的图层事件进行处理
map.on("click", layerId, e => {})
常用方法
修改数据用 setData
circle.setData(newDataJson);
获取图层ID、数据源ID
// 获取图层ID
circle.getLayerId()
// 获取数据源ID
circle.getSourceId()
显示或隐藏
// 显示
circle.show()
// 隐藏
circle.hide()
删除
// 删除
circle.remove()
类型定义
/**
* 创建圆符号图层.
*
**/
export class Circle extends OverlayLayerBase {
options: CircleOptions;
constructor(options: CircleOptions);
addTo(map: Map, beforeId?: string): void;
/** 替换 GeoJSON 图层的当前数据。
@param {GeoJSON} [data] GeoJSON object to set. If not provided, defaults to an empty FeatureCollection.
*/
setData(data: PointGeoJsonInput | PointGeoJsonInput[] | GeoJsonGeomertry | GeoPointLike | any): void;
setCircleSortKey(value: DataDrivenPropertyValueSpecification<number>): this;
getCircleSortKey(): DataDrivenPropertyValueSpecification<number>;
setVisibility(value: "visible" | "none"): this;
getVisibility(): "visible" | "none";
setCircleRadius(value: DataDrivenPropertyValueSpecification<number>): this;
getCircleRadius(): DataDrivenPropertyValueSpecification<number>;
setCircleColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
getCircleColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
setCircleBlur(value: DataDrivenPropertyValueSpecification<number>): this;
getCircleBlur(): DataDrivenPropertyValueSpecification<number>;
setCircleOpacity(value: DataDrivenPropertyValueSpecification<number>): this;
getCircleOpacity(): DataDrivenPropertyValueSpecification<number>;
setCircleTranslate(value: PropertyValueSpecificationEx<[number, number]>): this;
getCircleTranslate(): PropertyValueSpecificationEx<[number, number]>;
setCircleTranslateAnchor(value: PropertyValueSpecificationEx<"map" | "viewport">): this;
getCircleTranslateAnchor(): PropertyValueSpecificationEx<"map" | "viewport">;
setCirclePitchScale(value: PropertyValueSpecificationEx<"map" | "viewport">): this;
getCirclePitchScale(): PropertyValueSpecificationEx<"map" | "viewport">;
setCirclePitchAlignment(value: PropertyValueSpecificationEx<"map" | "viewport">): this;
getCirclePitchAlignment(): PropertyValueSpecificationEx<"map" | "viewport">;
setCircleStrokeWidth(value: DataDrivenPropertyValueSpecification<number>): this;
getCircleStrokeWidth(): DataDrivenPropertyValueSpecification<number>;
setCircleStrokeColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
getCircleStrokeColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
setCircleStrokeOpacity(value: DataDrivenPropertyValueSpecification<number>): this;
getCircleStrokeOpacity(): DataDrivenPropertyValueSpecification<number>;
}
export class OverlayLayerBase {
sourceId?: string;
layerId?: string;
_map?: Map;
constructor();
addTo(map: Map, beforeId?: string): void;
/**
* 获取数据源ID
* @return {string | undefined}
*/
getSourceId(): string | undefined;
/**
* 获取图层ID
* @return {string | undefined}
*/
getLayerId(): string | undefined;
/**
* 获取数据源的数据
* @return {GeoJsonGeomertry | undefined}
*/
getData(): GeoJsonGeomertry | undefined;
remove(): void;
/** 每当鼠标悬停在这些图层上时，将地图的光标设置为“指针”。
@returns A function to remove the handler.
* @param layerOrLayers
*/
hoverPointer(): void;
/**
每当将鼠标悬停在这些图层中的某个特征上时，更新连接源 [s] 中特征的特征状态。
* @param enterCb
* @param leaveCb
*/
hoverFeatureState(enterCb?: (arg0: {}) => void, leaveCb?: (arg0: {}) => void): void;
/** 将鼠标悬停在这些图层中的某个要素上时，会显示一个弹出窗口。
@param htmlFunc Function that receives feature and popup, returns HTML.
@param {Object<PopupOptions>} popupOptions Options passed to `Popup()` to customise popup.
@example hoverPopup(f => `<h3>${f.properties.Name}</h3> ${f.properties.Description}`, { anchor: 'left' });
*/
hoverPopup(htmlFunc: any, popupOptions?: PopupOptions): any;
/** 每当单击这些图层中的要素时都会显示一个弹出窗口。
@param htmlFunc Function that receives feature and popup, returns HTML.
@param {Object<PopupOptions>} popupOptions Options passed to `Popup()` to customise popup.
@returns A function that removes the handler.
@example clickPopup(f => `<h3>${f.properties.Name}</h3> ${f.properties.Description}`, { maxWidth: 500 });
*/
clickPopup(htmlFunc: (arg0: {}) => void, popupOptions?: PopupOptions): any;
/** 每当单击这些图层中的要素时都会触发回调。
@param {function} cb Callback that receives event with .features property
@returns A function that removes the handler.
*/
clickLayer(cb: any): any;
/** 当鼠标悬停在这些图层中的要素上时触发回调。
@returns A function to remove the handler.
*/
hoverLayer(cb: any): any;
/**
* 使给定的图层可见。
* @param layer
*/
show(): void;
/**
* 使给定的图层不可见。
* @param layer
*/
hide(): void;
/** 根据参数使给定的图层隐藏或可见。
@param {boolean} state True for visible, false for hidden.
*/
toggle(state: boolean): boolean;
/** 在一个或多个图层上设置绘制或布局属性。
@example setProperty('fillOpacity', 0.5)
*/
setProperty(prop: string | object, value?: any): void;
/** 根据样式规范，获取给定图层 ID 的图层定义。
*/
getLayerStyle(): LayerSpecification;
/**
* 设置图层样式
* @param layer
* @param style
*/
setLayerStyle(style: any): void;
/** 替换一个图层的过滤器。
@param {Array} filter New filter to set.
@example setFilter(['==','level','0']]);
*/
setFilter(filter: FilterSpecification): void;
}
export interface OverlayLayerBaseOptions {
sourceId?: string;
sourceLayer?: string;
layerId?: string;
minzoom?: number;
maxzoom?: number;
filter?: any;
visibility?: "visible" | "none";
isHoverPointer?: boolean;
isHoverFeatureState?: boolean;
}
export type CircleLayerSpecification = {
id: string;
type: "circle";
metadata?: unknown;
source: string;
"source-layer"?: string;
minzoom?: number;
maxzoom?: number;
filter?: FilterSpecification;
layout?: {
"circle-sort-key"?: DataDrivenPropertyValueSpecification<number>;
visibility?: "visible" | "none";
};
paint?: {
"circle-radius"?: DataDrivenPropertyValueSpecification<number>;
"circle-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
"circle-blur"?: DataDrivenPropertyValueSpecification<number>;
"circle-opacity"?: DataDrivenPropertyValueSpecification<number>;
"circle-translate"?: PropertyValueSpecificationEx<[number, number]>;
"circle-translate-anchor"?: PropertyValueSpecificationEx<"map" | "viewport">;
"circle-pitch-scale"?: PropertyValueSpecificationEx<"map" | "viewport">;
"circle-pitch-alignment"?: PropertyValueSpecificationEx<"map" | "viewport">;
"circle-stroke-width"?: DataDrivenPropertyValueSpecification<number>;
"circle-stroke-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
"circle-stroke-opacity"?: DataDrivenPropertyValueSpecification<number>;
};
};
export type CircleLayerStyleProp = {
metadata?: unknown;
source?: string;
sourceLayer?: string;
minzoom?: number;
maxzoom?: number;
filter?: FilterSpecification;
circleSortKey?: DataDrivenPropertyValueSpecification<number>;
visibility?: "visible" | "none";
circleRadius?: DataDrivenPropertyValueSpecification<number>;
circleColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
circleBlur?: DataDrivenPropertyValueSpecification<number>;
circleOpacity?: DataDrivenPropertyValueSpecification<number>;
circleTranslate?: PropertyValueSpecificationEx<[number, number]>;
circleTranslateAnchor?: PropertyValueSpecificationEx<"map" | "viewport">;
circlePitchScale?: PropertyValueSpecificationEx<"map" | "viewport">;
circlePitchAlignment?: PropertyValueSpecificationEx<"map" | "viewport">;
circleStrokeWidth?: DataDrivenPropertyValueSpecification<number>;
circleStrokeColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
circleStrokeOpacity?: DataDrivenPropertyValueSpecification<number>;
};
export interface CircleOptions extends OverlayLayerBaseOptions {
data: PointGeoJsonInput | PointGeoJsonInput[] | GeoJsonGeomertry | GeoPointLike | any;
circleSortKey?: DataDrivenPropertyValueSpecification<number>;
circleRadius?: DataDrivenPropertyValueSpecification<number>;
circleColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
circleBlur?: DataDrivenPropertyValueSpecification<number>;
circleOpacity?: DataDrivenPropertyValueSpecification<number>;
circleTranslate?: PropertyValueSpecificationEx<[number, number]>;
circleTranslateAnchor?: PropertyValueSpecificationEx<"map" | "viewport">;
circlePitchScale?: PropertyValueSpecificationEx<"map" | "viewport">;
circlePitchAlignment?: PropertyValueSpecificationEx<"map" | "viewport">;
circleStrokeWidth?: DataDrivenPropertyValueSpecification<number>;
circleStrokeColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
circleStrokeOpacity?: DataDrivenPropertyValueSpecification<number>;
}
这篇文档有帮助吗？感谢反馈！