使用说明

创建地图，初始化底图。

[无矢量图示例]

[矢量图示例]

使用示例

<script>
  window.ehhGis = new EhhGis()
  new window.ehhGis.Map({
    container: 'map',
    center: [122.08754785262795, 29.938076960099636],
    zoom: 12,
    minZoom: 3,
    style: {
      version: 8,
      name: '易航海海图',
      glyphs: 'https://xxxx.pbf', //字体库地址
      tilesUrl: 'https://xxx/{z}/{x}/{y}.pbf', //矢量地址
      spriteUrl: 'http://xxxx/sprite', //矢量符号地址
      baselayer: {
        sources: {
          tianditu_ludi: {
            type: 'raster',
            tiles: ['http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=692a62383c6b834fc06aefef92838912'],
            tileSize: 256,
          },
          tianditu_ludiwenzi: {
            type: 'raster',
            tiles: ['http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=692a62383c6b834fc06aefef92838912'],
            tileSize: 256,
          },
        },
        groups: [
          {
            id: '矢量海图',
            name: '矢量海图',
            image: './mapSwitch/esea.png',
            layers: [
              {
                id: 'background',
                type: 'background',
                paint: {
                  'background-color': '#d4eaee',
                },
              },
              {
                type: 'enc', //若为纯粹的矢量图层，则type为enc
              },
            ],
          },
          {
            id: '海陆融合图',
            name: '海陆融合图',
            image: './mapSwitch/sealand.png',
            layers: [
              {
                id: 'tiandiludi',
                type: 'raster',
                source: 'tianditu_ludi',
              },
              {
                id: 'tiandituludiwenzi',
                type: 'raster',
                source: 'tianditu_ludiwenzi',
              },
              {
                type: 'enc_without_land', //若需矢量图叠加，则固定配置type: "enc_without_land",
              },
            ],
          },
        ],
      },
    },
  }).then((map) => {})
</script>

参数

Options

new SDKgl.Map(options)

初始化地图实例时支持的配置项对象。

参数	说明	类型	可选值	默认值
container	必填。地图容器的 HTML 元素 ID 或元素本身。	HTMLElement | String	-	-
style	必填。地图样式的 URL 或样式 JSON 对象。	Object | String	-	-
center	地图初始中心点坐标 [经度, 纬度]。	LngLatLike	[number, number]	[0, 0]
zoom	地图初始缩放级别 (0-24)。	Number	0 ~ 24	0
bearing	地图初始旋转角度（方位角），以正北为 0 度，顺时针旋转。	Number	Number	0
pitch	地图初始倾斜角度（0-85 度）。	Number	0 ~ 85	0
minZoom	地图允许的最小缩放级别。	Number	0 ~ 24	0
maxZoom	地图允许的最大缩放级别。	Number	0 ~ 24	22
maxBounds	限制地图显示的地理边界范围。如果设置了此参数，用户将被限制在该区域内平移和缩放。	LngLatBoundsLike	[[minLng, minLat], [maxLng, maxLat]]	null
interactive	是否启用地图的交互功能（如拖拽、缩放、旋转等）。如果设为 false，地图将变为静态图片且无法操作。	Boolean	true, false	true
preserveDrawingBuffer	是否保留 canvas 的绘图缓冲区。如果你需要使用 map.getCanvas().toDataURL() 进行截图或导出图片，必须设为 true。这对性能有轻微影响。	Boolean	true, false	false
antialias	是否开启 WebGL 抗锯齿。如果设为 false，性能会更好，但图形边缘可能出现锯齿。	Boolean	true, false	false
renderWorldCopies	当缩放级别较低时，是否渲染多个“世界副本”（即地图左右无限重复）。	Boolean	true, false	true
transformRequest	一个回调函数，用于在请求资源（切片、样式、Sprite）之前修改请求（例如添加自定义 Headers 或 Token）。	Function	(url, resourceType) => { url, headers }	null
fadeDuration	控制样式符号碰撞检测淡入淡出的持续时间（毫秒）。	Number	Number	300

style 参数详解

参数	说明	类型	可选值	默认值
version	必填。样式规范的版本号。目前必须为 8。	Number	8	-
baselayer	必填。底图数据源。	Object	-	-
tilesUrl	易航海矢量图地址。（若需加载矢量图，则必填）	String	-	-
spriteUrl	易航海矢量矢量符号地址。（若需加载矢量图，则必填）	String	-	-
name	样式的名称。	String	-	-
sprite	雪碧图（Sprite）的基础 URL。用于检索图标（icon-image）和填充图案。SDK 会自动追加 .json 和 .png 后缀。	String	URL 字符串	-
glyphs	字形（Glyphs）的 URL 模板。用于加载渲染文本所需的 SDF 字体文件（PBF 格式）。	String	URL 模板 (需包含 {fontstack} 和 {range})	-
center	地图的默认中心点。注意：如果在 new ehhGis.Map() 选项中指定了 center，则会忽略样式中的此设置。	Array	[lng, lat]	-
zoom	地图的默认缩放级别。注意：如果在 new ehhGis.Map() 选项中指定了 zoom，则会忽略样式中的此设置。	Number	0 ~ 24	-
bearing	地图的默认方位角。	Number	Number	0
pitch	地图的默认倾斜度。	Number	0 ~ 85	0
transition	全局默认的过渡动画设置（如 duration 和 delay）。用于控制属性变化时的平滑过渡效果。	Object	{ duration: 300, delay: 0 }	-

baselayer - sources 参数详解

底图数据源配置项

<script>
  // sourceKey -  该数据源的唯一ID
  [{
    'sourceKey'{
      type: "raster", //图层类型，通常情况下底图为raster
      tiles: [
        "http://xxxxxx", //数据地址
      ],
      tileSize: 256, //每个瓦片的大小
    }
  },
  ...
  ]
</script>

baselayer - groups 参数详解

底图数据源配置项

<script>
    //注意，组合图层中，图层按照顺序进行叠加，layers中图层顺序越靠后，图层优先级越高
    [{
        id: '海陆融合图', //图层组唯一ID
        name: '海陆融合图', // 图层名称
        image: './mapSwitch/sealand.png', //底图切换dom的图片路径
        layers: [
          {
            id: 'tiandiludi', //图层唯一ID
            type: 'raster', //图层类型，通常情况下底图为raster
            source: 'tianditu_ludi', //图层数据源 通常情况下为 baselayer - sources中的sourceKey
          },
          {
            id: 'tiandituludiwenzi',
            type: 'raster',
            source: 'tianditu_ludiwenzi',
          },
        ],
      },
      ...
    ]

  //矢量图
  [{
    id: "只有矢量海图",
    name: "只有矢量海图",
    image: "./mapSwitch/esea.png",
    layers: [
      {
        type: "enc", //若需只展示矢量图层  固定配置为type: "enc",
      },
    ],
  }]

  //若需在展示单纯矢量图层  固定配置如下
  [{
    id: "xx叠加海图",
    name: "xx叠加海图",
    image: "./mapSwitch/esea.png",
    layers: [
      {
        id: "xxx",
        type: "raster",
        source: "xxx",
      },
      {
        type: "enc_without_land",  //若需只矢量图层与其他图层叠加  固定配置为type: "enc_without_land",
      },
    ],
  }]
</script>