Vue-iClient-MapboxGL

# 组件基础类型

组件基础类型，你可以通过以下方式快速创建一个类型对象：

# LayerStyle

import VueiClient from '@supermapgis/vue-iclient-mapboxgl';

let layerStyle = {
  circle: new VueiClient.commontypes.CircleStyle(
    {
      'circle-radius': 6,
      'circle-color': '#3fb1e3',
      'circle-opacity': 1,
      'circle-blur': 0,
      'circle-translate': [0, 0],
      'circle-translate-anchor': 'map',
      'circle-pitch-scale': 'map',
      'circle-pitch-alignment': 'viewport',
      'circle-stroke-width': 0,
      'circle-stroke-color': '#000',
      'circle-stroke-opacity': 1
    },
    {
      visibility: 'visible'
    }
  ),
  line: new VueiClient.commontypes.LineStyle(
    {
      'line-opacity': 1,
      'line-color': '#3fb1e3',
      'line-width': 3,
      'line-blur': 1
    },
    {
      'line-cap': 'butt',
      'line-join': 'miter',
      visibility: 'visible'
    }
  ),
  fill: new VueiClient.commontypes.FillStyle(
    {
      'fill-opacity': 0.8,
      'fill-color': '#3fb1e3',
      'fill-translate': [0, 0],
      'fill-antialias': true,
      'fill-outline-color': '#3fb1e3',
      'fill-translate-anchor': 'map'
    },
    {
      visibility: 'visible'
    }
  ),
  strokeLine: new VueiClient.commontypes.LineStyle(
    {
      'line-opacity': 1,
      'line-color': '#3fb1e3',
      'fill-outline-color': '#3fb1e3'
    },
    {
      visibility: 'visible'
    }
  )
};

图层样式

参数 说明 类型 可选值 默认值
circle MapboxGL 点图层样式配置 CircleStyle - -
symbol MapboxGL symbol 图层样式配置 SymbolStyle - -
line MapboxGL 线图层样式配置 LineStyle - -
fill MapboxGL 面图层样式配置 FillStyle - -
strokeLine MapboxGL 面图层边框样式配置 LineStyle - -

# CircleStyle

import VueiClient from '@supermapgis/vue-iclient-mapboxgl';

let circleStyle = new VueiClient.commontypes.CircleStyle(
  {
    'circle-radius': 6,
    'circle-color': '#3fb1e3',
    'circle-opacity': 1,
    'circle-blur': 0,
    'circle-translate': [0, 0],
    'circle-translate-anchor': 'map',
    'circle-pitch-scale': 'map',
    'circle-pitch-alignment': 'viewport',
    'circle-stroke-width': 0,
    'circle-stroke-color': '#000',
    'circle-stroke-opacity': 1
  },
  {
    visibility: 'visible'
  }
);

点样式

参数 说明 类型 可选值 默认值
paint MapboxGL 点图层 Paint 配置 paint (opens new window) - -
layout MapboxGL 点图层 Layout 配置 layout (opens new window) - -

# LineStyle

import VueiClient from '@supermapgis/vue-iclient-mapboxgl';

let lineStyle = new VueiClient.commontypes.LineStyle(
  {
    'line-opacity': 1,
    'line-color': '#3fb1e3',
    'line-width': 3,
    'line-blur': 1
  },
  {
    'line-cap': 'butt',
    'line-join': 'miter',
    visibility: 'visible'
  }
);

线样式

参数 说明 类型 可选值 默认值
paint MapboxGL 点图层 Paint 配置 paint (opens new window) - -
layout MapboxGL 点图层 Layout 配置 layout (opens new window) - -

# FillStyle

import VueiClient from '@supermapgis/vue-iclient-mapboxgl';

let fillStyle = new VueiClient.commontypes.FillStyle(
  {
    'fill-opacity': 0.8,
    'fill-color': '#3fb1e3',
    'fill-translate': [0, 0],
    'fill-antialias': true,
    'fill-outline-color': '#3fb1e3',
    'fill-translate-anchor': 'map'
  },
  {
    visibility: 'visible'
  }
);

面样式

参数 说明 类型 可选值 默认值
paint MapboxGL 点图层 Paint 配置 paint (opens new window) - -
layout MapboxGL 点图层 Layout 配置 layout (opens new window) - -

# SymbolStyle

symbol 样式

import VueiClient from '@supermapgis/vue-iclient-mapboxgl';

let symbolStyle = new VueiClient.commontypes.SymbolStyle(
  {
    'text-color': '#202',
    'text-halo-color': '#fff',
    'text-halo-width': 2
  },
  {
    'text-field': 'symbol',
    'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
    'text-size': 11,
    'text-transform': 'uppercase',
    'text-letter-spacing': 0.05,
    'text-offset': [0, 1.5],
    visibility: 'visible'
  }
);
参数 说明 类型 可选值 默认值
paint MapboxGL 点图层 Paint 配置 paint (opens new window) - -
layout MapboxGL 点图层 Layout 配置 layout (opens new window) - -

# HeatMapStyle

热力图样式

import VueiClient from '@supermapgis/vue-iclient-mapboxgl';

let heatMapStyle = new VueiClient.commontypes.HeatMapStyle(
  {
    'heatmap-radius': 30,
    'heatmap-weight': 1,
    'heatmap-intensity': 1,
    'heatmap-color': [
      'interpolate',
      ['linear'],
      ['heatmap-density'],
      0,
      'rgba(0, 0, 255, 0)',
      0.1,
      'royalblue',
      0.3,
      'cyan',
      0.5,
      'lime',
      0.7,
      'yellow',
      1,
      'red'
    ],
    'heatmap-opacity': 1
  },
  {
    visibility: 'visible'
  }
);
参数 说明 类型 可选值 默认值
paint MapboxGL 点图层 Paint 配置 paint (opens new window) - -
layout MapboxGL 点图层 Layout 配置 layout (opens new window) - -

# iServerMapParameter

import VueiClient from '@supermapgis/vue-iclient-mapboxgl';

let iServerMapParameter = new VueiClient.commontypes.iServerMapParameter({
  url: 'http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World',
  attributeFilter: 'SmID>0',
  layerName: 'Capitals@World.1'
});
参数 说明 类型 可选值 默认值
url 服务地址 string - -
layerName 查询图层名 string - -
attributeFilter 属性过滤条件 string - -
maxFeatures 要素最大返回数 number - 20
name 服务名称 string - 'SuperMap Rest 地图服务'
proxy 代理地址 string | function - -
queryMode 查询方式 string 'KEYWORD' | 'SQL' 'SQL'

注意：旧的 RestMapParameter 基础类型仍然生效，且配置（与 iServerMapParameter 一致）不变。

# iServerDataParameter

import VueiClient from '@supermapgis/vue-iclient-mapboxgl';

let iServerDataParameter = new VueiClient.commontypes.iServerDataParameter({
  url: host + 'http://support.supermap.com.cn:8090/iserver/services/data-world/rest/data',
  attributeFilter: "NAME='Huang He'",
  dataName: ['World:Countries']
});
参数 说明 类型 可选值 默认值
url 服务地址 string - -
dataName 查询数据集名 string[] - -
attributeFilter 属性过滤条件 string - -
maxFeatures 要素最大返回数 number - 20
name 服务名称 string - 'SuperMap Rest 数据服务'
proxy 代理地址 string | function - -
queryMode 查询方式 string 'KEYWORD' | 'SQL' 'SQL'

注意：旧的 RestDataParameter 基础类型仍然生效，且配置（与 iServerDataParameter 一致）不变。

# iPortalDataParameter

import VueiClient from '@supermapgis/vue-iclient-mapboxgl';

let iPortalDataParameter = new VueiClient.commontypes.iPortalDataParameter({
  url: 'https://iportal.supermap.io/iportal/web/datas/676516522',
  attributeFilter: "机场='大理'"
});
参数 说明 类型 可选值 默认值
url 服务地址 string - -
attributeFilter 属性过滤条件 string - -
maxFeatures 要素最大返回数 number - 20
name 服务名称 string - 'SuperMap iPortal 数据'
withCredentials 请求是否携带 cookie boolean - false
queryMode 查询方式 string 'KEYWORD' | 'SQL' 'SQL'

queryMode 仅当数据发布为服务时生效。

# GeoJSONParameter

import VueiClient from '@supermapgis/vue-iclient-mapboxgl';

let geoJSONParameter = new VueiClient.commontypes.GeoJSONParameter({
  geoJSON: {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        properties: {
          icon: 'theatre1'
        },
        geometry: {
          type: 'Point',
          coordinates: [-77.038659, 38.931567]
        }
      },
      {
        type: 'Feature',
        properties: {
          icon: 'theatre2'
        },
        geometry: {
          type: 'Point',
          coordinates: [-77.003168, 38.894651]
        }
      }
    ]
  },
  maxFeatures: 100
});
参数 说明 类型 可选值 默认值
geoJSON GeoJSON 数据 GeoJSON (opens new window) - -
maxFeatures 要素最大返回数 number - 20
最后更新时间: 2024/11/1 下午6:02:42

←