Skip to content

mapplat 地图平台

我在 mapplat 里保存数据会报下图的错误?

DANGER

这是由于后台数据库表的字段太小导致的, 需要调整数据库字段的类型为 text

layerservice 服务会在你的业务数据库里面创建4张表

表名表的描述表里数据比较大的字段对应的数据类型
jiyue_map_tuceng_page整个项目的页面表configtext
jiyue_map_tuceng图层表configtext
jiyue_map_tucengstyle图层样式表styletext
jiyue_map_tucengdetails上传的图层数据的数据表lnglats , propertytext
  • layerservice 会在你的业务系统里自动创建这几张表的, 并会自动设置这些数据字段类型为 text 的, 如果你的业务系统报个错误, 一般都是你的业务系统里已经存在 这几张表且对应的数据字段类型设置的不对导致

DANGER

修复方法就是把这些数据字段改为 text

  • 他们的Java实体代码如下
java

/**
 * 页面
 */
@Data
@Entity
@Table(name = "jiyue_map_tuceng_page")
public class MapTucengPage implements java.io.Serializable {
    private static final long serialVersionUID = 1L;
    @Id
    @GeneratedValue(generator = "paymentableGenerator")
    @GenericGenerator(name = "paymentableGenerator", strategy = "assigned")

    @Column(name = "\"id\"")
    private String id;

    @Column(name = "\"name\"")//页面名称
    private String name;

    @Column(name = "\"path\"")//页面地址
    private String path;

    @Column(name = "\"comment\"")//说明
    private String comment;

    @Column(name="\"config\"",columnDefinition="TEXT") //储存json配置
    private String config;

}
//图层
@Data
@Entity
@Table(name="jiyue_map_tuceng")
public class Maptuceng implements Serializable {
	private static final long serialVersionUID = 1L;

	@Id
	@GeneratedValue(generator = "paymentableGenerator")
	@GenericGenerator(name = "paymentableGenerator", strategy = "assigned")
	private String id;

	@Column(length=50)
	private String code;

	@Column(length=100)
	private String name;

	@Column(name="\"layername\"")
	private String layername;

	@Column(name="\"pid\"")
	private String pid;

	@Column(name="\"type\"")
	private String type;

	@Column(name="\"show\"")
	private String show;

	@Column(name="\"comment\"")
	private String comment;

	@Column(name="\"sql\"",columnDefinition="TEXT")
	private String sql;

	@Column(name="\"order\"")
	private String order;

	@Column(name="\"mapView\"",columnDefinition="TEXT")
	private String mapView;//记录地图的视角

	@Column(name="\"icon\"",columnDefinition="TEXT")
	private String icon;//记录树形结构前面的目录icon

	@Column(name="\"pageId\"")
	private String pageId;//和 jiyue_map_tuceng_page 表进行关联

	@Column(name="\"linkId\"")
	private String linkId;//和 链接ID

	@Column(name="\"config\"",columnDefinition="TEXT")
	private String config;//储存json配置

}
//图层样式
@Data
@Entity
@Table(name="jiyue_map_tucengstyle")
public class MaptucengStyle implements java.io.Serializable {
	private static final long serialVersionUID = -1187301020388304410L;

	@Id
	@GeneratedValue(generator = "paymentableGenerator")
	@GenericGenerator(name = "paymentableGenerator", strategy = "uuid")

	@Column(name="\"id\"")
	private String id;

	@Column(name="\"layername\"")
	private String layername;

	@Column(name="\"updatetime\"")
	private Date updatetime;

	@Column(name="\"markerFile\"",columnDefinition="TEXT")
	private String markerFile;

	@Column(name="\"style\"",columnDefinition="TEXT")
	private String style;

}
//图层上传的数据详情
@Data
@Entity
@Table(name = "jiyue_map_tucengdetails")
public class MapTucengDetails implements java.io.Serializable {
    private static final long serialVersionUID = -2743330570542392608L;

    @Id
    @GeneratedValue(generator = "paymentableGenerator")
    @GenericGenerator(name = "paymentableGenerator", strategy = "uuid")

    @Column(name = "\"id\"")
    private String id;

    @Column(name = "\"name\"")
    private String name;

    @Column(name = "\"layername\"")
    private String layername;

    @Column(name = "\"type\"")
    private String type;

    @Column(name = "\"lnglats\"", columnDefinition = "TEXT")
    private String lnglats;

    @Column(name = "\"show\"")
    private String show;

    @Column(name = "\"property\"", columnDefinition = "TEXT")
    private String property;

}

为什么项目里框选图层查不到数据?

可能你忘记了配置图层支持 支持框选

为什么图层开启了视野过滤不起作用

TIP

可能你忘记了配置项目的区域轮廓数据了

配置项目区域轮廓的数据

警告

轮廓数据是区域的边界(区域的最大轮廓), 而不是区域的子区域, 例如你的项目是上海的, 那么你的 GeoJSON 文件应该是上海的轮廓而不是下面子区域的集合

吴江的那就是这样的数据
其他区域的项目以此类推

警告

你的GeoJSON数据里应该仅有一条数据, 如果有多条数据仅仅会采用第一条数据, 如果你的区域数据有多个闭合区域, 请将他们组成MultiPolygon, 区域的轮廓数据只支持Polygon和MultiPolygon, 比如下图中的上海区域示例

怎样修改 mapplat 平台超级管理员的账号和密码

mapplat 部署时有个配置文件 /[path]/mappplat/serverconfig.js ,请部署人员修改下
然后重启下 mapplat

sh
  node index.js

为什么我在地图平台里配置的地图效果是好的,但是在项目时不对或者不显示呢?

你需要升级下yymap-layercontrol库,layercontrol 是 mapplat 前端的 SDK, 可能 mapplat 里的功能是最近加的,但是你用的老的版本的 layercontrol,所以导致无非正常显示 mapplat 你配置的内容

为什么我的项目用的是 https 协议,加载 mapplat 的服务报错

浏览器里限制 https 服务里不能加载 http,这种情况一般都是你配置的后台地址是 http 的导致的

js
    this.layerControl = new YY.LayerControl({
        map,
        // platformUrl: "http://localhost:9600/common/",
        projectId: 'id-40637B1D-080A-4321-9BB0-602C58439D86',
        //请换成https服务地址
        url: 'http://172.16.2.178:8083/platform/',
        onClick: this.overlayOnClick,
        events: {
            'mousemove': this.overlayMouseMove,
            ...
        },
        cacheExpiration: 5 * 60 * 1000,
        threeScene, //如果需要3d功能的话必须配置
        showLoading: true,
        // token:'xxxxxxxxxxx'
    });

为什么我在 mapplat 里配置了倾斜摄影的图层,但是项目里没有生效呢?

警告

你需要升级下yymap-layercontrol库,倾斜摄影是我们最近刚加的功能

项目有多个页面,每个页面里有一些图层的都是一样的,我该怎么配置图层,才能工作量最小?

你可以配置一个独立的页面,这个页面专门配置所有页面都用到的公共图层

页面描述
共享图层页面里面配置所有页面公共的图层
页面 1业务页面 1
页面 2业务页面 2
....业务页面..

在公共页面里把图层配置成公共图层

然后再自己的前端项目里:

  • 判断页面里有没有加载过这个共享页面
  • 如果已经加载过这个共享页面了就直接 switchPage 到你的目标页面
  • 如果没有加载过这个共享页面, 就先加载这个共享页面, 等共享页面加载完成,在 switchPage 到你的目标页面, 一般都是第一次进入系统需要先加载共享页面,后续切换页面就不需要了

TIP

共享页面里的共享图层就会被缓存, 后续的页面切换都会自动带上缓存的图层的

大概代码如下:

js
//共享页面是否加载过
let sharedPageLoaded = false;
//共享页面的id
const sharedPageId = "xxxxxx";
//当前需要加载的页面id
let currentPage = "yyyyy";

function pageLoad(e) {
    //共享页面加载完成
    if (e.page.id === sharedPageId) {
        sharedPageLoaded = true;
        //再去切换到自己的目标页面
        switchPage();
    }
}
//监听页面加载完成事件
layerControl.on("pageload", pageLoad);

function switchPage() {
    if (!sharedPageLoaded) {
        //加载共享页面
        layerControl.switchPage(sharedPageId, (layerNodeData, checkedNodes) => {});
    } else {
        //加载目标的页面
        layerControl.switchPage(currentPage, (layerNodeData, checkedNodes) => {});
    }
}

switchPage(currentPage);

怎样配置图层的文字标注在地图特定层级下显示?

  • 打开图层的样式配置,在文本样式配置 里配置下 文本的最小层级最大层级

  • 当地图的层级(zoom)处于 [textMinZoom,textMaxZoom]的范围内文本才会显示, 比如你配置了
    最小层级=9,最大层级=14, 那么只有当地图缩放层级处于 [9,14] 之间,文本才会显示

mapplat配置的改变怎样实时反馈到项目的页面上

  • 前端开发人员利用layercontrol库加载mapplat项目的信息时配置下开启socket配置项即可
js
this.layerControl = new YY.LayerControl({
    map,
    // platformUrl: "http://localhost:9600/common/",
    projectId: 'id-40637B1D-080A-4321-9BB0-602C58439D86',
    url: 'http://172.16.2.178:8083/platform/',
    onClick: this.overlayOnClick,
    events: {
        'mousemove': this.overlayMouseMove,
        ...
    },
    cacheExpiration: 5 * 60 * 1000,
    threeScene, //如果需要3d功能的话必须配置
    showLoading: true,
    //开启websocket实时同步
    socket: true
    // token:'xxxxxxxxxxx',
    // publicToken:'xxxxx'
});

mapplat里制作3D扇形图

mapplat里开启该选项

一些说明

  • 统计字段表示mapplat里会对你的所有数据按照这个字段进行求和, 然后计算出每个数据项的占比, 以此来分割圆
  • 外环半径缩放倍数 mapplat里会会计算出你的区域的边界然后以此来计算出圆的半径, 如果你觉得半径太大了, 你可调整给值以此来使圆的半径达到你的理想值
js
  外环半径 = 系统计算的值 x 缩放比列
  • 内环半径相对于外环占比 表示内环的半径相对于外环的百分比
js
 内环半径 = 外环半径 x 内环相对于外环的占比

警告

  • 请确保你配置的参与计算的字段的值为数字类型, 否则可能导致无法达到你期望的效果
  • 扇形图的高度一般为另一个指标数据, 请也保证数据类型为数字类型
  • 配色请使用视觉映射

怎样清空图层数据?

警告

注意清空图层数据仅仅是清空数据库里你上传的数据记录(如下图的操作选项) 下面情况的数据源不会被清空

  • 接口里的数据
  • SQL语句里的数据源
  • 上传的geojson静态文件

警告

注意上传到数据库的数据会进行累积, 即第二次上传数据时并不会清除第一次上传的数据, 如果你的数据是覆盖关系请自行清除图层数据在再次上传

mappplat里数据源的区别?

数据源的分类有:

  • 接口: 适用于结果是动态,查询条件也是动态
  • SQL语句: 结果是动态的,但是查询条件是死的, 例如查询2022年的企业数据,2022年这个值时死的
  • geojson导入数据库: 数据是死的,但是想导入的数据库存储,可以做简单的查询和搜多功能,注意导入到数据库的数据将只保留基本的属性信息(经纬度,名字),很多属性信息将被擦除, 如果你想保留所有的属性信息,并做大量的数据查询和筛选,请将你的数据导入到数据库中你的业务表里,用SQL或者接口来提供,而不是在这里仅仅做个简单的数据导入和托管
  • geojson静态文件: 数据是死的,纯静态的展示数据,没有任何查询和筛选, 纯展示,数据的替换只能是整体的替换数据文件,一般都是些基础元素,例如:行政区,建筑,道路,湖泊,绿地等

数据源的优先级:
接口>SQL>geojson导入数据库>geojson静态文件

警告

  • 当你配置了接口时, 优先采用接口里返回的数据
  • 当你配置了SQL和导入了数据到数据库时, 优先采用SQL的结果集
  • 关于geojson静态文件:
  1. 如果从后台查询数据有结果时(配置了SQL和导入了数据到数据), geojson扮演的角色是对后台返回的数据进行补充,根据名字进行匹配,对后台返回的数据进行经纬度补充
  2. 如果从后台查询的数据结果集为空将完全采用geojson静态文件,所有如果你想完全采用geojson静态文件时请清空图层的数据

关于图层数据源的整个流程如下图

为什么mapplat配置好的3d图层在项目里有巨大的色差?

这种情况一般都是在项目的代码里给3d场景图层加了强烈的灯光导致, 关于3D图层回调函数里灯光的处理代码

js
   threeScene.prepareToDraw = function() {
       threeScene.startAnimation();
       //添加环境光,其他的灯光代码请注释掉,如果你不是开发人员请给前端开发人员反馈
       threeScene.addMesh(new THREE.AmbientLight('#fff', 0.2));
   };

mapplat里怎样制作弧线?

  • 新建一个图层, 图层类型选择线
  • 给图层配置数据源, GeoJSON文件, 接口, SQL语句等
  • 设置图层的弧线属性
  • 如果需要动画效果, 可以开启
  • 上面的效果图里的散点效果是个独立的点图层

警告

  • 图层的数据源必须要是线的数据, 只要有两个坐标点就可以了, 如果超过两个坐标点也只会取首尾两个坐标点
  • 注意线的方向是坐标点的顺序控制的 比如 安徽->陕西, 如果你颠倒了他们的坐标点顺序, 那就是表示 陕西->安徽

关于mapplat里的网格柱子

  • 网格的柱子的构造原理是求出所有点集的边界,然后根据网格的大小进行格子划分,类似地板砖的原理
  • 关于网格太小的警告

警告

  • 网格大小设置的太小了, 导致生成的网格太多了
  • 你的数据里有脏数据, 导致点集的边界变的很大, 从而导致生成的格子太多. 举例: 比如你现在做的苏州的项目, 理想状态下所有的点应该在苏州的范围内, 但是如果你的数据有条北京的数据, 这时就会导致计算出来的点的边界很大, 这时就会导致生成的格子很多了

关于mapplat里图层里数据的 type字段?

  • mapplat里节点图层类型有:

    图层字段值说明
    Point点图层
    线LineString线图层
    Polygon面图层
    倾斜3dtile倾斜图层
    目录Category分类, 目录用于分类

其中可以配置数据源的有 点,线,面 , 每个类型的图层里的数据应该携带type字段, 至于type的值参考上面的表格

js
{
    ... //其他字段
    type: 'Point',
    // type: 'LineString',
    // type: 'Polygon'
}
  • 如果你的数据源是静态GeoJSON或者GeoJSON导入到数据库的无需考虑这个问题
  • 如果你的数据源是SQL的请在SQL里返回静态的type字段
sql
select ....,'Polygon' type from ....
select ....,'LineString' type from ....
select ....,'Point' type from ....
  • 如果你的数据源是接口的需要在返回的数据里携带type字段
js
[{
        ... //其他字段
        type: 'Point',
        // type: 'LineString',
        // type: 'Polygon'
    },
    ...
]

警告

  • 返回的数据里可以缺省 type 字段, 但是不能填写错误的值, 缺省时系统会默认为你的数据的类型和该图层匹配, 但是如果你填写了个错误的值, 那就是认为你想要明确强调该条数据是是么类型的了

  • mapplt里会对你的每条数据 type 验证, 比对其值是否和图层的类型匹配, 如果不匹配会将该条数据视为脏数据, 比如一个点的图层里有条数据的 type:Polygon

  • 所以可以不填但是不能填写错误的值

我配置的图层被别的图层盖住了, 怎样调整它的层级?

  • 配置图层的样式
  • 调整图层的层级(zindex)大小, 值大的图层会被放到地图上面, 详情参考

什么叫脏图层?

  • 脏图层指的你对图层树结构进行删除导致的, 比如你删除了个文件夹节点, 因为其下面的子节点没有删除导致的, 因为子节点的父节点被删除了导致他们无法挂载了, 所以他们成为了脏的数据
  • 注意脏图层仅仅是针对图层结构, 不是针对图层里的数据
  • 如果你的页面出现了脏图层请把他们清除掉, 如果页面里有大量的脏图层会导致页面加载数据变慢, 因为这些图层还是会被查询出来, 但是这些数据查出来也没有意义, 白白浪费带宽

什么叫脏数据?

  • 当图层里出现脏数据了 mapplat 会进行消息提示的, 页面的右上角会进行弹窗提示, 页面的调试控台也会进行输出提示
  • 产生脏数据的原因有:
原因举例消息提示等级
数据的类型和图层类型不匹配点的图层里包含了面的数据错误
数据里没有经纬度数据经纬度数据为空错误
id字段的缺失id字段的缺失警告

警告

注意如果你的数据缺失 id 字段不会影响程序的正常执行, 系统会自动帮你补充 id 字段的, 但是可能会导致一些未知的问题, 所以你的数据最好带上 id 字段
方面你的业务里的数据交互, 比如点击了地图上的一个要素根据id查询该条数据其他的业务数据

视觉映射?

  • 即根据业务字段给图形配色
  • 图层支持情况:
图层作用于
点图层填充色
线图层线条颜色
面图层填充色

警告

注意点图层开启视觉映射后样式里配置的图标将失效, 将采用圆点来渲染
因为无法做到自动针对图片上色

mapplat里怎样进行底图剪裁?

  • 项目页面-项目设置里上传项目区域的边界数据

  • 注意要开启生效按钮

  • 项目里所有的页面都会采用这个你上传的边界数据, 如果你的项目里有的页面比较特殊, 你也可以在特殊的那个页面里配置自己的边界数据(比如一个吴江的项目, 有个页面要做长三角的地图业务, 这时你就可以在长三角的页面上传长三角的边界数据)

  • 边界数据的优先级:页面配置的边界数据>项目配置的边界数据, 如果页面不配置就会采用项目配置的边界数据

警告

轮廓数据是区域的边界(区域的最大轮廓), 而不是区域的子区域, 例如你的项目是上海的, 那么你的 GeoJSON 文件应该是上海的轮廓而不是下面子区域的集合

吴江的那就是这样的数据
其他区域的项目以此类推

警告

你的GeoJSON数据里应该仅有一条数据, 如果有多条数据仅仅会采用第一条数据, 如果你的区域数据有多个闭合区域, 请将他们组成MultiPolygon, 区域的轮廓数据只支持Polygon和MultiPolygon, 比如下图中的上海区域示例

This document is generated by vitepress and Edit by deyihu