拉伸
用法
let data = {
"type": "FeatureCollection",
"features": [
{
"id": "1",
"type": "Feature",
"properties": {
"name": "fillExtrusion1",
"color": "#00ffff",
baseHeight: 0,
height: vjmap.randInt(1000000, 2000000)
},
"geometry": {
"coordinates": [
[
[
3006.0952985307595,
15198.972934052355
],
[
12606.64046359223,
9285.59366571666
],
[
4745.324495099878,
3720.060236694666
],
[
3006.0952985307595,
15198.972934052355
]
]
],
"type": "Polygon"
}
},
{
"id": "2",
"type": "Feature",
"properties": {
"name": "fillExtrusion2",
"color": "#ff00ff",
baseHeight: 0,
height: vjmap.randInt(1000000, 2000000)
},
"geometry": {
"coordinates": [
[
[
19841.833921319492,
13807.589576796912
],
[
19841.833921319492,
4207.0444117340885
],
[
26172.62819683108,
4207.0444117340885
],
[
26172.62819683108,
13807.589576796912
],
[
19841.833921319492,
13807.589576796912
]
]
],
"type": "Polygon"
}
}
]
}
let fillExtrusion = new vjmap.FillExtrusion({
data: map.toLngLat(data), // CAD几何坐标转渲染经纬度
// 如果是hover状态时，用红色，非hover状态时，取属性中的'color'做为颜色值
fillExtrusionColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']],
fillExtrusionOpacity: 1,
fillExtrusionHeight: ['get', 'height'],
fillExtrusionBase: ['get', 'baseHeight'],
isHoverPointer: true,
isHoverFeatureState: true
});
fillExtrusion.addTo(map);
fillExtrusion.clickLayer(e => map.logInfo(`您点击了第 ${e.features[0].id} 个，名称为 ${e.features[0].properties.name}，颜色为 ${e.features[0].properties.color} `))
fillExtrusion.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: 45,
antialias: true,
renderWorldCopies: false // 不显示多屏地图
});
// 关联服务对象和投影对象
map.attach(svc, prj);
await map.onLoad();
let data = {
"type": "FeatureCollection",
"features": [
{
"id": "1",
"type": "Feature",
"properties": {
"name": "fillExtrusion1",
"color": "#00ffff",
baseHeight: 0,
height: vjmap.randInt(1000000, 2000000)
},
"geometry": {
"coordinates": [
[
[
3006.0952985307595,
15198.972934052355
],
[
12606.64046359223,
9285.59366571666
],
[
4745.324495099878,
3720.060236694666
],
[
3006.0952985307595,
15198.972934052355
]
]
],
"type": "Polygon"
}
},
{
"id": "2",
"type": "Feature",
"properties": {
"name": "fillExtrusion2",
"color": "#ff00ff",
baseHeight: 0,
height: vjmap.randInt(1000000, 2000000)
},
"geometry": {
"coordinates": [
[
[
19841.833921319492,
13807.589576796912
],
[
19841.833921319492,
4207.0444117340885
],
[
26172.62819683108,
4207.0444117340885
],
[
26172.62819683108,
13807.589576796912
],
[
19841.833921319492,
13807.589576796912
]
]
],
"type": "Polygon"
}
}
]
}
let fillExtrusion = new vjmap.FillExtrusion({
data: map.toLngLat(data), // CAD几何坐标转渲染经纬度
// 如果是hover状态时，用红色，非hover状态时，取属性中的'color'做为颜色值
fillExtrusionColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']],
fillExtrusionOpacity: 1,
fillExtrusionHeight: ['get', 'height'],
fillExtrusionBase: ['get', 'baseHeight'],
isHoverPointer: true,
isHoverFeatureState: true
});
fillExtrusion.addTo(map);
// 点击事件
fillExtrusion.clickLayer(e => map.logInfo(`您点击了第 ${e.features[0].id} 个，名称为 ${e.features[0].properties.name}，颜色为 ${e.features[0].properties.color} `))
// hover事件
fillExtrusion.hoverPopup(f => `<h3>ID: ${f.properties.name}</h3>Color: ${f.properties.color}`, { anchor: 'bottom' });也可以用先单独创建数据源，再创建拉伸图层的写法，如
map.addSource("fillExtrusionSources", {
type: "geojson",
data: data
});
map.addLayer({
id: 'fillExtrusionLayer',
source: 'fillExtrusionSources',
type: 'fill-extrusion',
"layout": {},
"paint": {
"fill-extrusion-opacity": 1.0,
"fill-extrusion-color": ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']], //颜色
"fill-extrusion-height": ['get', 'height'],
"fill-extrusion-base": ['get', 'baseHeight']
}
})
或 属性用驼峰式大小写，不用区分layout还是paint属性
map.addGeoJSONSource("fillExtrusionSources", data);
map.addFillExtrusionLayer("fillExtrusionLayer", "fillExtrusionSources", {
fillExtrusionColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']],
fillExtrusionOpacity: 1,
fillExtrusionHeight: ['get', 'height'],
fillExtrusionBase: ['get', 'baseHeight']
})
这种通过创建数据源和图层的写法，响应事件时，需要监听地图的图层事件进行处理
map.on("click", layerId, e => {})
常用方法
修改数据用 setData
fillExtrusion.setData(newDataJson);
获取图层ID、数据源ID
// 获取图层ID
fillExtrusion.getLayerId()
// 获取数据源ID
fillExtrusion.getSourceId()
显示或隐藏
// 显示
fillExtrusion.show()
// 隐藏
fillExtrusion.hide()
删除
// 删除
fillExtrusion.remove()
相关示例
类型定义
/**
* 创建拉伸的多边形.
*
**/
export class FillExtrusion extends OverlayLayerBase {
options: FillExtrusionOptions;
constructor(options: FillExtrusionOptions);
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;
setFillExtrusionOpacity(value: PropertyValueSpecificationEx<number>): this;
getFillExtrusionOpacity(): PropertyValueSpecificationEx<number>;
setFillExtrusionColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
getFillExtrusionColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
setFillExtrusionTranslate(value: PropertyValueSpecificationEx<[number, number]>): this;
getFillExtrusionTranslate(): PropertyValueSpecificationEx<[number, number]>;
setFillExtrusionTranslateAnchor(value: PropertyValueSpecificationEx<"map" | "viewport">): this;
getFillExtrusionTranslateAnchor(): PropertyValueSpecificationEx<"map" | "viewport">;
setFillExtrusionPattern(value: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>): this;
getFillExtrusionPattern(): DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
setFillExtrusionHeight(value: DataDrivenPropertyValueSpecification<number>): this;
getFillExtrusionHeight(): DataDrivenPropertyValueSpecification<number>;
setFillExtrusionBase(value: DataDrivenPropertyValueSpecification<number>): this;
getFillExtrusionBase(): DataDrivenPropertyValueSpecification<number>;
setFillExtrusionVerticalGradient(value: PropertyValueSpecificationEx<boolean>): this;
getFillExtrusionVerticalGradient(): PropertyValueSpecificationEx<boolean>;
}
export type FillExtrusionLayerSpecification = {
id: string;
type: "fill-extrusion";
metadata?: unknown;
source: string;
"source-layer"?: string;
minzoom?: number;
maxzoom?: number;
filter?: FilterSpecification;
layout?: {
visibility?: "visible" | "none";
};
paint?: {
"fill-extrusion-opacity"?: PropertyValueSpecificationEx<number>;
"fill-extrusion-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
"fill-extrusion-translate"?: PropertyValueSpecificationEx<[number, number]>;
"fill-extrusion-translate-anchor"?: PropertyValueSpecificationEx<"map" | "viewport">;
"fill-extrusion-pattern"?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
"fill-extrusion-height"?: DataDrivenPropertyValueSpecification<number>;
"fill-extrusion-base"?: DataDrivenPropertyValueSpecification<number>;
"fill-extrusion-vertical-gradient"?: PropertyValueSpecificationEx<boolean>;
};
};
export type FillExtrusionLayerStyleProp = {
metadata?: unknown;
source?: string;
sourceLayer?: string;
minzoom?: number;
maxzoom?: number;
filter?: FilterSpecification;
visibility?: "visible" | "none";
fillExtrusionOpacity?: PropertyValueSpecificationEx<number>;
fillExtrusionColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
fillExtrusionTranslate?: PropertyValueSpecificationEx<[number, number]>;
fillExtrusionTranslateAnchor?: PropertyValueSpecificationEx<"map" | "viewport">;
fillExtrusionPattern?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
fillExtrusionHeight?: DataDrivenPropertyValueSpecification<number>;
fillExtrusionBase?: DataDrivenPropertyValueSpecification<number>;
fillExtrusionVerticalGradient?: PropertyValueSpecificationEx<boolean>;
};
export interface FillExtrusionOptions extends OverlayLayerBaseOptions {
data: PointGeoJsonInput | PointGeoJsonInput[] | GeoJsonGeomertry | GeoPointLike | any;
fillExtrusionOpacity?: PropertyValueSpecificationEx<number>;
fillExtrusionColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
fillExtrusionTranslate?: PropertyValueSpecificationEx<[number, number]>;
fillExtrusionTranslateAnchor?: PropertyValueSpecificationEx<"map" | "viewport">;
fillExtrusionPattern?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
fillExtrusionHeight?: DataDrivenPropertyValueSpecification<number>;
fillExtrusionBase?: DataDrivenPropertyValueSpecification<number>;
fillExtrusionVerticalGradient?: PropertyValueSpecificationEx<boolean>;
}
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;
}
这篇文档有帮助吗？感谢反馈！