cfmap-4490

v2.3.18

Published

a year ago

城方mapbox地图sdk

Downloads

0High
0Medium
0Low

cityfun.dev

cfmap mapbox

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)

地图截图

参数：

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

11，加载 3dtiles 服务 add3DTitleLayer(layerid, url, token) 参数：

layerid:string 图层 id
url:string 服务地址
token:string 令牌

返回参数：要添加的图层对象

12，polygon 定位到适配区域

fitPolygonBoundingBox(mapbox, coordinates) 参数：

mapbox: 底图实例对象
coordinates:array 坐标

13，multpolygon 定位到适配区域

fitMultPolygonBoundingBox(data, mapbox) 参数：

data:object
mapbox: 底图实例对象

14，fitLineBounds 定位到适配区域

fitLineBounds( mapbox, coordinates) 参数：

coordinates:array 坐标
mapbox: 底图实例对象

15，屏幕坐标计算

mousePos(mapbox, e) 参数：

e: 屏幕
mapbox: 底图实例对象
返回屏幕坐标

15，是否隐藏底图白膜

hiddenFillExtrusion(mapbox, ishidden) 参数：

ishidden: boolean 是否隐藏
mapbox: 底图实例对象

16，加载图片资源到底图上

addImageToMap(mapbox, path, imagesList, format)

参数：

path: string 加载图片存放路径
imagesList： array 图片名称 list
format: string 图片格式如： png
mapbox: 底图实例对象

17, 参考图层（用于控制其他图层的显示顺序）

addGroupLayer()

cityfun.thematic.reflayer-专题图层锚定图层
cityfun.search.reflayer-查询图层锚定图层
cityfun.measure.reflayer-测量图层锚定图层

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

cfmap 开发文档

说明

封装

授权

安装

Hello World

OGC 标准服务和 ESRI 服务加载

ArcGIS 瓦片服务

ArcGIS 动态服务

OGC WMS 服务

OGC WMTS 服务

矢量地图服务

3dtiles 服务

API