Cfmap-4490 NPM

cfmap 开发文档

说明

封装

CfMap 是基于 mapbox-gl 的扩展库，封装不影响使用原生 mapbox-gl 的功能。原生 API 请参考 mapboxgl 官方文档

授权

获取流程：申请平台账号→获取服务秘钥 (ak)→使用相关服务功能，平台门户地址

安装

CfMap 目前支持三种坐标系，wgs84 地理坐标系 (ESPG:4326)，国家 2000 坐标系 (EPSG:4490)，web 墨卡托投影坐标系（EPSG:3857）。不同坐标系统需要安装指定的 SDK 包；

EPSG:3857

<script src='./libs/cfmap.min.css'></script>
<link href='./libs/cfmap.min.js' rel='stylesheet' />

或，使用 npm 安装

npm i cfmap
import cfmap from 'cfmap'

EPSG:4326 和 EPSG:4490

<script src='./libs/cfmap-4490.min.css'></script>
<link href='./libs/cfmap-4490.min.js' rel='stylesheet' />

或，使用 npm 安装

npm i cfmap-4490
import cfmap from 'cfmap'

Hello World

使用 CfMap SDK 创建一个简单的示例。

1、获取 cfToken

通过平台账号密码获取

2、准备页面

根据 HTML 标准，每一份 HTML 文档都应该声明正确的文档类型，我们建议您使用最新的符合 HTML5 规范的文档声明：

<!DOCTYPE html>

您也可以根据需要选择其他类型的文档声明，这样浏览器会以标准的方式对页面进行渲染，保证页面最大的兼容性。我们不建议您使用 quirks 模式进行开发。

3、适应移动端页面展示

下面我们添加一个 meta 标签，以便使您的页面更好的在移动平台上展示。

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

4、设置容器样式

设置容器样式大小，使地图充满整个浏览器窗口：

<style type="text/css">  
    html{height:100%}    
    body{height:100%;margin:0px;padding:0px}    
    #container{height:100%}    
</style>

4、引用 cfmap 库文件

<script src='./libs/cfmap.min.css'></script>
<link href='./libs/cfmap.min.js' rel='stylesheet' />

5、创建地图容器元素

地图需要一个 HTML 元素作为容器，这样才能展现到页面上。这里我们创建了一个 div 元素。

<div id="container"></div>

6、设置地图配置信息

cfToken: 使用平台账号获取的秘钥
ESPG: 指定地图服务使用的坐标系统
mapboxToken: 指定 mapbox 的 accessToken，从 mapbox v2+以上版本开始，mapbox-gl 的初始化需要 mapbox 的 token，cfmap 内置了 mapbox 公开的 token，所以也可以不设置，如果始终中内置 token 失效，则需注册 mapbox 账户设置新的 token。
proxyArray: 矢量切片 json 中 source、sprite 等前缀地址需要替换时可配置，形式为数组 [0,1]，0 为被替换的地址，1 为替换成的地址

注意：3857(web 墨卡托投影坐标系）；4490（cgcs2000）；4326（wgs84 坐标）

cfmap.setConfig({
  cfToken:
    "yAkqtubPdGtD61/l8DNLXhQrBCUcCeCQR9dzlyiMXHp3Qe9zsEtfy9k0YMAmXwOzx9p6BulJNYrLbejxUp6zYWpHhnKqZcgr3FjHGv8ybhHqLd4eWoGztA==",
  EPSG: 3857,
  mapboxToken: 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p0MG01MXRqMW45cjQzb2R6b2ptc3J4MSJ9.zA2W0IkI0c6KaAhJfk9bWg',
  proxyArray:[['http://webres.cityfun.com.cn','http://webres.cityfun.com']],
});

7、创建地图实例

位于 cfmap 命名空间下的 Map 类表示地图，通过 new 操作符可以创建一个地图实例。

注意：创建地图对象时指定参数中，style 必须是平台发布的矢量地图服务

var map = new cfmap.Map({
  container: "container",
  center: [120.70044254024515, 31.301339366724918],
  zoom: 12,
  pitch: 60,
  style:"http://192.168.2.76/geocms/v1/cf/rest/services/MapService/VT/c772577d-6200-4469-8147-35d8009ab728",
});

8、监听地图加载完成事件

map.on("load", function() {});

9、定位地图中心点

map.on("load", function() {
    map.flyTo({center:[116.38, 39.90]});
});

10、完成实例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>地图展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <style>
      body,
      html,
      #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
      }
    </style>
    <link href="cfmap.min.css" rel="stylesheet" />
  </head>
  <body>
    <div id="container"></div>
    <script type="text/javascript" src="cfmap.min.js"></script>
    <script>
      cfmap.setConfig({
        cfToken:
          "yAkqtubPdGtD61/l8DNLXhQrBCUcCeCQR9dzlyiMXHp3Qe9zsEtfy9k0YMAmXwOzx9p6BulJNYrLbejxUp6zYWpHhnKqZcgr3FjHGv8ybhHqLd4eWoGztA==",
        EPSG: 3857,
        mapboxToken: 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p0MG01MXRqMW45cjQzb2R6b2ptc3J4MSJ9.zA2W0IkI0c6KaAhJfk9bWg',
      });

      var map = new cfmap.Map({
        container: "container",
        center: [120.70044254024515, 31.301339366724918],
        zoom: 12,
        pitch: 60,
        style:
          "http://192.168.2.76/geocms/v1/cf/rest/services/MapService/VT/c772577d-6200-4469-8147-35d8009ab728",
      });

      map.on("load", function() {
        map.flyTo({center:[116.38, 39.90]});
      });
    </script>
  </body>
</html>

OGC 标准服务和 ESRI 服务加载

ArcGIS 瓦片服务

加载 arcgis server 发布的瓦片服务

  map.addArcGISTileLayer( "http://192.168.2.64/geocms/v1/cf/rest/services/MapService/ESRI/ff0a52e3-f9e0-4cc9-8034-5d170dfb4b9c",{
      layerid: "esri-tile",
    }
  );

ArcGIS 动态服务

map.on("load", function() {
  map.addArcGISDynamicLayer(
    "http://192.168.2.64/geocms/v1/cf/rest/services/MapService/ESRI/ac785b13-7b7f-4e7e-aad3-4ba67f053eb0",{
      layerid: "esri-tile",
      layers:[1,2,3]
    }
  );
});

OGC WMS 服务

map.on("load", function() {
  map.addWMSLayer(
    "http://192.168.2.64/geocms/v1/cf/rest/services/MapService/OGC/ea971827-12d3-1c12-ac45-39f987c7d5ad",{
      layerid: "wms01",
      layers: "WJKFQ_Z:CSZL_AQJG_AQSCSG,WJKFQ_Z:CSZL_CSBJ_BKT",
    }
  );
});

OGC WMTS 服务

map.on("load", function() {
  map.addWMTSLayer(
    "http://192.168.2.64/geocms/v1/cf/rest/services/MapService/OGC/3abd92a4-0da8-48d4-9905-dac2c5e46caf",{
      layerid: "geo-server-wmts",
      layer: "SZ_BaseMap:SZ_BaseMap_10",
    }
  );
});

矢量地图服务

注意：矢量地图服务，服务配置为符合 mapbox 矢量切片样式标准。可以通过 isFlyTo 参数来指定是否定位到服务配置文件中指定的相机参数。

map.on("load", function() {
  map
    .loadMapStyle(
      "http://192.168.2.64/geocms/v1/cf/rest/services/MapService/VM/8c248ab6-616f-702d-a932-39f987c7d5ad"
    )
    .then((styleObj) => {
      map.addMapStyle(styleObj, {
        styleid: "special-id",
        isFlyTo: false, // 默认 false
      });
    });
});

3dtiles 服务

map.on("load", function() {
        let url = "<tileset json url>";
        let layer = map.add3DTitleLayer("<layer id>", url, token, {
          tileset: {
            // options.ellipsoid=Ellipsoid.WGS84 (Ellipsoid) - The ellipsoid determining the size and shape of the globe.
            // options.throttleRequests=true (Boolean) - Determines whether or not to throttle tile fetching requests. Throttled requests are prioritized according to tile visibility.
            // options.maxRequests=64 (Number) - When throttling tile fetching, the maximum number of simultaneous requests.
            // options.modelMatrix=Matrix4.IDENTITY (Matrix4) - A 4x4 transformation matrix this transforms the entire tileset.
            // options.maximumMemoryUsage=512 (Number) - The maximum amount of memory in MB that can be used by the tileset.
            // options.viewDistanceScale=1.0 (Number) - A scaling factor for tile refinement. A lower value would cause lower level tiles to load. Useful for debugging and for restricting resource usage.
            // options.updateTransforms=true (Boolean) - Always check if the tileset modelMatrix was updated. Set to false to improve performance when the tileset remains stationary in the scene.
            // options.loadOptions - loaders.gl options used when loading tiles from the tiling server. Includes fetch options such as authentication headers, worker options such as maxConcurrency, and options to other loaders such as 3d-tiles, gltf, and draco.
            // options.contentLoader = null (Promise) - An optional external async content loader for the tile. Once the promise resolves, a tile is regarded as READY to be displayed on the viewport.
            // options.loadTiles=true (Boolean) - Whether the tileset traverse and update tiles. Set this options to false during the run time to freeze the scene.
          },
        });
        map.addLayer(layer);
  map.addLayer(layers);
});

API

1、addArcGISTileLayer(url,options)

加载 ArcGIS 切片服务

参数：

url:string;
options:Object ;
- layerid:string 服务地址
- zoomOffset:number 切片缩放层级（默认-1）

2、addArcGISDynamicLayer（url,options）

加载 ArcGIS 动态地图服务

参数：

url:string;
options:Object ;
- layerid:string 服务地址
- zoomOffset:number 切片缩放层级（默认-1）

3、addWMSLayer(url,options)

加载 WMS 地图服务

参数：

url:string; 服务请求地址
options:Object
- layerid:string; 图层 id
- layers:string; wms 子图层 id, 多个用逗号隔开

4、addWMTSLayer(url,options)

加载 WMS 地图服务

参数：

url:string; 服务请求地址
options:Object
- layerid:string; 图层 id
- layers:string; wmts 服务子图层，多个用逗号隔开"}

5、addMapStyle(styleJson,options)

加载专题图样式，mapbox 标准地图样式

参数：

styleJson:Object ；满足 mapbox 样式标准 JSON 对象
options:Object
- styleid:string; 样式 id 专题图图层组（可能多个图层）id，
- isBaseMap:string ；true|false ；可选参数
- isFlyTo; true|false ；是否定位到相机参数

6、removeMapStyle(styleid)

移除专题图样式，mapbox 标准地图样式

参数：

styleid:string；样式 ID

7、addLayer(layer,beforeId)

重写添加图层方法，和原生一样使用，内部做了处理

参数：

参考 mapbox 官网

8、changeBaseMap(data,options)

切换 mapbox 底图

参数：

data:object；mapbox 标注样式 JSON 对象
options
- styleid:string 样式 ID
- isBaseMap:boolean ；是否是底图

9、getThunbnail(options)

获取缩略图

参数：

data:object
- type:string; 输出类型；默认‘image/jpeg’
- quality:number; 图片质量，默认 1
- widht:number；图片宽度，默认 300
- height:number; 图片高度，默认 300
- saveAsFile:boolearn: 默认，false
- fileName:string，文件名称

10、getScreenshot(options)

地图截图

参数：