多边形
用法
let data = {
"type": "FeatureCollection",
"features": [
{
"id": "1",
"type": "Feature",
"properties": {
"name": "polygon1",
"color": "#00ffff"
},
"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": "polygon2",
"color": "#ff00ff"
},
"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 polygon = new vjmap.Polygon({
data: map.toLngLat(data), // CAD几何坐标转渲染经纬度
fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']],
fillOpacity: 0.8,
fillOutlineColor: "#f00",
isHoverPointer: true,
isHoverFeatureState: true
});
polygon.addTo(map);
polygon.clickLayer(e => map.logInfo(`您点击了第 ${e.features[0].id} 个，名称为 ${e.features[0].properties.name}，颜色为 ${e.features[0].properties.color} `))
polygon.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,
renderWorldCopies: false // 不显示多屏地图
});
// 关联服务对象和投影对象
map.attach(svc, prj);
await map.onLoad();
let data = {
"type": "FeatureCollection",
"features": [
{
"id": "1",
"type": "Feature",
"properties": {
"name": "polygon1",
"color": "#00ffff"
},
"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": "polygon2",
"color": "#ff00ff"
},
"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 polygon = new vjmap.Polygon({
data: map.toLngLat(data), // CAD几何坐标转渲染经纬度
fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']],
fillOpacity: 0.8,
fillOutlineColor: "#f00",
isHoverPointer: true,
isHoverFeatureState: true
});
polygon.addTo(map);
// 点击事件
polygon.clickLayer(e => map.logInfo(`您点击了第 ${e.features[0].id} 个，名称为 ${e.features[0].properties.name}，颜色为 ${e.features[0].properties.color} `))
// hover事件
polygon.hoverPopup(f => `<h3>ID: ${f.properties.name}</h3>Color: ${f.properties.color}`, { anchor: 'bottom' });也可以用先单独创建数据源，再创建填充图层的写法，如
map.addSource("fillSources", {
type: "geojson",
data: data
});
map.addLayer({
id: 'fillLayers',
source: 'fillSources',
type: 'fill',
"layout": {},
"paint": {
"fill-color": ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']], //颜色
'fill-opacity': 0.8,
'fill-outline-color': "#f00"
}
})
或 属性用驼峰式大小写，不用区分layout还是paint属性
map.addGeoJSONSource("fillSources", data);
map.addFillLayer("fillLayers", "fillSources", {
fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']], //颜色
fillOpacity: 0.8,
fillOutlineColor: "#f00"
})
这种通过创建数据源和图层的写法，响应事件时，需要监听地图的图层事件进行处理
map.on("click", layerId, e => {})
常用方法
修改数据用 setData
polygon.setData(newDataJson);
获取图层ID、数据源ID
// 获取图层ID
polygon.getLayerId()
// 获取数据源ID
polygon.getSourceId()
显示或隐藏
// 显示
polygon.show()
// 隐藏
polygon.hide()
删除
// 删除
polygon.remove()
相关示例
类型定义
/**
* 创建多边形.
*
**/
export class Polygon extends OverlayLayerBase {
options: PolygonOptions;
constructor(options: PolygonOptions);
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;
/** 为一层或多层设置`fill-sort-key`布局属性。 */
setFillSortKey(value: DataDrivenPropertyValueSpecification<number>): this;
/** 为一个或多个图层设置`fill-antialias` 绘制属性。 */
setFillAntialias(value: PropertyValueSpecificationEx<boolean>): this;
/** 为一个或多个图层设置`fill-opacity` 绘画属性。 */
setFillOpacity(value: DataDrivenPropertyValueSpecification<number>): this;
/** 为一个或多个图层设置`fill-color` 绘画属性。 */
setFillColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
/** 为一个或多个图层设置`fill-outline-color` 绘画属性。*/
setFillOutlineColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
/** 为一个或多个图层设置`fill-translate` 绘制属性。 */
setFillTranslate(value: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>): this;
/** 为一个或多个图层设置`fill-translate-anchor` 绘制属性。 */
setFillTranslateAnchor(value: PropertyValueSpecificationEx<"map" | "viewport">): this;
/** 为一个或多个图层设置`fill-pattern` 绘制属性。 */
setFillPattern(value: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>): this;
/** 获取图层的`fill-sort-key` 布局属性. */
getFillSortKey(): DataDrivenPropertyValueSpecification<number>;
/** 获取图层的“填充抗锯齿”绘制属性。 */
getFillAntialias(): PropertyValueSpecificationEx<boolean>;
/** 获取图层的 `fill-opacity` 绘制属性。 */
getFillOpacity(): DataDrivenPropertyValueSpecification<number>;
/** 获取图层的 `fill-color` 绘制属性。 */
getFillColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
/** 获取图层的 `fill-outline-color` 绘制属性。 */
getFillOutlineColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
/** 获取图层的 `fill-translate` 绘制属性。 */
getFillTranslate(): PropertyValueSpecificationEx<[number, number]>;
/** 获取图层的 `fill-translate-anchor` 绘制属性。 */
getFillTranslateAnchor(): PropertyValueSpecificationEx<"map" | "viewport">;
/** 获取图层的`fill-pattern` 绘制属性。 */
getFillPattern(): DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
}
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 FillLayerSpecification = {
id: string;
type: "fill";
metadata?: unknown;
source: string;
"source-layer"?: string;
minzoom?: number;
maxzoom?: number;
filter?: FilterSpecification;
layout?: {
"fill-sort-key"?: DataDrivenPropertyValueSpecification<number>;
visibility?: "visible" | "none";
};
paint?: {
"fill-antialias"?: PropertyValueSpecificationEx<boolean>;
"fill-opacity"?: DataDrivenPropertyValueSpecification<number>;
"fill-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
"fill-outline-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
"fill-translate"?: PropertyValueSpecificationEx<[number, number]>;
"fill-translate-anchor"?: PropertyValueSpecificationEx<"map" | "viewport">;
"fill-pattern"?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
};
};
export type FillLayerStyleProp = {
metadata?: unknown;
source?: string;
sourceLayer?: string;
minzoom?: number;
maxzoom?: number;
filter?: FilterSpecification;
visibility?: "visible" | "none";
fillSortKey?: DataDrivenPropertyValueSpecification<number>;
fillAntialias?: PropertyValueSpecificationEx<boolean>;
fillOpacity?: DataDrivenPropertyValueSpecification<number>;
fillColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
fillOutlineColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
fillTranslate?: PropertyValueSpecificationEx<[number, number]>;
fillTranslateAnchor?: PropertyValueSpecificationEx<"map" | "viewport">;
fillPattern?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
};
export type FilterSpecification = ["has", string] | ["!has", string] | ["==", string, string | number | boolean] | ["!=", string, string | number | boolean] | [">", string, string | number | boolean] | [">=", string, string | number | boolean] | ["<", string, string | number | boolean] | ["<=", string, string | number | boolean] | Array<string | FilterSpecification>;
这篇文档有帮助吗？感谢反馈！