CMSR 1.0.13

2024-01-08 18:00:34

cmsr-map sdk 文档

如何使用

script 标签引入

zysy 目录和 cmsr-map.bundle.js 文件放到项目根目录
index.html 引入两个文件 zysy\lib\include-lib.js、cmsr-map-bundle.js，并且放在你的js代码前面

<script
        type="text/javascript"
        src="zysy/lib/include-lib.js?time=20200710"
        libpath="zysy/lib/"
        include="jquery,jquery.range,bootstrap,,bootstrap-table,bootstrap-checkbox,font-awesome,web-icons,layer,haoutil,nprogress,toastr,admui,turf,mapV,kjwt3d,echarts,echarts-gl,kjwt3d-visual,cesium-navigation"
></script>
<script type="text/javascript" src="cmsr-map.bundle.js?time=20200710"></script>

sdk的接口都在CMSRMap对象下
sdk会占用 CMSRMap 和 viewer 两个全局变量，请不要覆盖

node_modules 引入

将整个仓库的代码(有package.json、dist文件夹和index.js文件即可)，放到 /node_modules/@cmsr/cmsr-map
在webpack.config.js中做如下配置，将 zysy 文件夹拷贝到你的打包目录根目录

const CopyWebpackPlugin = require('copy-webpack-plugin');
const config = {
  plugins: [
    new CopyWebpackPlugin([{ from: path.join('./node_modules', '@cmsr/cmsr-map/dist/zysy'), to: 'zysy' }]),
  ],
}

index.html 引入 zysy\lib\include-lib.js 文件并且放在你的js代码前面

<script
        type="text/javascript"
        src="zysy/lib/include-lib.js?time=20200710"
        libpath="zysy/lib/"
        include="jquery,jquery.range,bootstrap,,bootstrap-table,bootstrap-checkbox,font-awesome,web-icons,layer,haoutil,nprogress,toastr,admui,turf,mapV,kjwt3d,echarts,echarts-gl,kjwt3d-visual,cesium-navigation"
></script>

引入具体API时通过 import { xxx } from '@cmsr/cmsr-map'; 语句引入即可
初始化viewer后会占用 CMSRMap 和 viewer 两个全局变量，请不要覆盖

提供的API

地图加载

initViewer(id, options)

代码示例

注意容器的class要有kjwt3d-container，否则样式会出错

<div  id="mapContainer" class="kjwt3d-container"></div>

// script标签引入
var viewer = CMSRMap.initViewer('mapContainer', {
    config: {
        navigation: true,
    },
    viewerConfig: {
        center: {
            y: 31.214098, x: 121.591228, z: 5045.51, heading: 359.6, pitch: -55.1, roll: 360,
        },
        location: false,
        basemaps: [
            {
                name: '高德',
                type: 'www_gaode',
                crs: 'gcj',
                layer: 'img_d',
                visible: true,
            }, {
                name: '高德',
                type: 'www_gaode',
                crs: 'gcj',
                layer: 'img_z',
                visible: true,
            },
        ],
    },
});

// 使用es6语法
import { initViewer } from '@cmsr/cmsr-map';
const viewer = initViewer('mapContainer');

初始化地图

参数名	类型	必填	默认值	说明
id	string	是		地图容器id
options	Object	否		初始化viewer时接受的参数
options.config	Object	否		sdk的特殊参数
options.config.serverURL	string	否	''	替换图层配置url地址中的$serverURL$参数
options.config.widgetBasePath	string	否	'zysy/'	配置代码仓库目录，使用history路由时需设定为绝对路径，如'http://localhost:3000/zysy/'
options.config.navigation	boolean	否	true	是否启用放大缩小按钮
options.config.zeroDumpingInertia	boolean	否	false	是否启用零阻尼的惯性保持
options.config.enableKeyboard	boolean	否	false	是否启用键盘支持
options.viewerConfig.center	object	否	''	初始化时的地图显示中心点，具体参数见下方示例
options.viewerConfig.minzoom	number	否	1	地球可以放大的最小比例，单位米
options.viewerConfig.maxzoom	number	否	50000000	地球可以缩小的最大比例，单位米
options.viewerConfig.contextmenu	boolean	否	false	是否显示右键菜单
options.viewerConfig.location	object	否		是否显示下方视角信息，设为false不显示
options.viewerConfig.navigation	object	否		是否显示指北针设为false不显示
options.viewerConfig.sceneMode	number	否	3	使用3维地图还是2维地图，使用2维地图时设置为2
options.viewerConfig.mapMode2D	number	否	1	2D 地图是可旋转的还是可以在水平方向上无限滚动，0是可旋转的，1是水平无限滚动
options.viewerConfig.basemaps	Array	否		数组，地球基础底图配置，详情见下方说明

示例 `options.viewerConfig.center`

const center = {  
    // 纬度
    y: 31.214098,
    // 纬度
    x: 121.591228,
    // 高度
    z: 5045.51,
    // 偏航角
    heading: 359.6,
    // 俯仰角
    pitch: -55.1,
    // 翻滚角
    roll: 360,
}

地图图层配置（basemaps）

basemaps 底图配置

名称	含义	说明
name	名称	字符串
visible	显示状态	boolean 单选（是、否）
type	类型
pid	上级唯一标识	int，主要是图层树的上下级控制
center	显示图层时定位处	配置同`options.viewerConfig.center`
flyTo	是否自动定位到center	boolean
layer	图层名称
crs	坐标系

目前支持的 basemaps type 类型

分类	type值	说明
分组	group
天地图地图	www_tdt
必应地图	www_bing
高德地图	www_gaode
谷歌地图	www_google
百度地图	www_baidu
XYZ 瓦片数据	tile	具有 xyz 格式地址的瓦片图层
WMTS 服务	wmts
WMS 服务	wms
3dtiles 模型	3dtiles
gltf 模型	gltf
GeoJSON 格式数据	geojson
KML 格式数据	kml
CZML 格式数据	czml

basemaps各type的可选项

分类	参数	含义	说明
www_tdt	layer	图层名称	单选：vec_d（电子底图）、vec_z（电子注记）、img_d（卫星底图）、img_z（卫星注记）、ter_d（地形底图）、ter_z（地形注记）
www_tdt	crs	坐标系	单选：标准坐标系（4326）、墨卡托投影（3857）
www_bing	layer	图层名称	单选： Aerial （无注记影像）、AerialWithLabels（有英文标记影像）、 Road（矢量道路）
www_gaode	layer	图层名称	单选：vec 电子地图（含底图和注记）、 img_d（卫星底图单图层）、img_z（卫星注记单图层）、time（高德实时路况信息）
www_gaode	crs	坐标系	单选：gcj（国测局偏移坐标系）
www_google	layer	图层名称	单选：vec 电子地图（含底图和注记）、 img_d（卫星底图单图层）、img_z（卫星注记单图层）、ter（地形地图（含底图和注记）
www_google	crs	坐标系	单选：标准坐标系（wgs84）、偏移坐标系（空）
www_baidu	layer	图层名称	单选：vec 电子（含底图和注记）、img_d（卫星底图）、img_z（卫星注记）、custom
www_baidu	customid	样式名称	custom 时有效，可选值：dark,midnight,grayscale,hardedge,light,redalert,googlelite ,grassgreen,pink,darkgreen,bluish

xyz 格式地址的瓦片图层使用方式

当瓦片地图 url 地址具有 xyz 规则的标准图层时使用，其参数支持Cesium.UrlTemplateImageryProvider 所有 options

const demo = {
    pid: 10,
    name: 'OSM地图',
    type: 'xyz',
    icon: 'zysy/img/basemaps/osm.png',
    url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    subdomains: 'abc',
}

名称	含义	说明
url	服务地址	string 字符串
opacity	透明度	0到1的小数值
rectangle	瓦片边界	string 字符串
subdomains	占位符集	string 字符串
minimumLevel	最小层级	number
maximumLevel	最大层级	number
minimumTerrainLevel	显示的最小层级	number
maximumTerrainLevel	显示的最大层级	number
tileWidth	切片宽度	number
tileHeight	切片高度	number
enablePickFeatures	请求服务查询	boolean 单选（是、否）
hasAlphaChannel	调节透明度通道	boolean 单选（是、否）
crs	坐标系	墨卡托投影（3857）或 WGS84(4326)

OGC 标准 wms 服务图层使用方式

OGC 标准WMS瓦片图层，参数支持Cesium.WebMapServiceImageryProvider 所有 options

名称	含义	说明
url	服务地址	string 字符串
opacity	透明度	0到1的小数值
rectangle	瓦片边界	string 字符串
subdomains	占位符集	string 字符串
layers	图层名称	string 字符串
parameters	请求服务时携带的参数	string 字符串
minimumLevel	最小层级	number
maximumLevel	最大层级	number
minimumTerrainLevel	显示的最小层级	number
maximumTerrainLevel	显示的最大层级	number
tileWidth	切片宽度	number
tileHeight	切片高度	number
enablePickFeatures	请求服务查询	boolean 单选（是、否）
showClickFeature	是否单击高亮对象	boolean 单选（是、否）
popup	气泡窗内容	string 字符串
crs	坐标系	墨卡托投影（3857）或 WGS84(4326)

倾斜摄影 3dtiles 模型

3dtiles 模型，支持 Cesium.Cesium3DTileset 类所有的属性参，另外支持 offset 参数 xyz 为修正模型数据的原始经纬位置和高度

名称	含义	说明
url	模型的地址	string 字符串
maximumScreenSpaceError	清晰度	1-16，框架默认为 1，最清晰
maximumMemoryUsage	最大内存	number
dynamicScreenSpaceError	优化选项，减少切片错误	boolean 单选（是、否）
cullWithChildrenBounds	优化选项	boolean 单选（是、否）
luminanceAtZenith	亮度	number
offset	偏移	xyz 对象
eidtOffset	模型压平裁剪偏移	xyz 对象
eidtOffset	模型压平裁剪偏移	xyz 对象
opacity	透明度	0到1的小数值
showClickFeature	是否显示单体构件	boolean 单选（是、否）
clickFeatureColor	构件选中的颜色	颜色字符串 "#00FF00"
style	样式	对应 Cesium3DTileStyle 类的参数，比如城市白膜时

basemaps示例

const maps = [
   {
     id: 10,
     name: '地图底图',
     type: 'group',
   },
   {
     pid: 10,
     name: '高德',
     type: 'www_gaode',
     crs: 'gcj',
     layer: 'vec',
     visible: false,
   },
   {
     pid: 10,
     name: '谷歌卫星',
     icon: 'zysy/img/basemaps/google_img.png',
     type: 'www_google',
     crs: 'wgs84',
     layer: 'img_d',
     visible: true,
   },
   {
     pid: 10,
     name: 'ArcGIS卫星',
     icon: 'zysy/img/basemaps/esriWorldImagery.png',
     type: 'arcgis',
     url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
     enablePickFeatures: false,
   },
    {
        pid: 10,
        type: 'terrain',
        name: 'ArcGIS地形',
        terrain: {
          type: 'arcgis',
          url: 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
        },
        radio: true,
      },
   {
     pid: 10,
     name: '微软卫星',
     icon: 'zysy/img/basemaps/bingAerial.png',
     type: 'www_bing',
     layer: 'Aerial',
   },
   {
     pid: 10,
     name: '天地图卫星',
     icon: 'zysy/img/basemaps/tdt_img.png',
     type: 'www_tdt',
     layer: 'img_d',
     key: [
       '313cd4b28ed520472e8b43de00b2de56',
       '83b36ded6b43b9bc81fbf617c40b83b5',
       '0ebd57f93a114d146a954da4ecae1e67',
       '6c99c7793f41fccc4bd595b03711913e',
       '56b81006f361f6406d0e940d2f89a39c',
     ],
   },
   {
     pid: 10,
     name: '天地图电子',
     icon: 'zysy/img/basemaps/tdt_vec.png',
     type: 'group',
     layers: [
       {
         name: '底图', type: 'www_tdt', layer: 'vec_d', key: ['313cd4b28ed520472e8b43de00b2de56'],
       },
       {
         name: '注记', type: 'www_tdt', layer: 'vec_z', key: ['83b36ded6b43b9bc81fbf617c40b83b5'],
       },
     ],
   },
   {
     pid: 10,
     name: '天地图地形',
     icon: 'zysy/img/basemaps/tdt_ter.png',
     type: 'group',
     layers: [
       {
         name: '底图', type: 'www_tdt', layer: 'ter_d', key: ['313cd4b28ed520472e8b43de00b2de56'],
       },
       {
         name: '注记', type: 'www_tdt', layer: 'ter_z', key: ['83b36ded6b43b9bc81fbf617c40b83b5'],
       },
     ],
   },
   {
     pid: 10,
     name: 'OSM地图',
     type: 'xyz',
     icon: 'zysy/img/basemaps/osm.png',
     url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
     subdomains: 'abc',
   },
   {
     pid: 10,
     name: '蓝色底图',
     icon: 'zysy/img/basemaps/bd-c-midnight.png',
     type: 'arcgis',
     url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',
     enablePickFeatures: false,
   },
   {
     pid: 10,
     name: '单张图片',
     icon: 'zysy/img/basemaps/offline.png',
     type: 'image',
     url: 'zysy/img/world/world.jpg',
   },
 ];

标绘编辑

标绘的命名空间放在draw下

draw.DrawControl

实例化参数

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值

标绘类，使用标绘时要实例化一个标绘类

import {draw} from '@cmsr/cmsr-map';
const drawControl = new draw.DrawControl(window.viewer);

标绘工具使用完时要记得执行destroy方法

drawControl.destroy();

设置标绘对象的popup弹窗

draw.setEntityPopup(entity, popupString)

参数名	类型	必填	默认值	说明
entity	object	是	无	标绘实例
popupString	string	是	无	标绘弹窗内容，可以是html

该方法不属于DrawControl类，而是放在命名空间draw下

// 使用popup挂载vue组件
import Counter from './Counter.vue';
import Vue from 'vue';
viewer = CMSRMap.initViewer('mapContainer');
setTimeout(()=>{
  window.drawControl = new CMSRMap.draw.DrawControl(viewer);
  var entity = drawControl.addMarkerByGeoJson({"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"图标点2","type":"point","edittype":"point"},"geometry":{"type":"Point","coordinates":[121.60156,31.241837,-0.02]}}]})[0];
  viewer.flyTo(entity);
  CMSRMap.draw.setEntityPopup(entity, '<div id="container"></div>');
  viewer.kjwt.popup.show(entity);
  setTimeout(() => {
    const CounterComponent = Vue.extend(Counter);
    new CounterComponent().$mount('#container');
  }, 60);
}, 60);

// Counter.vue
<template>
  <div class="counter-con">
    <div>{{num}}</div>
    <el-button class="button" @click="incr">自增加一</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    incr() {
      this.num++;
    },
  },
};
</script>

设置标绘对象的水波纹

draw.setEntityWaveCircle(entity, options)

注意：水波纹占用了entity的ellipse对象。

参数名	类型	必填	默认值	说明
entity	object	是	无	需要设置的entity
options	object \|null	否	无	配置项，设置为null时删除水波纹
options.width	number	否	100	水波纹宽度，单位米
options.height	number	否	0	水波纹距地面高度，单位米
options.duration	number	否	3000	水波纹一次时间
options.gradient	number	否	0.5	水波纹宽度比例
options.count	number	否	1	水波纹一次水波个数
options.color	cssColorString	否	#ff0000	水波纹颜色

获取图形顶点经纬度集合

draw.getCoordinates(entity) -> [[经度,纬度,高度]]

参数名	类型	必填	默认值	说明
entity	object	是	无	需要设置的entity

手动绘制图形

draw.startDraw(viewer, options)

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值
options	object	是	无	配置项
options.type	string	是	无	绘制图形类型，有`rectangle`、`polygon`、`ellipse`
options.style	object	否		配置图形样式，style的配置项参考下面`drawControl.updateMarkerAttribute`接口的style
options.success	function	否	无	回调函数，入参为绘制的entity

CMSRMap.draw.startDraw(viewer,{type:'rectangle',success:(entity)=>{
  // 获取entity图形的顶点经纬度集合
  var coordinates = CMSRMap.draw.getCoordinates(entity);
  console.log('entity', entity);
  console.log('coordinates', coordinates);
}});

注意

下面文档中的drawControl指的是DrawControl类的实例

启动标绘窗口

drawControl.initDrawPanel(drawList, geojson)

启动标绘窗口，同时使所有标绘处于可编辑状态

参数名	类型	必填	默认值	说明
drawList	Array	是	无	panel的标绘列表
geojson	string	是	无	初始化时的数据，格式为geojson格式，可参考下面添加标注接口的示例

drawList示例:

const drawList = {
  点及文字: [
    {
      name: '文字',
      image: '$plot$/img/label.jpg',
      type: 'label',
      edittype: 'label',
      iconClass: 'fa fa-text-width',
    },
    {
      name: '点',
      image: '$plot$/img/point.jpg',
      type: 'point',
      edittype: 'point',
    },
    {
      name: '图标点1',
      type: 'billboard',
      edittype: 'billboard',
      style: {
        image: 'http://localhost:3000/zysy/img/marker/mark1.png',
      },
    },
    {
      name: '图标点2',
      type: 'billboard',
      edittype: 'billboard',
      style: {
        image: '$serverURL$/zysy/img/marker/mark2.png',
      },
    },
    {
      name: '图标点2',
      type: 'billboard',
      edittype: 'billboard',
      style: {
        image: '$serverURL$/zysy/img/marker/mark3.png',
      },
    },
    {
      name: '图标点4',
      type: 'billboard',
      edittype: 'billboard',
      style: {
        image: '$serverURL$/zysy/img/marker/mark4.png',
      },
    },
  ],
  小模型: [
    {
      name: '飞机',
      image: '$serverURL$/zysy/data/img/feiji.jpg',
      type: 'model',
      style: {
        modelUrl: '$serverURL$/zysy/data/gltf/feiji.glb',
      },
    },
    {
      name: '战机',
      scale: 0.1,
      image: '$serverURL$/zysy/data/img/zhanji.jpg',
      type: 'model',
      style: {
        modelUrl: '$serverURL$/zysy/data/gltf/zhanji.glb',
      },
    },
    {
      name: '木楼',
      image: '$serverURL$/zysy/data/img/WoodTower.jpg',
      type: 'model',
      style: {
        modelUrl: '$serverURL$/zysy/data/gltf/Wood_Tower.gltf',
      },
    },
  ],
  二维平面类: [
    {
      name: '线',
      image: '$plot$/img/polyline.jpg',
      type: 'polyline',
      edittype: 'polyline',
      style: {
        clampToGround: false,
      },
    },
    {
      name: '贴地线',
      image: '$plot$/img/polyline_clampToGround.jpg',
      type: 'polyline',
      edittype: 'polyline',
      style: {
        clampToGround: true,
        color: '#ffff00',
      },
    },
    {
      name: '面',
      image: '$plot$/img/polygon.jpg',
      type: 'polygon',
      edittype: 'polygon',
    },
    {
      name: '贴地面',
      image: '$plot$/img/polygon_clampToGround.jpg',
      type: 'polygon',
      edittype: 'polygon_clampToGround',
    },
    {
      name: '矩形',
      image: '$plot$/img/rectangle.jpg',
      type: 'rectangle',
      edittype: 'rectangle',
    },
    {
      name: '贴地矩形',
      image: '$plot$/img/rectangle_clampToGround.jpg',
      type: 'rectangle',
      edittype: 'rectangle',
      style: {
        clampToGround: true,
        color: '#ffff00',
      },
    },
    {
      name: '圆',
      image: '$plot$/img/circle.jpg',
      type: 'circle',
      edittype: 'circle',
    },
    {
      name: '贴地圆',
      image: '$plot$/img/circle_clampToGround.jpg',
      type: 'circle',
      edittype: 'circle_clampToGround',
    },
  ],
  三维立体类: [

    {
      name: '管道',
      image: '$plot$/img/polylineVolume.jpg',
      type: 'polylineVolume',
      edittype: 'polylineVolume',
      hide: true,
    },
    {
      name: '多边立体',
      image: '$plot$/img/extrudedPolygon.jpg',
      type: 'polygon',
      edittype: 'extrudedPolygon',
      style: {
        extrudedHeight: 100,
      },
    },
    {
      name: '立方体',
      image: '$plot$/img/extrudedRectangle.jpg',
      type: 'rectangle',
      edittype: 'extrudedRectangle',
    },

    {
      name: '盒子',
      image: '$plot$/img/box.jpg',
      type: 'box',
      edittype: 'box',
    },

    {
      name: '圆柱体',
      image: '$plot$/img/extrudedCircle.jpg',
      type: 'circle',
      edittype: 'extrudedCircle',
    },
    {
      name: '球体',
      image: '$plot$/img/ellipsoid.jpg',
      type: 'ellipsoid',
      edittype: 'ellipsoid',
    },
  ],
};

从geojson加载标绘

drawControl.addMarkerByGeoJson(geoJson)

示例

drawControl.addMarkerByGeoJson({
    "type": "FeatureCollection",
    "features": [
    {
     "type": "Feature",
     "properties": {
       "name": "文字",
       "type": "label",
       "edittype": "label",
       "iconClass": "fa fa-text-width",
       "style": {
         "text": "文字hhhhhhhhhhhhhhhh",
         "color": "#ffffff",
         "opacity": 1,
         "font_family": "楷体",
         "font_size": 30,
         "border": true,
         "border_color": "#000000",
         "border_width": 3,
         "background": false,
         "background_color": "#000000",
         "background_opacity": 0.5,
         "font_weight": "normal",
         "font_style": "normal",
         "scaleByDistance": false,
         "scaleByDistance_far": 1000000,
         "scaleByDistance_farValue": 0.1,
         "scaleByDistance_near": 1000,
         "scaleByDistance_nearValue": 1,
         "distanceDisplayCondition": false,
         "distanceDisplayCondition_far": 10000,
         "distanceDisplayCondition_near": 0,
         "clampToGround": false,
         "visibleDepth": true
       },
       "attr": {
         "id": "", // drawControl.getEntityById 所查找的id
         "name": "",
         "remark": ""
       }
     },
     "geometry": {
       "type": "Point",
       "coordinates": [
         121.587937,
         31.247518,
         9.81
       ]
     }
    }
    ]
    });

更新标绘属性

drawControl.updateMarkerAttribute(attributes, entity)

entity是标绘对象可从drawControl.getEntities() 获得

attributes 示例如下

// 文字
const text = {
  type: 'label',
  style: {
    text: '文字', // 内容
    color: '#ffffff', // 颜色
    opacity: 1, // 透明度
    font_family: '楷体', // 字体
    font_size: 30, // 字体大小
    border: true, // 是否衬色
    border_color: '#000000', // 衬色颜色
    border_width: 3, // 衬色宽度
    background: false, // 是否背景
    background_color: '#000000', // 背景颜色
    background_opacity: 0.5, // 背景透明度
    font_weight: 'normal', // 是否加粗
    font_style: 'normal', // 是否斜体
    scaleByDistance: false, // 是否按视距缩放
    scaleByDistance_far: 1000000, // 上限
    scaleByDistance_farValue: 0.1, // 比例值
    scaleByDistance_near: 1000, // 下限
    scaleByDistance_nearValue: 1, // 比例值
    distanceDisplayCondition: false, // 是否按视距显示
    distanceDisplayCondition_far: 10000, // 最大距离
    distanceDisplayCondition_near: 0, // 最小距离
    clampToGround: false, // 是否贴地
    visibleDepth: true, // 是否被遮挡
  },
};
// 点
const point = {
  type: 'point',
  style: {
    pixelSize: 10, // 像素大小
    color: '#3388ff', // 颜色
    opacity: 1, // 透明度
    outline: true, // 是否边框
    outlineColor: '#ffffff', // 边框颜色
    outlineOpacity: 0.6, // 边框透明度
    outlineWidth: 2, // 边框宽度
    scaleByDistance: false, // 是否按视距缩放
    scaleByDistance_far: 1000000, // 上限
    scaleByDistance_farValue: 0.1, // 比例值
    scaleByDistance_near: 1000, // 下限
    scaleByDistance_nearValue: 1, // 比例值
    distanceDisplayCondition: false, // 是否按视距显示
    distanceDisplayCondition_far: 10000, // 最大距离
    distanceDisplayCondition_near: 0, // 最小距离
    clampToGround: false, // 是否贴地
    visibleDepth: true, // 是否被遮挡
  },
};
// 图标点标记
const billboard = {
  type: 'billboard',
  style: {
    image: 'img/marker.png', // 图标
    opacity: 1, // 透明度
    scale: 1, // 大小比例
    rotation: 0, // 旋转角度
    horizontalOrigin: 'CENTER', // 横向对齐
    verticalOrigin: 'BOTTOM', // 垂直对齐
    scaleByDistance: false, // 是否按视距缩放
    scaleByDistance_far: 1000000, // 上限
    scaleByDistance_farValue: 0.1, // 比例值
    scaleByDistance_near: 1000, // 下限
    scaleByDistance_nearValue: 1, // 比例值
    distanceDisplayCondition: false, // 是否按视距显示
    distanceDisplayCondition_far: 10000, // 最大距离
    distanceDisplayCondition_near: 0, // 最小距离
    clampToGround: false, // 是否贴地
    visibleDepth: true, // 是否被遮挡

  },
};
// 模型
const model = {
  type: 'model',
  style: {
    modelUrl: '', // 路径
    scale: 1, // 比例
    heading: 0, // 方向角
    pitch: 0, // 俯仰角
    roll: 0, // 翻滚角
    fill: false, // 是否填充
    color: '#3388ff', // 颜色
    opacity: 1, // 透明度
    silhouette: false, // 是否轮廓
    silhouetteColor: '#ffffff', // 轮廓颜色
    silhouetteSize: 2, // 轮廓宽度
    silhouetteAlpha: 0.8, // 轮廓透明度
    clampToGround: false, // 是否贴地

  },
};
// 线
const polyline = {
  type: 'polyline',
  style: {
    lineType: 'solid', // 线型
    animationDuration: 1000, // 速度
    animationImage: 'img/textures/lineClr.png', // 图片
    color: '#3388ff', // 颜色
    width: 4, // 线宽
    clampToGround: false, // 是否贴地
    outline: false, // 是否衬色
    outlineColor: '#ffffff', // 衬色颜色
    outlineWidth: 2, // 衬色宽度
    opacity: 1, // 透明度
    zIndex: 0, // 层级顺序

  },
};
// 管道线
const polylineVolume = {
  type: 'polylineVolume',
  style: {
    color: '#00FF00', // 颜色
    radius: 10, // 半径
    shape: 'pipeline', // 形状
    outline: false, // 是否衬色
    outlineColor: '#ffffff', // 衬色颜色
    opacity: 1, // 透明度

  },
};
// 面
const polygon = {
  type: 'polygon',
  style: {
    fill: true, // 是否填充
    fillType: 'color', // 填充类型
    grid_lineCount: 8, // 网格数量
    grid_lineThickness: 2, // 网格宽度
    grid_cellAlpha: 0.1, // 填充透明度
    stripe_oddcolor: '#ffffff', // 条纹衬色
    stripe_repeat: 6, // 条纹数量
    checkerboard_oddcolor: '#ffffff', // 棋盘衬色
    checkerboard_repeat: 4, // 棋盘格数
    color: '#3388ff', // 颜色
    opacity: 0.6, // 透明度
    stRotation: 0, // 填充方向
    outline: true, // 是否边框
    outlineWidth: 1, // 边框宽度
    outlineColor: '#ffffff', // 边框颜色
    outlineOpacity: 0.6, // 边框透明度
    clampToGround: false, // 是否贴地
    zIndex: 0, // 层级顺序
    extrudedHeight: 100, // 拉伸高度
  },
};
// 矩形
const rectangle = {
  type: 'rectangle',
  style: {
    height: 0, // 高程
    fill: true, // 是否填充
    fillType: 'color', // 填充类型
    grid_lineCount: 8, // 网格数量
    grid_lineThickness: 2, // 网格宽度
    grid_cellAlpha: 0.1, // 填充透明度
    stripe_oddcolor: '#ffffff', // 条纹衬色
    stripe_repeat: 6, // 条纹数量
    checkerboard_oddcolor: '#ffffff', // 棋盘衬色
    checkerboard_repeat: 4, // 棋盘格数
    color: '#3388ff', // 颜色
    opacity: 0.6, // 透明度
    outline: true, // 是否边框
    outlineWidth: 1, // 边框宽度
    outlineColor: '#ffffff', // 边框颜色
    outlineOpacity: 0.6, // 边框透明度
    rotation: 0, // 旋转角度
    stRotation: 0, // 材质角度
    clampToGround: false, // 是否贴地
    zIndex: 0, // 层级顺序
    extrudedHeight: 100, // 高度
  },
};
// 圆
const circle = {
  type: 'circle',
  style: {
    radius: 100, // 半径
    height: 0, // 高程
    fill: true, // 是否填充
    fillType: 'color', // 填充类型
    animationDuration: 1000, // 速度
    animationCount: 1, // 圈数
    animationGradient: 0.1, // 圈间系数
    grid_lineCount: 8, // 网格数量
    grid_lineThickness: 2, // 网格宽度
    grid_cellAlpha: 0.1, // 填充透明度
    stripe_oddcolor: '#ffffff', // 条纹衬色
    stripe_repeat: 6, // 条纹数量
    checkerboard_oddcolor: '#ffffff', // 棋盘衬色
    checkerboard_repeat: 4, // 棋盘格数
    color: '#3388ff', // 填充颜色
    opacity: 0.6, // 透明度
    stRotation: 0, // 填充方向
    outline: true, // 是否边框
    outlineWidth: 1, // 边框宽度
    outlineColor: '#ffffff', // 边框颜色
    outlineOpacity: 0.6, // 边框透明度
    rotation: 0, // 旋转角度
    clampToGround: false, // 是否贴地
    zIndex: 0, // 层级顺序
    extrudedHeight: 100, // 拉伸高度
  },
};
// 椭圆
const ellipse = {
  type: 'ellipse',
  style: {
    semiMinorAxis: 100, // 短半径
    semiMajorAxis: 100, // 长半径
    height: 0, // 高程
    fill: true, // 是否填充
    fillType: 'color', // 填充类型
    animationDuration: 1000, // 速度
    animationCount: 1, // 圈数
    animationGradient: 0.1, // 圈间系数
    grid_lineCount: 8, // 网格数量
    grid_lineThickness: 2, // 网格宽度
    grid_cellAlpha: 0.1, // 填充透明度
    stripe_oddcolor: '#ffffff', // 条纹衬色
    stripe_repeat: 6, // 条纹数量
    checkerboard_oddcolor: '#ffffff', // 棋盘衬色
    checkerboard_repeat: 4, // 棋盘格数
    color: '#3388ff', // 填充颜色
    opacity: 0.6, // 透明度
    stRotation: 0, // 填充方向
    outline: true, // 是否边框
    outlineWidth: 1, // 边框宽度
    outlineColor: '#ffffff', // 边框颜色
    outlineOpacity: 0.6, // 边框透明度
    rotation: 0, // 旋转角度
    clampToGround: false, // 是否贴地
    zIndex: 0, // 层级顺序
    extrudedHeight: 100, // 拉伸高度
  },
};
// 圆锥体
const cylinder = {
  type: 'cylinder',
  style: {
    topRadius: 0, // 顶部半径
    bottomRadius: 100, // 底部半径
    length: 100, // 高度
    fill: true, // 是否填充
    fillType: 'color', // 填充类型
    animationDuration: 1000, // 速度
    animationCount: 1, // 圈数
    animationGradient: 0.1, // 圈间系数
    color: '#00FF00', // 填充颜色
    opacity: 0.6, // 透明度
    outline: false, // 是否边框
    outlineWidth: 1, // 边框宽度
    outlineColor: '#ffffff', // 边框颜色
    outlineOpacity: 0.6, // 边框透明度
  },
};
// 球体
const ellipsoid = {
  type: 'ellipsoid',
  style: {
    extentRadii: 100, // 长半径
    widthRadii: 100, // 宽半径
    heightRadii: 100, // 高半径
    fill: true, // 是否填充
    fillType: 'color', // 填充类型
    grid_lineCount: 8, // 网格数量
    grid_lineThickness: 2, // 网格宽度
    grid_cellAlpha: 0.1, // 填充透明度
    stripe_oddcolor: '#ffffff', // 条纹衬色
    stripe_repeat: 6, // 条纹数量
    checkerboard_oddcolor: '#ffffff', // 棋盘衬色
    checkerboard_repeat: 4, // 棋盘格数
    color: '#00FF00', // 颜色
    opacity: 0.6, // 透明度
    outline: true, // 是否边框
    outlineWidth: 1, // 边框宽度
    outlineColor: '#ffffff', // 边框颜色
    outlineOpacity: 0.6, // 边框透明度
  },
};
// 平面
const plane = {
  type: 'plane',
  style: {
    dimensionsX: 100, // 长度
    dimensionsY: 100, // 宽度
    plane_normal: 'z', // 方向
    plane_distance: 0, // 偏移距离
    fill: true, // 是否填充
    fillType: 'color', // 填充类型
    grid_lineCount: 8, // 网格数量
    grid_lineThickness: 2, // 网格宽度
    grid_cellAlpha: 0.1, // 填充透明度
    stripe_oddcolor: '#ffffff', // 条纹衬色
    stripe_repeat: 6, // 条纹数量
    checkerboard_oddcolor: '#ffffff', // 棋盘衬色
    checkerboard_repeat: 4, // 棋盘格数
    color: '#00FF00', // 颜色
    opacity: 0.6, // 透明度
    outline: true, // 是否边框
    outlineWidth: 1, // 边框宽度
    outlineColor: '#ffffff', // 边框颜色
    outlineOpacity: 0.6, // 边框透明度
    distanceDisplayCondition: false, // 是否按视距显示
    distanceDisplayCondition_far: 10000, // 最大距离
    distanceDisplayCondition_near: 0, // 最小距离
  },
};
// 盒子
const box = {
  type: 'box',
  style: {
    dimensionsX: 100, // 盒子长度
    dimensionsY: 100, // 盒子宽度
    dimensionsZ: 100, // 盒子高度
    fill: true, // 是否填充
    fillType: 'color', // 填充类型
    grid_lineCount: 8, // 网格数量
    grid_lineThickness: 2, // 网格宽度
    grid_cellAlpha: 0.1, // 填充透明度
    stripe_oddcolor: '#ffffff', // 条纹衬色
    stripe_repeat: 6, // 条纹数量
    checkerboard_oddcolor: '#ffffff', // 棋盘衬色
    checkerboard_repeat: 4, // 棋盘格数
    color: '#00FF00', // 颜色
    opacity: 0.6, // 透明度
    outline: true, // 是否边框
    outlineWidth: 1, // 边框宽度
    outlineColor: '#ffffff', // 边框颜色
    outlineOpacity: 0.6, // 边框透明度
    distanceDisplayCondition: false, // 是否按视距显示
    distanceDisplayCondition_far: 10000, // 最大距离
    distanceDisplayCondition_near: 0, // 最小距离
    clampToGround: false, // 是否贴地
  },
};

更新标绘地理坐标

drawControl.updateMarkerPosition(position, entity)
position是一个数组 [经度, 纬度, 高程]

删除标绘

drawControl.deleteMarker(entity)

获取所有标绘对象

drawControl.getEntities()
获得标绘实例(entity)列表，entity上有该标绘的属性

根据id获取标绘对象

drawControl.getEntityById()
根据id获得标绘实例(entity)entity上有该标绘的属性，该id是传入geojson的properties的attr属性中的id，
当多个id相同时，返回第一个匹配的entity

将标绘移到视野中心

drawControl.flyTo(entity)

获取所有标绘的geojson

drawControl.getGeoJson()

增加entity的事件监听器

drawControl.addEntityEventListener(type, action)

已废弃，请使用EntityEventHandler

参数名	类型	必填	默认值	说明
type	BaseMap.ScreenSpaceEventType	是	无	从BaseMap.ScreenSpaceEventType中取值
action	fucntion	是	无	回调函数

删除entity的事件监听器

drawControl.removeEntityEventListener(type, action)

已废弃，请使用EntityEventHandler

参数名	类型	必填	默认值	说明
type	BaseMap.ScreenSpaceEventType	是	无	从BaseMap.ScreenSpaceEventType中取值
action	fucntion	是	无	回调函数

删除全部的entity事件监听器

drawControl.removeAllEventHandler()

已废弃，请使用EntityEventHandler

删除全部的标绘

drawControl.removeAll()

drawControl 支持的编辑事件

draw.event

参数名	说明
EditStart	编辑模式下点击标绘触发
EditMovePoint	编辑模式下移动标绘触发
EditStop	编辑模式下点击其他地方，标绘失去编辑中状态时触发
EditRemovePoint	删除标绘时触发

drawControl 注册编辑事件

drawControl.on(EditEventType, fn)

参数名	类型	必填	默认值	说明
EditEventType	draw.event所列的类型	是	无	从draw.event中取值
fn	fucntion	是	无	回调函数

drawControl 注销编辑事件

drawControl.off(EditEventType, fn)

参数名	类型	必填	默认值	说明
EditEventType	draw.event所列的类型	是	无	从draw.event中取值
fn	fucntion	是	无	回调函数

drawControl 开启位置编辑模式

drawControl.startPositionEdit()

代码示例

地图上显示一个图标，并且监听开始编辑、移动结束、结束编辑事件

var drawControl = new CMSRMap.draw.DrawControl(viewer);
//drawControl.initDrawPanel();
var entity = drawControl.addMarkerByGeoJson({"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"图标点2","type":"billboard","edittype":"billboard","style":{"image":"http://localhost:3000/zysy/img/marker/mark3.png"},"attr":{"id":"xiaomo","name":"","remark":""}},"geometry":{"type":"Point","coordinates":[121.60156,31.241837,-0.02]}}]});
viewer.flyTo(entity);
function fn(...rest){console.log(rest)};
drawControl.on(CMSRMap.draw.event.EditStart, fn);
drawControl.on(CMSRMap.draw.event.EditMovePoint, fn);
drawControl.on(CMSRMap.draw.event.EditStop, fn);
drawControl.startPositionEdit();

drawControl 关闭位置编辑模式

drawControl.stopPositionEdit()

drawControl 平滑移动标绘

updateMarkerPositionWithAnimation(entity, positionDict, options)

通过viewer内部时钟平滑移动标绘

实例化参数

参数名	类型	必填	默认值	说明
entity	object	是	无	需要移动的entity
positionDict	object	是	无	坐标位置描述
positionDict.longitude	number	是	无	经度
positionDict.latitude	number	是	无	纬度
positionDict.bearing	number	是	无	目标与正北方向的角度差，顺时针为正
positionDict.height	number	是	无	海拔高度
options	object	否	无	配置项
options.duration	number	否	1	动画时间，单位秒，默认1秒

drawControl 设置可保留的尾迹

drawControl.usePath(entity, options)

设置标绘在updateMarkerPositionWithAnimation方法的动画中的尾迹，注意该方法是类方法

参数名	类型	必填	默认值	说明
entity	object	是	无	需要移动的entity
options	object	否	无	配置项
options.trailTime	number	否	undefined	尾迹显示的时间，单位秒
options.width	number	否	undefined	尾迹显示的宽度，单位像素
options.material	object	否	undefined	尾迹显示材质类型
options.material.type	string	否	undefined	尾迹显示材质类型，有glow和stripe

options.material.type 为 glow-remain 时

参数名	类型	必填	默认值	说明
options.material.glowPower	number	否	0.25	指定发光强度，以总线宽的百分比表示
options.material.taperPower	string	否	1	指定渐缩效果的强度，以占总线长的百分比表示。
如果为1.0或更高，则不使用锥度效果。
options.material.color	CMSRMap.BaseMap.Color	否	Color.WHITE	边缘颜色

示例

var drawControl = new CMSRMap.draw.DrawControl(viewer);
var entity = drawControl.addMarkerByGeoJson({"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"图标点2","type":"billboard","edittype":"billboard","style":{"image":"https://webapi.amap.com/images/car.png"},"attr":{"id":"xiaomo","name":"","remark":""}},"geometry":{"type":"Point","coordinates":[121.593178,31.246319,0]}}]})[0];
drawControl.useRemainPath(entity, {trailTime:2,material:{type:'glow-remain'}});
drawControl.updateMarkerPositionWithAnimation(entity, {longitude: 121.793178, latitude: 31.446319, bearing: 0},{duration:10});

drawControl 是否有设置可保留尾迹

drawControl.hasPath(entity) -> boolean

drawControl 移除可保留尾迹

drawControl.removePath(entity) -> void

DrawControl 设置尾迹

DrawControl.usePath(entity, options)

设置标绘在updateMarkerPositionWithAnimation方法的动画中的尾迹，注意该方法是类的静态方法

参数名	类型	必填	默认值	说明
entity	object	是	无	需要移动的entity
options	object	否	无	配置项
options.trailTime	number	否	undefined	尾迹显示的时间，单位秒
options.width	number	否	undefined	尾迹显示的宽度，单位像素
options.material	object	否	undefined	尾迹显示材质类型
options.material.type	string	否	undefined	尾迹显示材质类型，有glow和stripe

options.material.type 为 glow 时

参数名	类型	必填	默认值	说明
options.material.glowPower	number	否	0.25	指定发光强度，以总线宽的百分比表示
options.material.taperPower	string	否	1	指定渐缩效果的强度，以占总线长的百分比表示。
如果为1.0或更高，则不使用锥度效果。
options.material.color	CMSRMap.BaseMap.Color	否	Color.WHITE	边缘颜色

示例

import { draw, BaseMap } from '@cmsr/cmsr-map';
draw.DrawControl.usePath(entity, {
  trailTime: 7,
  width: 10,
  material: {
    type: 'glow',
    glowPower: 0.3,
    taperPower: 0.3,
    color: BaseMap.Color.fromCssColorString('#EEE8AA'),
  },
});

options.material.type 为 stripe 时

参数名	类型	必填	默认值	说明
options.material.orientation	CMSRMap.BaseMap.StripeOrientation	否	StripeOrientation.HORIZONTAL	指定条纹方向
options.material.evenColor	CMSRMap.BaseMap.Color	否	Color.WHITE	第一颜色
options.material.oddColor	CMSRMap.BaseMap.Color	否	Color.BLACK	第二颜色
options.material.offset	number	否	0	指定起始材料到图案的距离
options.material.repeat	number	否	1	条纹重复的次数

示例

import { draw, BaseMap } from '@cmsr/cmsr-map';
draw.DrawControl.usePath(entity, {
  resolution: 1,
  trailTime: 60 * 2,
  width: 10,
  material: {
    type: 'stripe',
    evenColor: BaseMap.Color.fromCssColorString('#ffff00'),
    oddColor: BaseMap.Color.fromCssColorString('rgba(255,255,0,0.1)'),
    repeat: 1,
    offset: 0.25,
    orientation: BaseMap.StripeOrientation.VERTICAL,
  },
});

示例2

var drawControl = new CMSRMap.draw.DrawControl(viewer);
var entity = drawControl.addMarkerByGeoJson({"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"图标点2","type":"billboard","edittype":"billboard","style":{"image":"https://webapi.amap.com/images/car.png"},"attr":{"id":"xiaomo","name":"","remark":""}},"geometry":{"type":"Point","coordinates":[121.593178,31.246319,0]}}]})[0];
drawControl.usePathRemain(entity, {trailTime:2,material:{type:'glow-remain'}});
drawControl.updateMarkerPositionWithAnimation(entity, {longitude: 121.793178, latitude: 31.446319, bearing: 0},{duration:10});

DrawControl 是否有设置尾迹

DrawControl.hasPath(entity) -> boolean

DrawControl 移除尾迹

DrawControl.removePath(entity) -> void

销毁方法

drawControl.destroy()

相机控制

CameraControl类

`CameraControl类`

相机控制类，下面接口说明中cameraControl代表类实例。

实例化参数

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值

`cameraControl.trackEntity(entity, options) -> void`

参数名	类型	必填	默认值	说明
entity	object	是	无	要视角追踪的entity
options	object	否	无	配置项
options.keepHeight	boolean	否	false	是否在初始化追踪时保持相机高度
options.height	boolean	否	undefined	设置初始化追踪时相机高度

追踪一个entity，相机视角将随entity位置变化而变化

示例

import {CameraControl} from '@cmsr/cmsr-map';
const cameraControl = new CameraControl(window.viewer);
cameraControl.trackEntity(carEntity, {keepHeight: true});

`cameraControl.stopTrackEntity() -> void`

停止追踪

`cameraControl.getTrackedEntity() -> void`

获取当前正在追踪的entity

`cameraControl.getCameraPosition() -> {longitude,latitude,height}`

获取相机位置

`cameraControl.getHeight() -> number`

获取相机高度

`cameraControl.setHeight(height) -> void`

设置相机高度

实例化参数

参数名	类型	必填	默认值	说明
height	number	是	无	高度(米)

`cameraControl.getCenter() -> {longitude,latitude}`

获取地图中心点

`cameraControl.setCenter(longitude, latitude) -> void`

设置地图中心点

`cameraControl.getZoomLevel() -> number`

获取地图层级

`cameraControl.setZoom(zoomLevel) -> void`

设置地图层级

参数名	类型	必填	默认值	说明
zoomLevel	number	是	无	地图层级

`cameraControl.getViewRect() -> ViewRect`

获取地图显示范围

ViewRect

属性名	类型	必填	默认值	说明
west	number	是	无	最小经度
south	number	是	无	最小纬度
east	number	是	无	最大经度
north	number	是	无	最大纬度

`cameraControl.setViewRect(viewRect) -> void`

设置地图显示范围

属性名	类型	必填	默认值	说明
viewRect	ViewRect	是	无	地图范围
viewRect.west	number	是	无	最小经度
viewRect.south	number	是	无	最小纬度
viewRect.east	number	是	无	最大经度
viewRect.north	number	是	无	最大纬度

示例

var cc = new CMSRMap.CameraControl(viewer);
var rect = {west: 121.56856570625415, south: 31.20275811669924, east: 121.61389029374591, north: 31.225437883300746};
cc.setViewByRect(rect);

`cameraControl.getOrientation() -> {heading,pitch,roll}`

获取相机视角

`cameraControl.setOrientation({heading,pitch,roll}) -> void`

设置相机视角

wms/wmts/wfs 加载

fileLoadControl.loadFile(fileUrl, fileType, viewer, needFlyTo = true, options)

加载文件

参数名	类型	必填	默认值	说明
fileUrl	string	是		文件url
fileType	string	是		文件类型 ["wms", "wmts", "wfs"]
viewer	object	是		map viewer
needFlyTo	boolean	否	true	是否加载后立刻显示到地图中心
options	boolean	否		额外可配置的图层属性
options.alpha	number	否	40	图层不透明度
options.rectangle	object	否	全球	图层范围

fileLoadControl.unloadFile(file, fileType, viewer)

移除文件

参数名	类型	必填	说明
file	object	是	loadFile后得到的file对象
fileType	string	是	文件类型 ["wms", "wmts", "wfs"]
viewer	object	是	map viewer

文件加载

fileLoadControl.loadFile(fileUrl, fileType, viewer, needFlyTo = true, options)

加载文件

参数名	类型	必填	默认值	说明
fileUrl	string	是		文件url
fileType	string	是		文件类型 ["json", "geojson", "topojson", "gltf", "glb", "3dtiles"]
viewer	object	是		map viewer
needFlyTo	boolean	否	true	是否加载后立刻显示到地图中心
options	boolean	否		额外可配置的图层属性
options.alpha	number	否	40	图层不透明度
options.fillColor	string	否		图层底色
options.strokeAlpha	number	否	100	符号不透明度
options.strokeColor	string	否		符号颜色
~~options.strokeWidth~~	number	否	2	符号粗细 px
options.clampToGround	boolean	否	false	是否贴地

fileLoadControl.unloadFile(file, fileType, viewer)

移除文件

参数名	类型	必填	说明
file	object	是	loadFile后得到的file对象
fileType	string	是	文件类型 ["json", "geojson", "topojson", "gltf", "glb", "3dtiles"]
viewer	object	是	map viewer

图层样式编辑

fileEditControl.editFile(file, fileType, options)

编辑文件

参数名	类型	必填	默认值	说明
file	object	是		loadFile后得到的file对象
fileType	string	是		文件类型 ["wms", "wmts", "wfs", "json", "geojson", "topojson", "gltf", "glb"]
options	boolean	否		额外可配置的图层属性
options.alpha	number	否	40	图层不透明度
options.fillColor	string	否		图层底色
options.strokeAlpha	number	否	100	符号不透明度
options.strokeColor	string	否		符号颜色
~~options.strokeWidth~~	number	否	2	符号粗细 px

fileLoadControl.flyToFile(file, fileType, viewer, options)

定位至文件

参数名	类型	必填	说明
file	object	是
fileType	string	是
viewer	object	是	map viewer
options.pitch	number	否	俯角为负数取值为 0到-90
options.range	number	否	相机到图层中心点的距离

空间量测

测量开启后，左键加点，右键完成

measureControl.measurePoint()
开启坐标测量
measureControl.measureDistance()
开启距离测量
measureControl.measure3dTiles(options)
开启3d tiles上的测量，大范围测量地形时可能数值不准

参数名	类型	必填	默认值	说明
options	object	是
options.showSpaceDistance	boolean	是	true	是否显示空间距离
options.showHorizontalDistance	boolean	是	true	是否显示水平距离
options.showVerticalDistance	boolean	是	true	是否显示垂直距离

measureControl.measureAltitudeDiff()
开启高差测量
measureControl.measureArea()
开启面积测量
measureControl.clearMeasure()
删除地图上的测量标绘

3dtiles

3dtiles平移

tilesEditor.moveTo(tileLayer, longitude, latitude, height) static
@parm: tileLayer: 3dtiles 图层 (loadFile返回值)
@parm：longitude：经度
@parm：latitude：纬度
@parm: height: 高度 defult 地形高度

3dtiles缩放

tilesEditor.scale(tileLayer, scaleFac) static
@parm: tileLayer: 3dtiles 图层
@parm：scaleFac：缩放比例

3dtiles旋转工具

tileEditorControl.enableTileRotate(tilelayer)

启用旋转工具，使用鼠标编辑旋转模型

@parm: tileLayer: 3dtiles 图层 (loadFile返回值)

tileEditorControl.disableTileRotate()

关闭旋转工具，结束鼠标编辑

3dtiles平移工具

tileEditorControl.enableTileTranslate(tilelayer)

启用旋转工具，使用鼠标编辑平移模型

@parm: tileLayer: 3dtiles 图层 (loadFile返回值)

tileEditorControl.disableTileTranslate()

关闭平移工具，结束鼠标编辑

layer 图层管理

LayerControl类

`layer.LayerControl`

飞行漫游控制类，下面接口说明中layerControl代表类实例。

实例化参数

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值
options	object	否	无	配置项
options.autoCenter	object	否	false	是否在从不可见切换到可见时自动定位到图层*

实例化示例

var layerControl = new CMSRMap.layer.LayerControl(viewer);

`layerControl.addOperationalLayer(layerConfig) -> layer`

参数名	类型	必填	默认值	说明
layerConfig	object	是	无	图层配置

添加图层，返回单个图层实例，返回的layer.config 中含有该图层的id

示例

layers.addOperationalLayer( {
    pid: 3050, // 图层的文件夹id，如无可不填
    type: 'kml', // 图层类型
    name: '省界线2', // 图层名称
    url: 'http://localhost:3000/zysy/data/kml/province.kml', // 图层链接
    symbol: { // 图层样式配置
            styleOptions: {
            color: '#00FF00',
            width: 2,
        },
    },
    visible: true, // 图层加载时是否显示
    flyTo: true // 图层加载后定位到图层
});

`layerControl.removeOperationalLayer(id) -> void`

参数名	类型	必填	默认值	说明
id	number	是	无	图层id

根据移除图层

`layerControl.getLayerById(id) -> layer`

参数名	类型	必填	默认值	说明
id	number	是	无	图层id

根据id返回图层

`layerControl.getLayers() -> layerDict`

获得所有图层

`layerControl.centerAtById(id) -> void`

参数名	类型	必填	默认值	说明
id	number	是	无	图层id

定位到图层

`layerControl.getLayerVisible(id) -> boolean`

参数名	类型	必填	默认值	说明
id	number	是	无	图层id

根据id返回图层是否设置为显示

`layerControl.updateLayerVisibleById(id,visible) -> void`

参数名	类型	必填	默认值	说明
id	number	是	无	图层id
visible	visible	是	无	是否可见

根据id设置图层是否显示

`layerControl.getBasemap() -> layer`

获取当前底图

`layerControl.changeBaseMap(name) -> void`

参数名	类型	必填	默认值	说明
name	string	是	无	initviewer basemaps 中图层配置项里的name

切换当前底图

定位

~~layer.coordLocation(viewer, locationInfo)~~

~~已废弃，经纬度定位(异步)~~

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值
locationInfo	array	是	无	经纬度数组，单个经纬度形如 [ 经度, 纬度]

示例

CMSRMap.layerControl.coordLocation(viewer,[[116.3905,39.92195],[116.3505,39.917],[116.403,39.88]]);

viewer.flyTo(target)

图层对象定位

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值
target	object	是	无	fileLoadControl.loadFile 的返回参数，或者自定义标绘的entity

layer.locateByFeature(viewer, feature, options)

要素定位

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值
feature	geojson	是	无	geojson格式的对象，需要第一层type为FeatureCollection
options	object	否	无	配置项
options.needFlyTo	boolean	否	false	是否需要飞行动画
options.height	number	否	5000	相机高度，注意仅在坐标只有一个时可用
options.orientation	object	否	{heading: 360,pitch: -90,roll: 0}	相机角度

示例

CMSRMap.layerControl.locateByFeature(viewer,{"type":"FeatureCollection","features":[
            {"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[116.39070510864258,39.9027571616608]}},
            {"type":"Feature","properties":{},"geometry":{"type":"LineString","coordinates":[[116.4605712890625,40.01367962745832],[116.47653579711913,40.013153729849954],           [116.49387359619142,39.99737491734879],[116.51052474975586,40.01210192247637],[116.52975082397461,40.02091030864033],[116.54794692993164,40.026825750639496]]}},    {"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[116.27792358398436,39.845449231287226],[116.28135681152342,39.83068633533497],            [116.33010864257814,39.832268225979355],[116.31088256835936,39.854937988531276],[116.27792358398436,39.845449231287226]]]}},
            {"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[116.20634078979491,39.92277071156262],[116.20548248291016,39.91579296675271],[116.22264862060547,39.91789953067524],[116.2217903137207,39.92303400876581],[116.20634078979491,39.92277071156262]]]}},
            {"type":"Feature","properties":{},"geometry":{"type":"LineString","coordinates":[[116.44821166992188,39.86099956341943],[116.47602081298827,39.836486422931394],[116.4997100830078,39.816975090490004],[116.52099609375,39.83253187087836],[116.54056549072267,39.847294370139394]]}}
        ]})

layer.locateByCoordinates(viewer, positionArray, options)

坐标定位

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值
positionArray	object	是	无	经纬度数组，形如[[120,30],[110,20]]
options	object	否	无	配置项
options.needFlyTo	boolean	否	false	是否需要飞行动画
options.height	number	否	5000	相机高度，注意仅在坐标只有一个时可用
options.orientation	object	否	{heading: 360,pitch: -90,roll: 0}	相机角度

示例

CMSRMap.layer.locateByCoordinates(viewer, [[120,30],[110,20]],{orientation:{heading: 45, pitch: -70}, needFlyTo: true})

roam 飞行漫游

使用方法

该模块包含UI和代码逻辑，主要依靠RoamControl类实现主要功能逻辑，zysy/widgets/roamLine包含飞行路线列表弹窗样式代码，zysy/widgets/roamFly包含飞行信息弹窗样式代码，如有修改样式的需求，可以直接修改上述两个文件夹中的文件。

RoamControl类

`roam.RoamControl`

飞行漫游控制类，下面接口说明中roamControl代表类实例。

实例化参数

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值
lineList	Array	是	无	飞行路线列表
modelDefine	object	否	默认有model_car和model_air	模型定义

实例化示例

var modelDefine = {
    "model_car": {
        "show": true, // 是否显示
        "uri": "http://localhost:3000/zysy/data/gltf/qiche.gltf", // 模型位置
        "scale": 0.2, // 模型缩放比例
        "minimumPixelSize": 50 // 模型最小像素大小
    },
    "model_air": {
        "show": true,
        "uri": "http://localhost:3000/zysy/data/gltf/feiji.glb",
        "scale": 0.1,
        "minimumPixelSize": 50
    }
};
var lineList = [
    {
        "id": "0911150734",// 唯一标记飞行路线的id
        "name": "贴地路线",// 飞行路线名称
        "geometry": { // 地理信息
            "type": "LineString", // 固定为 LineString
            // coordinates为坐标点集，单个点为数组，值分别为 [经度, 纬度, 高程]
            "coordinates": [[116.043233, 30.845286, 392.48], [116.046833, 30.846863, 411.33], [116.052137, 30.848801, 439.45], [116.060838, 30.850918, 442.91], [116.069013, 30.852035, 435.14], [116.18739, 30.854441, 244.53], [116.205214, 30.859332, 300.96]]
        },
        "properties": {
            "edittype": "polyline", // 固定为polyline
            "name": "线", // 固定为线
            "position": {
                "height": true,  // 是否显示高程
                "minCount": 2, // 最少需几个点
            },
            "style": {"color": "#ffff00", "width": 3, "show": true}, // 路线样式
            "attr": {
                "id": "0911150734",// 唯一标记飞行路线的id
                "name": "贴地路线", // 飞行路线名称
                "model": "model_car", // 模型类型
                "clampToGround": true, // 是否贴地
                "showGroundHeight": false, // 离地高度
                "showLabel": false, // 是否显示轨迹名
                "showLine": true, // 是否显示轨迹
                "showShadow": false, // 是否显示投影
                "shadowType": "wall", // 投影类型，cylinder圆锥，wall线下轨迹
                "cameraType": "gs", // 飞行时相机视角配置，gs跟随视角，sd锁定视角，dy第一视角
                "followedX": 50, // 锁定视角时距离
                "followedZ": 10, // 锁定视角时高度
                "clockLoop": false, // 是否循环播放
                "remark": "备注"
            },
            "type": "polyline", // 固定为polyline
            "speed": 160 // 飞行速度 ，km/h
        }
    },
    {
        "id": "0629161546",
        "name": "城市飞行",
        "geometry": {
            "type": "LineString",
            "coordinates": [[117.128256, 31.852721, 600], [117.163191, 31.853176, 600], [117.181754, 31.854023, 600]]
        },
        "properties": {
            "edittype": "polyline",
            "name": "线",
            "position": {"height": true, "minCount": 2},
            "style": {
                "color": "#ffff00",
                "width": 3,
                "show": false,
                "opacity": 0.5,
                "lineType": "solid",
                "outline": false,
                "outlineColor": "#ffffff",
                "outlineWidth": 2,
                "clampToGround": false,
                "zIndex": 0
            },
            "attr": {
                "id": "0629161546",
                "name": "城市飞行2",
                "model": "model_air",
                "showGroundHeight": true,
                "showLabel": false,
                "showLine": true,
                "showShadow": true,
                "shadowType": "cylinder",
                "cameraType": "gs",
                "followedX": 50,
                "followedZ": 10,
                "clockLoop": false,
                "remark": ""
            },
            "type": "polyline"
        }
    },
    {
        "id": "0617105731",
        "name": "山区漫游",
        "geometry": {
            "type": "LineString",
            "coordinates": [[116.025851, 30.848967, 1311.6], [116.098851, 30.833606, 1916.2], [116.154079, 30.86119, 1693.3], [116.171732, 30.927008, 1588.6], [116.142015, 30.980604, 1963.6], [116.080821, 31.001745, 2078.7], [116.022691, 30.965067, 1756.5], [116.016616, 30.904896, 1573.4]]
        },
        "properties": {
            "edittype": "polyline",
            "name": "线",
            "position": {"height": true, "minCount": 2},
            "style": {
                "color": "#ffff00",
                "show": false,
                "lineType": "solid",
                "width": 4,
                "clampToGround": false,
                "outline": false,
                "outlineColor": "#ffffff",
                "outlineWidth": 2,
                "opacity": 1,
                "zIndex": 0
            },
            "attr": {
                "id": "0617105731",
                "name": "山区漫游",
                "point": "",
                "showLabel": false,
                "showLine": false,
                "showShadow": false,
                "showHeightWarn": false,
                "warnHeight": 500,
                "cameraType": "dy",
                "followedX": 50,
                "followedZ": 10,
                "remark": ""
            },
            "type": "polyline",
            "speed": 300
        }
    },
    {
        "id": "0617110137",
        "name": "工业区",
        "geometry": {
            "type": "LineString",
            "coordinates": [[106.714474, 26.838533, 1303.3], [106.714448, 26.839618, 1309.4], [106.714389, 26.840687, 1310.8], [106.714685, 26.842783, 1295], [106.715975, 26.846232, 1279.7], [106.718505, 26.852513, 1278.6]]
        },
        "properties": {
            "edittype": "polyline",
            "name": "线",
            "position": {"height": true, "minCount": 2},
            "style": {
                "color": "#ffff00",
                "show": false,
                "lineType": "solid",
                "width": 4,
                "clampToGround": false,
                "outline": false,
                "outlineColor": "#ffffff",
                "outlineWidth": 2,
                "opacity": 1,
                "zIndex": 0
            },
            "attr": {
                "id": "0617110137",
                "name": "工业区",
                "point": "point",
                "showLabel": false,
                "showLine": false,
                "showShadow": false,
                "showHeightWarn": false,
                "warnHeight": 500,
                "cameraType": "dy",
                "followedX": 200,
                "followedZ": 50,
                "model": "",
                "remark": ""
            },
            "type": "polyline"
        }
    },
];
var roamControl = new CMSRMap.roam.RoamControl(viewer, {
    lineList,
    modelDefine,
});
roamControl.start();

`roamControl.viewer`

传入的viewer

`roamControl.lastEditEntity`

正在编辑的entity

`roamControl.isOnDraw`

是否正在编辑

`roamControl.arrFlyTable`

传入的lineList，路线列表

`roamControl.modelDefine`

传入的modelDefine，模型定义

`roamControl.roamLineWindow`

路线列表弹窗window实例

`roamControl.roamLineWidget`

路线列表弹窗widget实例

`roamControl.roamFlyWindow`

飞行路线信息弹窗window实例

`roamControl.roamFlyWidget`

飞行路线信息弹窗widget实例

`roamControl.start() -> void`

初始化飞行路线列表弹窗

`roamControl.toRoamFly(lineData) -> void`

传入路线数据进入路线漫游

参数名	类型	必填	默认值	说明
lineData	object	是	无	lineList中的一项

`roamControl.destroy() -> void`

销毁roamControl

`roamControl.updateAttr2map(attr) -> void`

更新图上信息

参数名	类型	必填	默认值	说明
attr	object	是	无	lineData的properties部分

传入路线数据进入路线漫游

`roamControl.updateGeo2map(coords, withHeight) -> void`

参数名	类型	必填	默认值	说明
coords	Array	是	无	坐标列表
withHeight	Array	是	无	coords列表是否包含高程信息

更新图上的几何形状、坐标等

`roamControl.getGeoJson(id) -> geojson`

参数名	类型	必填	默认值	说明
id	string	是	无	路线id

返回路线的geojson

`roamControl.jsonToLayer(json, isClear, isFly) -> entity`

加载geojson，返回路线entity实例

`roamControl.deleteAll() -> void`

删除地图上所有路线及模型

`roamControl.deleteEntity(id) -> void`

参数名	类型	必填	默认值	说明
id	string	是	无	路线id

根据id在地图上删除对应路线

`roamControl.deleteCurrentEntity() -> void`

在地图上删除当前编辑路线

`roamControl.hasEdit(value) -> void`

参数名	类型	必填	默认值	说明
value	boolean	是	无	路线是否可编辑

路线是否可编辑

`roamControl.saveForGeoJson(lineData) -> file`

参数名	类型	必填	默认值	说明
lineData	Array	是	无	lineList中的一项

导出geojson格式的路线列表

`roamControl.toRoamLine() -> void`

打开路线列表弹窗

轨迹

TrackPlayControl类

`track.TrackPlayControl`

轨迹回放控制类，下面接口说明中trackPlayControl代表类实例。

实例化参数

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值
options	object	否	无	配置项
options.trackStyle	object	否	DefaultTrackStyle	轨迹默认样式
options.showTimeLine	boolean	否	false	是否显示默认时间轴
options.clock.multiplier	number	否	10	轨迹播放倍数

参数 DefaultTrackStyle

const DefaultTrackStyle = {
  billboard: {
    show: false,
    image: 'zysy/data/img/car.png', // 图片地址
    scale: 1, // 缩放比例
    rotation: 0,
    width: undefined, // 图片宽(像素)
    height: undefined, // 图片高(像素)
  },
  model: {
    show: true,
    uri: 'zysy/data/gltf/qiche.gltf', // 模型地址
    scale: 1, // 缩放比例
    minimumPixelSize: 24, // 最小像素大小
  },
  path: {
    // lineType: 'dash',
    color: 'rgba(255,255,0, 0.5)', // 尾迹颜色
    width: 8, // 尾迹宽度
    show: true,
  },
  line: {
    show: true,
    width: 8, // 轨迹宽度
    material: 'rgba(8,112,247, 0.25)', // 轨迹颜色
    loop: false, // 是否循环播放
  },
  label: {
    font: 'bold small-caps normal 18px 楷体', // 标注字体
    style: BaseMap.LabelStyle.FILL, // 标注字体
    fillColor: BaseMap.Color.fromCssColorString('rgba(255,255,0, 1)'), // 标注颜色
    horizontalOrigin: BaseMap.HorizontalOrigin.CENTER, // 标注水平位置
    verticalOrigin: BaseMap.VerticalOrigin.TOP, // 标注垂直位置
    pixelOffset: new BaseMap.Cartesian2(0, 0), // 标注位移
    eyeOffset: new BaseMap.Cartesian3(0, 0, -50), // 标注视觉位移
  },
};

`trackPlayControl.play() -> void`

播放轨迹回放

`trackPlayControl.pause() -> void`

暂停轨迹回放

`trackPlayControl.setMultiplier(value) -> void`

设置轨迹回放速率

参数名	类型	必填	默认值	说明
value	number	是	1	轨迹回放速率

`trackPlayControl.setCurrentTime(date) -> void`

设置当前时间

参数名	类型	必填	默认值	说明
date	Date	是	无	当前时间

`trackPlayControl.addTrack() -> void`

添加轨迹

trackPlayControl.addTrack({
    id: id, // 轨迹id
    name: '加班呢啊', // 轨迹名称
    autoHeading: false,
    trackStyle: { // 同初始化时设置DefaultTrackStyle
        model: {
            show: true,
            uri: 'zysy/data/gltf/qiche.gltf',
            scale: 1,
            minimumPixelSize: 64,
        },
        path: {
            // lineType: 'dash',
            color: 'rgba(255,255,0, 1)',
            width: 12,
            show: true,
        },
        label: {
            // text: '加班呢啊',
        },
    },
    popup: {
        anchor: [0, -20], // 左右、上下的偏移像素值。
        timeRender: true, // 是否实时更新html
        html: (entity, currentTime) => {
        const html = '<div>加班呢</div>';
        return html;
        },
    },
    data: playPoints,
});
// playPoints 是由 newPoint 组成的数组
const newPoint = {
    id: modifiedPoint.gpsid,
    longitude: modifiedPoint.modi_longitude,
    latitude: modifiedPoint.modi_latitude,
    createTime: point.collect_time,
    bearing: point.azimuth,
    speed: point.speed,
    altitude: point.height,
};

轨迹回放示例

var playPoints = [
    {
        "id": "29477",
        "longitude": 121.598349999999996,
        "latitude": 31.255749999999999,
        "createTime": "2020-05-29 10:21:01",
        "bearing": 180.599999999999994,
        "speed": 52.039999999999999,
        "altitude": 8.039999999999999
    },
    {
        "id": "29513",
        "longitude": 121.598083000000003,
        "latitude": 31.252967000000002,
        "createTime": "2020-05-29 10:21:37",
        "bearing": 186.199999999999989,
        "speed": 17.350000000000001,
        "altitude": 7.990000000000000
    },
    {
        "id": "29531",
        "longitude": 121.599249999999998,
        "latitude": 31.253050000000002,
        "createTime": "2020-05-29 10:21:56",
        "bearing": 70.120000000000005,
        "speed": 39.079999999999998,
        "altitude": 7.450000000000000
    },
    {
        "id": "29567",
        "longitude": 121.600166999999999,
        "latitude": 31.253333000000001,
        "createTime": "2020-05-29 10:22:32",
        "bearing": 70.849999999999994,
        "speed": 11.390000000000001,
        "altitude": 7.420000000000000
    }
];
var trackPlayControl = new CMSRMap.track.TrackPlayControl(window.viewer);
trackPlayControl.addTrack({
    id: 'id',
    name: '加班呢啊',
    autoHeading: false,
    data: playPoints,
});
trackPlayControl.play();

`trackPlayControl.getTrackItemById(id) -> TrackItem`

获取轨迹

参数名	类型	必填	默认值	说明
id	string \| number	是	无	addTrack时设置的id

`trackPlayControl.removeTrackById(id) -> TrackItem`

移除轨迹

参数名	类型	必填	默认值	说明
id	string \| number	是	无	addTrack时设置的id

`trackPlayControl.hideAllPopup() -> void`

隐藏全部popup

`trackPlayControl.removeAllTrack() -> void`

删除所有轨迹

`trackPlayControl.removeTimeLine() -> void`

删除事件轴

`trackPlayControl.destroy() -> void`

销毁对象

鹰眼地图

OverflowControl类

`OverflowControl类`

鹰眼控制类，下面接口说明中ovflowControl代表类实例。

实例化参数

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值
options	object	是	无	鹰眼初始化配置
options.container	string\|HTMLElement	是	无	鹰眼地图的容器
options.outline	boolean	否	true	是否显示边框
options.outlineColor	cssColorString	否	rgba(68,68,187,0.25)	视野框边框颜色
options.outlineWidth	number	否	5	视野框边框宽度，单位像素
options.fillColor	cssColorString	否	rgba(145,163,216,0.25)	视野框填充颜色
options.basemaps	Array	否	initViewer时配置的basemaps	鹰眼地图显示的地图，配置同initViewer的basemaps

示例

var overviewControl = new CMSRMap.OverviewControl(viewer, {
    container: document.getElementById('eye'),
    outline: true,
    outlineColor: '#66ccff',
    outlineWidth: 2,
    fillColor: 'rgba(145,163,216,0.25)',
    basemaps: [
        {
            name: '高德',
            type: 'www_gaode',
            crs: 'gcj',
            layer: 'vec',
            visible: true,
        }
    ]
});

`ovflowControl.destroy() -> void`

销毁ovflowControl

地图搜索

SpatialPropertyQuerier类

`SpatialPropertyQuerier类`

地图搜索类，下面接口说明中spatialPropertyQuerier代表类实例。

实例化参数

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值

`spatialPropertyQuerier.initSpatialPropertyQuerier(queryConfig) -> void`

启动地图搜索弹窗

示例


const layerList = [{
  name: '样例数据',
  // wfs服务地址
  url: 'http://localhost:8080/geoserver/wfs',
  // wfs服务配置
  parameters: {
    service: 'WFS',
    request: 'GetFeature',
    typeName: 'zysy3d:t_data_querytest',
    version: '1.0.0',
    outputFormat: 'application/json',
    maxFeatures: 200,
  },
  // 搜索结果点击时是否显示弹窗
  popup: 'all',
  label: {},
}];

const queryConfig = {
  layerList,
  // 搜索结果列表配置
  tableColumns: [
    {
      title: '序号',
      sortable: false,
      align: 'center',
      width: 50,
      formatter(value, row, index) {
        return index + 1;
      },
    },
  ],
  // 搜索哪些字段，不填则搜索全部字段
  queryField: {
    // namefield: ['lane_id', 'road_id'],
    // 指定时间字段
    // timefield: 'time',
  },
  success: console.log,
};
// console.log('queryConfig', queryConfig);
const querier = new SpatialPropertyQuerier(window.viewer);
querier.initSpatialPropertyQuerier(queryConfig);

`spatialPropertyQuerier.destroy() -> void`

销毁spatialPropertyQuerier

html控件

`DivPoint`类

html控件类，下面接口说明中divPoint代表类实例。

实例化参数

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值
options	object	是	无	初始化配置
options.html	string\|HTMLElement	是	无	显示在地图上的内容
options.position	Cartesian3	是	无	显示的坐标地址

示例

// 初始化
var divPoint = new CMSRMap.DivPoint(
    viewer,
    {
        html:'<div id="container">html标记</div>',
        // (经度, 纬度, 海拔)
        position: CMSRMap.BaseMap.Cartesian3.fromDegrees(120, 31.5)
    }
);

// 挂载vue组件
// 注意div-point的div容器设置了 css属性 pointer-events: none; 会使点击事件无效，如需点击事件可自行覆盖该属性
import Counter from './Counter.vue';
import Vue from 'vue';

var divPoint = new CMSRMap.DivPoint(viewer,{html:'<div id="container">文字</div>',  position: Cesium.Cartesian3.fromDegrees(
    120, // 经度
    31.5, // 纬度
  )});
setTimeout(() => {
  const CounterComponent = Vue.extend(Counter);
  new CounterComponent().$mount('#container');
}, 60);

// Counter.vue
<template>
  <div class="counter-con">
    <div>{{num}}</div>
    <el-button class="button" @click="incr">自增加一</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    incr() {
      this.num++;
    },
  },
};
</script>

`divPoint.setVisible(visible) -> void`

参数名	类型	必填	默认值	说明
visible	boolean	是	无	显示还是隐藏html

显示隐藏html

`divPoint.destroy() -> void`

销毁divPoint

`LabelDivPoint`类

html控件类，下面接口说明中labelDivPoint代表类实例。

实例化参数

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值
options	object	是	无	初始化配置
options.labelDivUrl	string	是	无	文字标注GeoJson数据
options.polygonShowBool	boolean	否	false	文字标注外部矩形显示
options.labelId	string	否	ID	文字标注属性中的ID取值，需为唯一值
options.labelContent	string	否	NAME	文字标注内容取值
options.direction	string	否	DIRECTION	文字标注方向取值，1表示自西向东，2表示自东向西
options.heightToScale	Array	否	[ { height: 20, scale: 1 }, { height: 40, scale: 0.8 },{ height: 60, scale: 0.6 },{ height: 80, scale: 0.4 },{ height: 160, scale: 0.2 }, ];	对不同高度控制显示文字框的缩放级别，height表示高度，scale表示显示文字标注缩放级别
options.labelColor	string	否	'RGB(204,204,204)'	文字颜色
options.labelBkgColor	string	否	'RGBA(0,0,0,0)'	文字背景颜色
options.labelFontFamily	string	否	'Microsoft YaHei'	文字字体
options.labelFontSize	string	否	'14px'	文字默认原始字体大小

示例

// 初始化
      var labelDivPoint = new CMSRMap.LabelDivPoint(viewer, {
        labelDivUrl: labelJson,
        polygonShowBool :false,
        labelContent:"VALUE",
        labelId:"ID",
      });

labelDivPoint.show()

显示labelDivPoint

labelDivPoint.destroy() -> void

销毁labelDivPoint

Entity事件

`EntityEventHandler`类

Entity事件类，下面接口说明中entityEventHandler代表类实例。

实例化参数

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值
options	object	是	无	初始化配置
options.handleScreen	boolean	否	false	是否在未捕捉到entity时触发事件，即触发地图的单击、双击等等，并非所有事件都可用于地图，例如拖拽事件不能用于地图

示例

// 初始化
var entityEventHandler = new CMSRMap.EntityEventHandler(viewer, { handleScreen: true });
entityEventHandler.addEntityEventListener(CMSRMap.EntityEventHandler.EventTypes.LEFT_CLICK, (entity, screenPosition, coordinates) => console.log(entity, screenPosition, coordinates));
var ee = new CMSRMap.EntityEventHandler(viewer);
ee.addEntityEventListener('MOUSE_LEAVE',(...rest)=>{console.log('MOUSE_LEAVE',rest)});

`entityEventHandler.addEntityEventListener(type, action)`

增加entity的事件监听器，注意需要entity所在drawControl开启positionEdit，才可以拖拽。
事件类型包括单击、双击、右击、鼠标移入、鼠标移出、鼠标在标绘上移动、拖拽开始、拖拽结束、拖拽中等等。

参数名	类型	必填	默认值	说明
type	EntityEventHandler.EventTypes	是	无	从EntityEventHandler.EventTypes中取值
action	fucntion	是	无	回调函数

// 拖拽示例
var drawControl = new CMSRMap.draw.DrawControl(viewer);
var entity = drawControl.addMarkerByGeoJson({"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"图标点2","type":"billboard","edittype":"billboard","style":{"image":"https://webapi.amap.com/images/car.png"},"attr":{"id":"xiaomo","name":"","remark":""}},"geometry":{"type":"Point","coordinates":[121.60156,31.241837,-0.02]}}]})[0];
viewer.flyTo(entity);
drawControl.startPositionEdit();
var ee = new CMSRMap.EntityEventHandler(viewer);
ee.addEntityEventListener('DRAG',(...rest)=>{console.log('DRAG',rest)});

`entityEventHandler.removeEntityEventListener(type, action)`

删除entity的事件监听器

参数名	类型	必填	默认值	说明
type	EntityEventHandler.EventTypes	是	无	从EntityEventHandler.EventTypes中取值
action	fucntion	是	无	回调函数

`entityEventHandler.removeAllEventHandler()`

删除全部的entity事件监听器

`entityEventHandler.destroy() -> void`

销毁entityEventHandler

Camera事件

`CameraEventHandler`类

相机事件控件类，下面接口说明中cameraEventHandler代表类实例。

实例化参数

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值

示例

// 初始化
var ce = new CMSRMap.CameraEventHandler(viewer);
function callback(...rest){
  console.log('coco', rest);
}
ce.addEventListener('CHANGE_HEIGHT',callback);

`cameraEventHandler.addEventListener(type, action)`

增加事件监听。

参数名	类型	必填	默认值	说明
type	CameraEventHandler.EventTypes	是	无	CameraEventHandler.EventTypes中取值
action	fucntion	是	无	回调函数

CameraEventHandler.EventTypes = {
  CHANGE: 'CHANGE', // 相机变化即地图的高度或者可视区域变化
  CHANGE_HEIGHT: 'CHANGE_HEIGHT', // 高度变化
  CHANGE_ZOOM_LEVEL: 'CHANGE_ZOOM_LEVEL', // 层级变化
  MOVE_START: 'MOVE_START', // 相机开始移动
  MOVE_END: 'MOVE_END', // 相机停止移动
};

`cameraEventHandler.removeEventListener(type, action)`

删除事件监听器。

参数名	类型	必填	默认值	说明
type	CameraEventHandler.EventTypes	是	无	CameraEventHandler.EventTypes中取值
action	fucntion	是	无	回调函数

`cameraEventHandler.destroy() -> void`

销毁cameraEventHandler

工具方法

canvas坐标系转经纬度

CMSRMap.utils.canvasPositionToCoordinates(viewer,position)

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值
position	object	是	无	{x:600,y:240} canvas上鼠标点击的位置

示例

CMSRMap.utils.canvasPositionToCoordinates(viewer,{x:551,y:260});

经纬度转canvas坐标系

CMSRMap.utils.coordinatesToCanvasPosition(viewer,position)

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值
position	object	是	无	[经度, 纬度]

示例

CMSRMap.utils.coordinatesToCanvasPosition(viewer,[120,30]);

内部cartesian3坐标系转经纬度

CMSRMap.utils.cartesian3ToCoordinates(viewer, position)

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值
cartesian3	object	是	无	内部3维坐标系 BaseMap.Cartesian3

示例

CMSRMap.utils.cartesian3ToCoordinates(viewer, cartesian3);

获取entity经纬度

CMSRMap.utils.getEntityCoordinate(viewer, entity)

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值
entity	object	是	无	entity

示例

CMSRMap.utils.getEntityCoordinate(viewer, entity);

是否有地形

CMSRMap.utils.hasTerrain(viewer)

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值

示例

CMSRMap.utils.hasTerrain(viewer);

刷新popup位置

CMSRMap.utils.refreshPopupPosition(viewer)

参数名	类型	必填	默认值	说明
viewer	object	是	无	initViewer函数的返回值

示例

CMSRMap.utils.refreshPopupPosition(viewer);

注意事项

不要把viewer设置到vue的data或者compute之类的属性中，不要让vue监听viewer的数据变化，否则可能导致性能问题
尽量重复利用viewer，多次生成销毁viewer而不刷新页面可能造成内存溢出
cesium 是3维引擎，2维模式下容易出现问题，请尽量使用3维模式，可以在3维模式下禁止旋转来模仿2维，定位类接口因为flyTo接口可能会改变视角，如果要保持俯仰角为90度，可以使用经纬度定位。
```
// 模仿2维常用代码
viewer.scene.mode = 3; //使用3维地图
viewer.scene.screenSpaceCameraController.enableTilt = false; //禁止旋转
// viewer.scene.screenSpaceCameraController.enableRotate = false; //禁止拖动
```

码农公寓

cmsr-map sdk 文档

如何使用

script 标签引入

node_modules 引入

提供的API

地图加载

代码示例

初始化地图

示例 options.viewerConfig.center

地图图层配置（basemaps）

目前支持的 basemaps type 类型

basemaps各type的可选项

xyz 格式地址的瓦片图层使用方式

OGC 标准 wms 服务图层使用方式

倾斜摄影 3dtiles 模型

basemaps示例

标绘编辑

标绘的命名空间放在draw下

设置标绘对象的popup弹窗

设置标绘对象的水波纹

获取图形顶点经纬度集合

手动绘制图形

注意

启动标绘窗口

从geojson加载标绘

更新标绘属性

更新标绘地理坐标

删除标绘

获取所有标绘对象

根据id获取标绘对象

将标绘移到视野中心

获取所有标绘的geojson

增加entity的事件监听器

删除entity的事件监听器

删除全部的entity事件监听器

删除全部的标绘

drawControl 支持的编辑事件

drawControl 注册编辑事件

drawControl 注销编辑事件

drawControl 开启位置编辑模式

drawControl 关闭位置编辑模式

drawControl 平滑移动标绘

drawControl 设置可保留的尾迹

drawControl 是否有设置可保留尾迹

drawControl 移除可保留尾迹

DrawControl 设置尾迹

DrawControl 是否有设置尾迹

DrawControl 移除尾迹

销毁方法

相机控制

CameraControl类

CameraControl类

cameraControl.trackEntity(entity, options) -> void

cameraControl.stopTrackEntity() -> void

cameraControl.getTrackedEntity() -> void

cameraControl.getCameraPosition() -> {longitude,latitude,height}

cameraControl.getHeight() -> number

cameraControl.setHeight(height) -> void

cameraControl.getCenter() -> {longitude,latitude}

cameraControl.setCenter(longitude, latitude) -> void

cameraControl.getZoomLevel() -> number

cameraControl.setZoom(zoomLevel) -> void

cameraControl.getViewRect() -> ViewRect

cameraControl.setViewRect(viewRect) -> void

cameraControl.getOrientation() -> {heading,pitch,roll}

cameraControl.setOrientation({heading,pitch,roll}) -> void

wms/wmts/wfs 加载

文件加载

图层样式编辑

空间量测

3dtiles

3dtiles平移

3dtiles缩放

3dtiles旋转工具

3dtiles平移工具

layer 图层管理

LayerControl类

layer.LayerControl

layerControl.addOperationalLayer(layerConfig) -> layer

示例 `options.viewerConfig.center`

`CameraControl类`

`cameraControl.trackEntity(entity, options) -> void`

`cameraControl.stopTrackEntity() -> void`

`cameraControl.getTrackedEntity() -> void`

`cameraControl.getCameraPosition() -> {longitude,latitude,height}`

`cameraControl.getHeight() -> number`

`cameraControl.setHeight(height) -> void`

`cameraControl.getCenter() -> {longitude,latitude}`

`cameraControl.setCenter(longitude, latitude) -> void`

`cameraControl.getZoomLevel() -> number`

`cameraControl.setZoom(zoomLevel) -> void`

`cameraControl.getViewRect() -> ViewRect`

`cameraControl.setViewRect(viewRect) -> void`

`cameraControl.getOrientation() -> {heading,pitch,roll}`

`cameraControl.setOrientation({heading,pitch,roll}) -> void`

`layer.LayerControl`

`layerControl.addOperationalLayer(layerConfig) -> layer`

`layerControl.removeOperationalLayer(id) -> void`

`layerControl.getLayerById(id) -> layer`

`layerControl.getLayers() -> layerDict`

`layerControl.centerAtById(id) -> void`

`layerControl.getLayerVisible(id) -> boolean`

`layerControl.updateLayerVisibleById(id,visible) -> void`

`layerControl.getBasemap() -> layer`

`layerControl.changeBaseMap(name) -> void`

`roam.RoamControl`

`roamControl.viewer`

`roamControl.lastEditEntity`

`roamControl.isOnDraw`

`roamControl.arrFlyTable`

`roamControl.modelDefine`

`roamControl.roamLineWindow`

`roamControl.roamLineWidget`

`roamControl.roamFlyWindow`

`roamControl.roamFlyWidget`

`roamControl.start() -> void`

`roamControl.toRoamFly(lineData) -> void`

`roamControl.destroy() -> void`

`roamControl.updateAttr2map(attr) -> void`

`roamControl.updateGeo2map(coords, withHeight) -> void`

`roamControl.getGeoJson(id) -> geojson`

`roamControl.jsonToLayer(json, isClear, isFly) -> entity`

`roamControl.deleteAll() -> void`

`roamControl.deleteEntity(id) -> void`

`roamControl.deleteCurrentEntity() -> void`

`roamControl.hasEdit(value) -> void`

`roamControl.saveForGeoJson(lineData) -> file`

`roamControl.toRoamLine() -> void`

`track.TrackPlayControl`

`trackPlayControl.play() -> void`

`trackPlayControl.pause() -> void`

`trackPlayControl.setMultiplier(value) -> void`

`trackPlayControl.setCurrentTime(date) -> void`

`trackPlayControl.addTrack() -> void`

`trackPlayControl.getTrackItemById(id) -> TrackItem`

`trackPlayControl.removeTrackById(id) -> TrackItem`

`trackPlayControl.hideAllPopup() -> void`

`trackPlayControl.removeAllTrack() -> void`

`trackPlayControl.removeTimeLine() -> void`

`trackPlayControl.destroy() -> void`

`OverflowControl类`

`ovflowControl.destroy() -> void`

`SpatialPropertyQuerier类`

`spatialPropertyQuerier.initSpatialPropertyQuerier(queryConfig) -> void`

`spatialPropertyQuerier.destroy() -> void`

`DivPoint`类

`divPoint.setVisible(visible) -> void`

`divPoint.destroy() -> void`

`LabelDivPoint`类

`EntityEventHandler`类

`entityEventHandler.addEntityEventListener(type, action)`

`entityEventHandler.removeEntityEventListener(type, action)`

`entityEventHandler.removeAllEventHandler()`

`entityEventHandler.destroy() -> void`