配置图层
开始
点击需要配置图层的 数据与配置 按钮
配置图层的数据源
目前图层的数据源来源有: 
| 类别 | 说明 | 适用场景 |
|---|---|---|
| 接口 | 一般是项目里提供的API服务, 或者第三方提供的服务 | 最灵活, 可以动态发送参数，动态返回结果 |
| SQL | 一般是从自己项目的业务表里查询数据 | 比较灵活, 结果是动态，但是不支持动态传参数 |
| GeoJSON静态文件 | 一个独立的数据文件 | 图层数据是死的，不会经常修改的图层, 比如行政区，绿地等一些基础性的数据 |
GeoJSON SPEC
怎样选择图层的数据来源？
警告
- 如果是该图层需要动态传参数, 那么只能选择接口, 至于接口有你的项目后台服务提供
- 如果是图层的结果是动态的，但是没有查询参数，你可以配置SQL从你的业务表里查询
- 如果是图层的数据是静态的，没有任何业务属性, 那么你可以将你的数据以GeoJSON文件的方式进行托管
DANGER
- 请根据图层的业务需要选择合适的数据源类别, 不要随便来
- 当你配置了多个数据源时, 数据源的优先级: 接口>SQL>GeoJSON
如果你有一些数据文件(shp/geojson/kml/excel等), 他们的展示方式需要动态甚至需要动态传参, 那么你应该将其导入数据库, 然后以接口或者SQL的方式为图层提供数据源支持, 而不是以静态文件的方式托管, 静态文件是没有动态查询功能的
如果你确定该图层就是静态的, 那么你可以将这些文件(shp/geojson/kml/excel等)转成GeoJSON后在上传
数据源的数据结构
- 接口返回的数据格式都要求是统一的, 其结构如下：
js
{
success: true,
//数据
data: [{
id: "8a808c7b79406803017b4cf2158d22b3"
lnglats: "120.69056741295583,31.019874083022557;120.68911745400737,31.02048003632467;120.68740787697197,31.021194487435707;120.68419560384416,31.021527610710734;120.68369591713292,31.022051092583922;120.68370078696182,31.022069784992652;120.68369591713292,31.02207488684661;120.68443355006832,31.0249064445768;120.6850760050537,31.02581064094835;120.68598019962656,31.03071233011002;120.68769341172163,31.033924602338573;120.6895193205603,31.034399635934506;120.68889983965596,31.03647804022944;120.68843399982927,31.03712801984227;120.68693315993744,31.03776000042376;120.68584884015195,31.03793396977693;120.68426411959354,31.038332040291493;120.68321687975526,31.0388159699811;120.68196695970744,31.040265960405804;120.68086896033435,31.041020970041814;120.67942499986395,31.04115002994996;120.67826184011187,31.0408579796121;120.67736903994933,31.04056997982076;120.67744092006251,31.040441416338354;120.67750717221827,31.040309864408755;120.677567671411,31.040175568647612;120.67762230342657,31.040038781764395;120.67767096844045,31.039899759166588;120.67771357292315,31.039758762556914;120.67775003773409,31.039616053638042;120.67778029542433,31.03947190220657;120.67780428933656,31.0393265753612;120.6778219736052,31.039180347395188;120.67783331585485,31.039033491702355;120.6778382954011,31.03888628257596;120.67783690055262,31.03873899520852;120.67782913670533,31.03859190659125;120.67781501734919,31.03844529101741;120.67779456766527,31.038299424578838;120.6777678281228,31.038154577971454;120.6777270798409,31.037974661401563;120.67767969276372,31.037796377101188;120.67762573164225,31.03761997058524;120.67756527022107,31.037445685569992;120.67749839213718,31.037273762174436;120.67742518912121,31.03710443422233;120.67734576189741,31.036937934638047;120.67726021928377,31.03677449274869;120.67716867819206,31.03661433428414;120.67707126542666,31.03645767688033;120.67696811408723,31.036304737273838;120.67685936626685,31.03615572500678;120.67674517215198,31.03601084512445;120.6766256864264,31.0358702945785;120.67648381477625,31.035714655207244;120.67633702113665,31.035563646445155;120.6761854583923,31.03541742657302;120.67602928122642,31.035276144878253;120.67586865061776,31.035139947950313;120.67570373294097,31.0350089751841;120.67553469726852,31.034883360578704;120.67536171716961,31.034763237233676;120.67518497340791,31.03464872475888;120.67500464404918,31.034539943663503;120.67482091795102,31.034437003664834;120.67463398307189,31.03434001358079;120.6744440327659,31.034249071437557;120.67425126128671,31.034164270764563;120.67405586828374,31.03408569969531;120.67389007826455,31.034018265830355;120.67372712021051,31.0339442498273;120.67356725582431,31.03386376859811;120.67341074141268,31.03377695344369;120.67325782788646,31.0336839410611;120.6731087598614,31.03358488343565;120.67296377655714,31.033479936150172;120.67282311179724,31.03336926917649;120.67268699041233,31.033253060580307;120.6725556282397,31.033131495622058;120.67242923841866,31.03300476855526;120.67230802329675,31.032873086224015;120.67219217712739,31.032736654573;120.67208188427162,31.032595695734813;120.67197732369459,31.032450435439273;120.67187866177085,31.032301103912857;120.67181847194502,31.03221184440116;120.671753132601,31.032126279304407;120.67168287216691,31.03204470899618;120.67160793166079,31.03196741586362;120.67152857278552,31.031894666105984;120.67144507073351,31.03182671333218;120.67135771328788,31.031763792265224;120.67126680441959,31.03170612144038;120.67117265889112,31.031653901406457;120.671075604056,31.03160731112854;120.67097597356235,31.03156651428327;120.67087411724674,31.031531651164812;120.6707703849454,31.031502843181727;120.67066513638702,31.031480190158675;120.67047147727692,31.031440814242217;120.6702793632021,31.031394481170423;120.67008904597276,31.03134125119783;120.66990077020444,31.031281193572283;120.6697147832108,31.03121438563545;120.66953132600997,31.031140916420213;120.66935063782171,31.03106087765741;120.66917295157054,31.03097437726575;120.66899850197933,31.030881525861787;120.66882751208004,31.030782444854026;120.66817283980481,31.030101989914954;120.66656796004338,31.027415039572475;120.66615515143917,31.02634928898857;120.66614496032173,31.026322980221437;120.66605972437685,31.02610296468015;120.666451292793,31.025447332828207;120.66694622029195,31.02480963705517;120.66800270156352,31.023182086284294;120.66807154826336,31.023069740276355;120.66813447112895,31.022953972347977;120.66819130018837,31.022835094564016;120.66824188075827,31.022713427083033;120.66828607794025,31.02258929725832;120.6683237721245,31.022463041436254;120.66835486168759,31.022334997762016;120.66843985031892,31.021926844048664;120.66851917142264,31.021517549994996;120.66859280791186,31.021107197439278;120.6686065342642,31.02104694556016;120.66862660263564,31.020988500419037;120.66865278459841,31.020932526614843;120.66868478157744,31.020879660867706;120.66872223114615,31.020830505723325;120.66876470432771,31.02078562055999;120.66881171818636,31.020745517991315;120.66900532243778,31.020600684873784;120.6692019493106,31.020459982342345;120.66921844197759,31.020446295560134;120.66923247230079,31.02043009607212;120.66924366256501,31.020411818250864;120.6692517141953,31.020391955824152;120.66925640595844,31.020371043888588;120.66925761284858,31.020349646319175;120.6692553033896,31.020328339581283;120.66924953873524,31.02030769744232;120.66918389542047,31.02012412332965;120.66912233592711,31.019939139080066;120.66906489263079,31.01975283642429;120.66901159341035,31.019565305294634;120.66900623165236,31.019550757861225;120.66899842643625,31.019537361560026;120.66898841158604,31.019525525582594;120.66897649556893,31.019515606060395;120.66896303991246,31.019507906964407;120.6689484502109,31.019502662118214;120.66893317072936,31.01950002890328;120.66891766731658,31.019500089157816;120.6689024094187,31.019502840183975;120.66888786108598,31.019508198344738;120.66884667213628,31.019523791689664;120.66880355683872,31.01953277681622;120.66875956829949,31.019534931591863;120.66871578120845,31.01953020655384;120.66867326485931,31.019518716815355;120.66863305886864,31.019500741166325;120.66859614529596,31.019476719375177;120.6685634261612,31.019447238699172;120.66853570006253,31.01941301859597;120.66851679001786,31.019389570572287;120.66849454798512,31.0193692530886;120.66846948837622,31.01935253469179;120.66844218765686,31.01933980029162;120.66841327355382,31.019331343966428;120.66838341516257,31.019327359070417;120.66835802999913,31.01932383103002;120.668333553151,31.01931623355739;120.66831063123072,31.019304769899236;120.66828987128065,31.019289742227897;120.66827182188717,31.01927154714423;120.66825696059027,31.019250666684968;120.66824568039385,31.019227653933115;120.66823827987275,31.019203116830454;120.66823495507913,31.019177704687365;120.66823579414665,31.019152090196883;120.66824077369279,31.019126949649035;120.66824976241662,31.019102949441617;120.66826252379644,31.019080722697254;120.66827871878786,31.019060859371223;120.6682954830502,31.019040197447225;120.66830856458864,31.01901702731402;120.66831759558067,31.01899199918148;120.66832232691388,31.018965815420074;120.66832262189155,31.018939208977372;120.668318473319,31.018912926290568;120.66830999810804,31.018887704803774;120.66829743367964,31.018864249585477;120.668281131669,31.01884322073812;120.66826154893135,31.01882520641817;120.66823923585207,31.018810712044797;120.66821481656063,31.018800143212104;120.66818897723954,31.0187937966964;120.66816244004463,31.018791850563503;120.66813595141309,31.01879435967203;120.66807985260323,31.018800927420898;120.6680233715814,31.01880053621585;120.66796736989829,31.018793195049966;120.66791269741316,31.018779013640597;120.66786018689822,31.01875820962374;120.66781063695134,31.018731097761986;120.66776480300337,31.018698090844282;120.6677233820285,31.01865969159155;120.66768700355249,31.018616486361793;120.66765622155742,31.018569128962156;120.6676315045903,31.018518342447578;120.66807884356388,31.01837557507281;120.66737452331563,31.017309576275977;120.66734021957552,31.01725182721009;120.66731159325548,31.017191063616735;120.6672889051589,31.01712784217625;120.66727236392853,31.017062741152643;120.66726212244907,31.016996357695803;120.66725827065272,31.01692929884814;120.6672608472104,31.01686217884651;120.66726982694104,31.01679561282731;120.66728979818572,31.016675618085344;120.66730566672322,31.016555011804428;120.66731741636579,31.016433935178043;120.66731953157114,31.016370437645605;120.66731575441861,31.01630701835427;120.6673061172836,31.016244221393777;120.66729070380302,31.01618258725665;120.667269645278,31.016122647442273;120.66724312337146,31.016064914564197;120.66721136741069,31.01600989044414;120.66717464899091,31.01595804272955;120.66582311544448,31.014016401935464;120.6662514175689,31.01233174421469;120.66623238341788,31.011189603417506;120.66623249763177,31.011159057044893;120.66634964691877,31.011153161089567;120.67168400441335,31.01062967921638;120.67360700316078,31.00891646712131;120.68134025095185,31.013366059895816;120.68324475514135,31.013751634330504;120.68521877242847,31.01415128135659;120.6856946648769,31.01748252669728;120.6872889038599,31.018291544219437;120.6883596609697,31.01898158773014;120.69056741295583,31.019874083022557"
name: "青石村"
type: "Polygon"
},
{
...
},
...
]
}如果你们接入接口等数据时报错, 可以联系我
联系方式
邮箱:mehudeyi@163.com
QQ:1390110605
- 如果用的是SQL语句，也得遵循这样的格式, 你可以在写SQL时进行
as重命名, 只要你的SQL写的对，那么返回的数据结构就是上面说的那个格式, 因为SQL的执行是有layerservice处理, 其返回的数据结构是遵循这个格式的
sql
select id,pname as name,jingweidu as lnglats,........
from TABLE_NAME
where ......DANGER
所以当你的数据源是接口或者SQL时, 应该遵循这种数据规范
即使被托管的GeoJSON文件也会被格式成这种格式
如果你的接口是有GeoServer或者ArcGIS Server提供时，可以返回GeoJSON/ESRI JSON格式,
mapplat内部也支持解析接口是GeoJSON格式的, ArcGIS output GeoJSON example
json
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
120.63687620217979,
31.171997648573182
]
},
"properties": {
"name": "1-4aec17f3",
"_color": "",
"center": [
120.63687620217979,
31.171997648573182,
0
]
}
},
...
]
}- 如果你们的接口已经是存在的，不能随便更改, 或者已经是老项目他们的数据结构不能动, 可以联系我, 我会对你们的数据结构做适配的
如果你们接入接口等数据时报错, 可以联系我
联系方式
邮箱:mehudeyi@163.com
QQ:1390110605
图层选项的配置
图层常用配置如下:
TIP
因为配置项太多, 只能把重要的配置型介绍下, 下面将分图来说面.
| 配置项 | 说明 | 默认值 |
|---|---|---|
| 名称字段 | 数据源每条数据的name字段 | name |
| 文字标注模板 | 如果图层需要显示文本, 你可以配置其值, 例如: 名称:{name} | {name} |
| 坐标系(不知道就选默认值) | 图层数据源的坐标系统, mapplat 内部会自动根据你配置的坐标系来对数据进行转换, 比如你配置了 百度 , 因为你整个项目时 火星坐标 的，这时 mapplat 就会自动的把这个图层的数据转化 百度=>火星 , 不知道就不要填写 | - |
| zoom控制 | 图层在地图缩放的哪个区间显示, 比如你配置了[10, 15], 那么当地图缩放时, 只有当地图层级处于[10, 15]这个区间, 这个图层才会被显示 | [0, 25] |
| 配置项 | 说明 | 默认值 | 效果图 |
|---|---|---|---|
| 数据量统计 | 开启后, 页面进入后会自动统计这个图层的数量 | false |  |
| 视野设置 | 图层被选中会自动计算图层里的数据的视角, 然后把地图视野设置为这个图层的视角 | false | |
| 图层选中 | 如果选中, 页面一进入就会加载这个图层, 而不是用户去操作才会显示 | false |  |
| 交互控制 | 是否允许鼠标点击, 鼠标移入触发一些事件, 有时一些不需要交互的图层可以关闭了这样可以有更好的性能表现 | true | |
| hover效果 | 鼠标移入图形内是否进行高亮显示, 比如一个图形是红色，鼠标移入后会变成蓝色(后面我们会讲怎样配置图层的高亮颜色) | true |  |
| 渐进加载数据 | 当图层数据量比较大时可以开启, 可以避免加载改图层数据时的卡顿 | false | |
| tooltip | 鼠标放到图形进行简单的消息提示, 比如显示名称等一些简单的信息 | true |  |
| 信息窗口 | 当鼠标点击图形后可以弹出一个简单的弹窗, 里面可以放图形的详细的业务信息 | false |  |
| 弹窗 | 点击图形弹出一个外联的窗口, 一般都是和其他业务系统交互的，弹窗是iframe嵌入外部系统 | false | |
| 动态刷新 | 以轮询的方式实时去请求数据源里的数据, 一般用于需要实时展示位置的图层, 比如车辆的GPS位置 | false | |
| 空间查询 | 配置了后, 在业务了可以通过绘制圆或者多边形来查询这个图层里的数据(spatail query) | false |  |
文档不能做到处处细节都说的清楚, 有问题？
联系方式
邮箱:mehudeyi@163.com
QQ:1390110605
| 配置项 | 说明 | 默认值 | 效果图 |
|---|---|---|---|
| 富文本图标 | 有时当图标非常复杂时, 可能需要利用html作为输入, 然后输出一个复杂的图标 | false |  |
| 展现方式 | 当图层是点图层shi, 可选以热区的方式展现, | false |  |
| 动画 | 点线面图层都支持一些常见的动画效果, 用来增强地图效果 | false | |
| 图标缩放 | 点图层有时需要根据数据的某个字段来动态设置图标的大小, 配置好属性字段, 然后设置区间值和缩放倍数就可以看到不同权重的数据他们的图标大小不同 | false |  |
| 视觉映射 | 线面图层有时需要根据数据的某个字段来动态设置填充色, 配置好属性字段, 区间和颜色，就可以看到图层上不同的数据被展现成不同的颜色 | false |  |
| 穿透地址 | 当点击图层上的图形是, 自动跳转到对应的其他业务系统里的页面(这里演示了从项目的页面跳转到高德地图) | ||
| 区域统计 | 点图层想要根据行政区进行统计显示, 比如有个吴江区企业图层，然后想根据吴江的乡镇进行地理范围的统计然后显示 | false |  |
图层样式配置
点击需要配置图层的 配样式 按钮
然后你会看到这样的一个面板
重要的配置项有：
图层层级(2d): 用来配置图层的上下层级关系, 类比CSS里的zindex, zindex大的在上面，小的在下面, 比如一个图层A的zindex=0, 如果你把这个图层的zindex配置成1, 那么这个就会在图层A的上面
layer zinde demo
警告
3D图层不支持这个属性的配置, 3D图层的遮盖关系有WEBGL深度关系决定, 所有的3D图层他们都共享一个WEBGL, 他默认的zindex是 -1
- 如果你想让一个2D的图层在3D图层下面，你应该配置其zindex<-1
- 如果你想让一个2D的图层在3D图层上面，你应该配置其zindex>-1
图标随地图缩放而缩放(2d): 即图标的大小随着地图放大而放大，缩小而缩小
其格式为：
js
[zoom, scale, zoom, scale, zoom, scale, ..........];zoom表示地图的层级, scale表示图标缩放的倍数
比如:
js
[0, 1, 10, 2, 15, 4, 20, 20]其表示的意思是：当地图zoom处于 zoom=0 时, 缩放 1 倍, zoom=10 时缩放 2 倍，当 0->10 的过程中进行线性缩放, 即 0->10 的过程中缩放倍数线性的从 1 增加到 2
10->15 的过程中就是图标的缩放倍数从 2 线性的增加到 4 倍
其他的以此类推........ 当地图缩小时, 效果正好反过来
文本的最小Zoom/最大Zoom: 当配置了最小zoom和最大zoom后, 文本只会在[minZoom, maxZoom]区间显示, 例如你配置了minZoom=14, maxZoom=18, 只有当地图层级处于[14, 18]之间文本才会被显示
图层3D配置
重要的配置项如下
TIP
因为配置项比较多, 进行分图来说明.
面的3D配置
| 配置项 | 说明 | 默认值 | 效果图 |
|---|---|---|---|
| 高度字段 | 数据3D拔高字段, 一般都是 height , 其对应的值的单位为 米 , 比如一条数据的height为10, 那么他就会被拔高10M, 这个字段应该有你的接口或者SQL语句返回的字段来决定 | height |  |
| 默认高度 | 当一条数据没有对应的高度值就会采用这个值, 比如你配置了10, 当数据找不到高度值时就会采用这个默认值10 | 0 | |
| 高度缩放倍数 | 对高度值进行缩放, 比如你配置了 2 , 当一条数据为 10 时，其真实的展现高度就是 20 | 1 | |
| 离地高度字段 | 即数据离地面的高度, 一般用于楼层数据的展示, 比如一楼离地0米，2楼离地3米 | bottomHeight |  |
| 海拔 | 整个图层的海拔高度，即图层上的所有图层都会被悬空 | 0 |
警告
- 离地高度针对是每条数据
- 海拔针对的是图层的所有数据
- 假设一条数据离地10M, 而图层的海拔是10M, 那么这条数据最后展现的效果就是离地20M
| 配置项 | 说明 | 默认值 | 效果图 |
|---|---|---|---|
| 纹理 | 如果你需要对图形进行贴图 | | |
| 顶部颜色 | 图形顶部的颜色, 一般是建筑物的屋顶颜色 | | |
| 上下面镂空 | 如果你需要把3D图形的上下面去掉 | false | |
| 高亮墙面 | 将数据渲染成四周高亮动画的特效效果 | false |  |
| 延迟动画 | 图形会做个延迟慢慢升高的动画, 单位秒 | 0 |
线的3D配置
| 配置项 | 说明 | 默认值 | 效果图 |
|---|---|---|---|
| 开启辉光效果(bloom) | 一种特效 | false |  |
| 展示成拖尾线条特效 | 将线做成拖尾的效果 | false | |
| 切分线条的长度(对线条等距切割) | 做拖尾效果时, 每条拖尾线段的长度, 比如线的总长度100, 如果你配置了10, 那么线将会被切成10条线段 | ||
| 拖尾线段数(多少个切割线) | 拖尾线的线段数, 假设每个线段是10M, 当你配置了5, 那么拖尾的的长度就是50M |
线的切割库参考 lineseg
点位的3D配置
- 点的模型展示
| 配置项 | 说明 | 默认值 | 效果图 |
|---|---|---|---|
| 展现方式 | 选择一种点的3D效果, 一般选择 模型 , 如果你的业务需要选择合适的类型 |  | |
| 选中的模型 | 选择点的展示模型, 如果里面没有你想要的，你可以打开模型库进行上传你的模型数据  | ||
| 模型设置 | 打开模型设置面板, 对模型的大小，位置进行微调, 将模型调整到你认为最合适的大小和角度  | ||
| 模型设置 | 如果你的模型是个动画的模型可以打开 | false |
警告
只支持gltf/glb的模型数据，如果是其他的格式请转成gltf/glb
- 点的柱子展示
| 配置项 | 说明 | 默认值 | 效果图 |
|---|---|---|---|
| 高度字段 | 数据3D拔高字段, 一般都是 height , 其对应的值的单位为 米 , 比如一条数据的height为10, 那么他就会被拔高10M, 这个字段应该有你的接口或者SQL语句返回的字段来决定 | height |  |
| 默认高度 | 当一条数据没有对应的高度值就会采用这个值, 比如你配置了10, 当数据找不到高度值时就会采用这个默认值10 | 0 | |
| 高度缩放倍数 | 对高度值进行缩放, 比如你配置了 2 , 当一条数据为 10 时，其真实的展现高度就是 20 | 1 | |
| 离地高度字段 | 即数据离地面的高度, 一般用于楼层数据的展示, 比如一楼离地0米，2楼离地3米 | bottomHeight | |
| 海拔 | 整个图层的海拔高度，即图层上的所有图层都会被悬空 | 0 | |
| 延迟动画 | 图形会做个延迟慢慢升高的动画, 单位秒 | 0 |
警告
- 离地高度针对是每条数据
- 海拔针对的是图层的所有数据
- 假设一条数据离地10M, 而图层的海拔是10M, 那么这条数据最后展现的效果就是离地20M
- 点的网格柱子展示
网格柱子就是将点集以网格
的方式进行聚合，然后计算出每个网格内的点的数量，比较适合区域数据统计(人口密度/企业密度/车辆密度等)
| 配置项 | 说明 | 默认值 | 效果图 |
|---|---|---|---|
| 网格大小 | 每个网格子的大小(网格是正方形的), 单位 米 |  | |
| 柱子半径(米) | 每个网格统计完了, 里面最后展示的一个柱子，所以需要填写柱子的半径 | | |
| 高度字段 | 这时一律填写 count ， count 字段是字段生成的，表示一个网格内点的数量 | |
图层里的特殊配置说明
| 配置项 | 说明 | 默认值 | 效果图 |
|---|---|---|---|
| 数据过滤 | 只显示当前区域内的数据, 你需要在项目管理页面里上传这个项目的地理范围的 geojson 文件, 比如的你的项目时苏州的效果，那么应该上传一个苏州的轮廓范围的 geojson , 当一个图层开启了这个选项, 那么在苏州轮廓范围的数据不会被显示 |  | |
| 渐进加载数据 | 当数据量比较大时可以开启，将拥有更好的体验 | ||
| 合并数据 | 一般是建筑物, 当数据量比较大时可以开启, 会拥有更好的性能表现 |
警告
开启了 合并数据 的图层将失去事件交互能力
多个页面里有很多图层都是重复的怎样复用？
当一个项目了有多个页面，且每个页面里都存在通用的图层，他们是完全一样的，这时我们可以：
- 新建一个页面里面专门用来存放公共的图层 , 假设整个页面叫
公共资源图层页面 - 在这个页面里把配置好你需要的图层
- 将所有的图层的
图层共享打开
- 项目开发时，我们可以先加载这个共享页面的数据，加载完了在切换到对应的目标页面, 这样共享的图层会永远的残留在地图上，从而做到每个页面都会有这些共享的图层
联系方式
邮箱:mehudeyi@163.com
QQ:1390110605