GIS服务托管服务

mapplat 也可以用来简单的托管一些GIS方面的数据服务

警告

该页面内的内容针对的是开发人员或者运维人员, 如果你是非技术人员可以忽略

mapplat 怎样托管瓦片(tile)集合

目前 mapplat 只能托管mbtiles集合 , mbtile 里数据不限坐标系, 投影, 切图参数等, 支持任意坐标投影, 只要你请求mbtile的投影信息和mbtiles里的一样即可

警告

mbtiles 一般有我提供, 如果你也会制作mbtiles文件你可以制作好了然后放到 mapplat 里进行托管

/[path]/mappplat/serverconfig.js里开启 mbtiles 选项

//serverconfig.js
//其他配置项

mbtiles: true;

重启 mapplat

 node  --max-old-space-size=80000 --tls-min-v1.0  index

将你的 mbtiles 文件放到 mapplat 的 /[path]/mappplat/store/mbtiles文件夹下或者使用代理服务数据管理页面进行数据上传
假设你的文件名叫 hello.mbtiles
那么你的 tile 请求地址为：[ip]:[port]/mapplat/common/mbtiles/hello/{z}/{x}/{y}

//[ip]:[port]/mapplat/common/mbtiles/hello/{z}/{x}/{y}
//mapplat为可选项,如果你的服务地址必须要mapplat,那就加上，否则去掉,和你部署mapplat的方式有关，默认mapplat是没有[mapplat]的，但是如果你是做一些反向代理是么的可能就需要加上去
//such as：https://mapplat.z7z7z7.cn/mapplat/common/mbtiles/countries-raster/{z}/{x}/{y}

test tile url
demo

mapplat 怎样托管矢量瓦片(vectortile)集合

目前 mapplat 只能托管mbtiles集合, mbtiles里必须存放 gizp 后的 mvt 数据

警告

mbtiles 一般有我提供, 如果你也会制作mbtiles文件你可以制作好了然后放到 mapplat 里进行托管

/[path]/mappplat/serverconfig.js里开启 mbtiles 选项

//serverconfig.js
//其他配置项

mbtiles: true;

重启 mapplat

 node  --max-old-space-size=80000 --tls-min-v1.0  index

将你的 mbtiles 文件放到 mapplat 的 /[path]/mappplat/store/vt-mbtiles文件夹下或者使用代理服务数据管理页面进行数据上传
假设你的文件名叫 hello.mbtiles
那么你的 tile 请求地址为：[ip]:[port]/mapplat/common/vt-mbtiles/hello/{z}/{x}/{y}

//[ip]:[port]/mapplat/common/vt-mbtiles/hello/{z}/{x}/{y}
//mapplat为可选项,如果你的服务地址必须要mapplat,那就加上，否则去掉,和你部署mapplat的方式有关，默认mapplat是没有[mapplat]的，但是如果你是做一些反向代理是么的可能就需要加上去
//such as：https://mapplat.z7z7z7.cn/mapplat/common/vt-mbtiles/%E5%90%B4%E6%B1%9F%E5%8C%BA_polygon/12/3424/1675

test vt tile url

mapplat里怎样托管shp文件?

警告

shp 只支持 WGS84(EPSG:4326) 或者 CGCS(EPSG:4490) 坐标系经纬度投影的数据, 其他的投影坐标的数据文件不支持

将你的 shp 的zip压缩包文件放到 mapplat 的 /[path]/mappplat/store/shpfiles文件夹下或者使用代理服务数据管理页面进行数据上传
shp数据源是用来为其他服务服务, 比如矢量切片, WMTS等，其没有直接请求接口

DANGER

shp 文件集合请用zip压缩, 且只能用zip压缩

mapplat 怎样将 geojson 文件托管为矢量切片(vectortile)服务

警告

geojson 只支持 WGS84(EPSG:4326) 或者 CGCS(EPSG:4490) 坐标系经纬度投影的数据, 其他的投影坐标的数据文件不支持

将你的 geojson 文件放到 mapplat 的 /[path]/mappplat/store/tile-geojson文件夹下或者使用代理服务数据管理页面进行数据上传
假设你的文件名叫 hello.geojson
那么你的 tile 请求地址为： [ip]:[port]/mapplat/common/vt-tile/hello/{z}/{x}/{y}

DANGER

服务端匹配你的文件请求规则: 优先匹配 tile-geojson 里的文件，如果匹配不到，将去匹配 shpfiles 里的文件

//[ip]:[port]/mapplat/common/vt-tile/hello/{z}/{x}/{y}
//mapplat为可选项,如果你的服务地址必须要mapplat,那就加上，否则去掉,和你部署mapplat的方式有关，默认mapplat是没有[mapplat]的，但是如果你是做一些反向代理是么的可能就需要加上去
//such as：https://mapplat.z7z7z7.cn/mapplat/common/vt-tile/sihongwater/{z}/{x}/{y}

test tile url

如果想一个瓦片内请求多个geojson图层，你可以用 , 来分割多个图层, 比如： wujiangroad,wujiangbuilding

请求地址如下：

//[ip]:[port]/mapplat/common/vt-tile/wujiangroad,wujiangbuilding/{z}/{x}/{y}

mapplat里怎样托管WFS服务

操作步骤：

/[path]/mappplat/serverconfig.js里开启 wfs 选项

//serverconfig.js
//其他配置项
wfs: true;

重启 mapplat

 node  --max-old-space-size=80000 --tls-min-v1.0  index

将你的 geojson 文件放到 mapplat 的 /[path]/mappplat/store/wfs-geojson文件夹下或者使用代理服务数据管理页面进行数据上传

警告

geojson 只支持 WGS84(EPSG:4326) 或者 CGCS(EPSG:4490) 坐标系经纬度投影的数据, 其他的投影坐标的数据文件不支持

数据的请求接口地址定义 [ip]:[port]/mapplat/common/wfs/:fileName/:lnglats

参数	说明	举例
filename	你的geojson文件名	shanghai
lnglats	经纬度坐标串	`120,31`

TIP

关于经纬度串参数如下:

// 点,经度和纬度用 ,
const lnglats = '120,31';
//线,经纬度用 ;
const lnglats = '120,31;122,32;........';
//面,和线一样，唯一的区别就是首尾的坐标要一样,表示闭合(ring)
const lnglats = '120,31;122,32;........;120,31'

假设你的文件名叫 hello.geojson, 那么你的服务请求地址为：
[ip]:[port]/mapplat/common/wmts/hello/120,31

shanghai poi wfs test

业务一般的业务代码为：

//查询wfs图层的数据
function query(lnglats) {
    fetch('http://ip:port/common/wfs/shanghaipoi/' + lnglats).then(res => res.json()).then(geojson => {
        const overlays = YY.GeoJSON.toGeometry(geojson);
        vectorLayer2.addOverlay(overlays);
    })
}

//绘制工具
const drawTool = new YY.DrawTool(map, function(e) {
    const overlay = e.geometry;
    vectorLayer2.addOverlay(overlay);
    let lnglats = (overlay.getLngLats ? overlay.getLngLats() : overlay.getLngLat());
    //圆
    if (overlay instanceof YY.Circle) {
        const geojson = overlay.toGeoJSON();
        lnglats = geojson.geometry.coordinates;
    }
    //经纬度数组格式化成经纬度字符串
    const lnglatStr = YY.GH.arrayToStr(lnglats);
    console.log(lnglatStr);
    query(lnglatStr);
});

DANGER

服务端匹配你的文件请求规则: 优先匹配 wfs-geojson 里的文件，如果匹配不到，将去匹配 shpfiles 里的文件

mapplat里怎样托管动态wmts服务?

操作步骤：

/[path]/mappplat/serverconfig.js里开启 wmts 选项

//serverconfig.js
//其他配置项
wmts: true;

重启 mapplat

 node  --max-old-space-size=80000 --tls-min-v1.0  index

将你的 geojson 文件放到 mapplat 的 /[path]/mappplat/store/wmts-geojson文件夹下或者使用代理服务数据管理页面进行数据上传

警告

geojson 只支持 WGS84(EPSG:4326) 或者 CGCS(EPSG:4490) 坐标系经纬度投影的数据, 其他的投影坐标的数据文件不支持

假设你的文件名叫 hello.geojson, 那么你的 tile 请求地址为：
[ip]:[port]/mapplat/common/wmts/hello/{z}/{x}/{y}/3857 或者
[ip]:[port]/mapplat/common/wmts/hello/{z}/{x}/{y}/4326

one tile request test

DANGER

服务端匹配你的文件请求规则: 优先匹配 wmts-geojson 里的文件，如果匹配不到，将去匹配 shpfiles 里的文件
shp datasource test

瓦片的请求接口地址定义 [ip]:[port]/mapplat/common/wmts/:fileName/{z}/{x}/{y}/:epsg

参数	说明	举例
filename	你的geojson文件名	shanghai
epsg	坐标投影参数	`3857` / `4326`

怎样加载服务?

yymap 里直接创建个 TileLayer 就可以了, 当然其他的引擎也可以加载，不限制yymap, 比如leafletjs

   const tileLayer = YY.LayerLookup.createTileLayer('https://mapplat.z7z7z7.cn/mapplat/common/wmts/shanghai/{z}/{x}/{y}/3857', {
       maxBounds: [
           [-180, -90],
           [180, 90]
       ],
       // debug: true,
       minZoom: 4,
       // preview: getAssetPath() + 'images/3.png'
   }, {
       code: 'EPSG:3857'
   });
   map.addBaseLayer(tileLayer);

shanghai wmts test
shanghai wmts custom style by leafletjs

怎样动态传样式

在瓦片请求地址里携带你的样式参数即可, 如果不传服务端将采用默认配置的样式

//服务端默认的样式
const DEFAULTSTYLE = {
    polygonFill: '#6691BD',
    polygonOpacity: 1,

    lineColor: '#000000',
    lineWidth: 1,
    lineOpacity: 1,

    markerFile: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA7dJREFUWEfFll2ME1UUx/9nptPuhkUTlkQjLMIquj7wgDMlrlF80Wh0JcEE4pNIO7ewUSO86KPG8A4GzWpndtUHH8SoiYBZEj8iRjB2ukr4MhoqLGFVoiKwcddOp8fMlMFuO53OdIncPnTmzjnn/zvnnntzCdd50HXWRyyAL/jlxKmJqSwzD0mE1cxYAoYDojMAFwHar2v5d+IkFRnAtHI6mHeAcFOYAIHOEtFLGfXNt6KARAIwi2I3GM9GCXjVhvGanjaea+fTFsAsiN2gmOK+agSIUICx4pbNVa6ONWZRGl+Gk++tnDN9z4sT6B240JSwRFImbDlCAUat3CSD+9yoM+d78OO7q/DPtNSyqkp3FZIM3L7hOBYsveTZuT2R1fLLWjm1BDCt3CaA3/YdD7/wELrkhd7r5b/K3j+7P2ZPRqL/QnX1zmDNjs/qNOnpVrsjBEDsAbDBj3JweAi39N/gvU6VLqHsVGBXKqh6AEBCktGdTF4VXTuyrz7p93XN2BhUhbAKnAK4vx7Af7YdB7N2GfcNpnHHnUsxOXken37+NZIJBalEwjObC0AlXcvfFg+gICogyEEAM3YZyVQSm55ah5sHgNmLwPgHx/D90ePoSXU3AzAcPW3UyBpG6woUxB8gLAoCmLVtKCkFT65fV2s0CZg4cgxHjp7AglRXEMCfetrojQUwWhTfMiMdvAQVuBCDaRUrbu3Dualf8eWhb5CUE0gpShMAEQpZ1VgTC8C0xPMAdgUBuHONTVi//s09gG26ZrwaC2Dk8NbliuL87DtZrzyAv3+pbUN/uNuwWmUQhW9D25ZXDA++cToWgGtsFnMfg/lx9/nCicWYPDD39AsK6M71PVjColW/1T4T7dXVfK1ZAkboSZgvioclxngr5yjzVcIjOdU40BGA62RYYi8BQ1HEGm0Y2Cc0w6tgxwBjVu7uqnfZiD8kkJrR8hPzAnCdR4u5ncy8LQ4CEe3Kqvnt7Xza3gc8gB8yC3laLgFY3C7gle+/U4/Tnx0Yu9zOPhKA1wtFfTMxNd0NggSYOCNU89pdyXwRwxIfErA+LCsGPhKa8US7zP3vkSvgOox8t3W54jgnAdQO/OYxa8vyXcOrgw+dIIdYAG4AsyAyIIwGyjOyetqItEwdVcB3Mi2xH8CjDRCf6JrxWNTSzwtgz6Ht3ReT0z8RsMQNxMC5G8s9Kzfeu3PmfwG4sivuJ6aDHgDxWqGaX8UVd+1j90C9iFHQn4EECNV8vRPxeQN0KlrvN68KXAuAfwGPn0oweUikaQAAAABJRU5ErkJggg==',
    markerWidth: 32,
    markerHeight: 32,
    markerDy: -32,
    markerDx: 0
};

//动态传样式示例
function enCodeStyle(style) {
    return encodeURIComponent(JSON.stringify(style));
}
const style0 = {
    lineColor: 'black',
    lineWidth: 1,
    lineDasharray: [6, 6],
    polygonFill: "#FCF9F2",
    polygonOpacity: 0.5
};

const tileLayer0 = YY.LayerLookup.createTileLayer('https://mapplat.z7z7z7.cn/mapplat/common/wmts/shanghai/{z}/{x}/{y}/3857?style=' + enCode(style0), {
    maxBounds: [
        [-180, -90],
        [180, 90]
    ],
    // debug: true,
    minZoom: 4,
    // preview: getAssetPath() + 'images/3.png'
}, {
    code: 'EPSG:3857'
});

DANGER

因为浏览器请求的限制, 传的style参数不可太大，尤其是点的样式的 markerFile

面的样式

参数	说明	举例
polygonFill	填充色	'#ffffff'
polygonOpacity	填充透明度	1
lineColor	线的颜色	'#000000'
lineWidth	线的宽度	1
lineDasharray	虚线间隔, 不想虚线就不要传	[5, 5]
lineOpacity	线的透明度	1
lineJoin
lineCap

线的样式

参数	说明	举例
lineColor	线的颜色	'#000000'
lineWidth	线的宽度	1
lineDasharray	虚线间隔, 不想虚线就不要传	[5, 5]
lineOpacity	线的透明度	1
lineJoin
lineCap

点的样式

警告

markerFile 的值必须是base64, markerFile 不可太大，否则会超过浏览器 get 请求的最大长度限制

const DEFAULTSTYLE = {
    markerFile: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA7dJREFUWEfFll2ME1UUx/9nptPuhkUTlkQjLMIquj7wgDMlrlF80Wh0JcEE4pNIO7ewUSO86KPG8A4GzWpndtUHH8SoiYBZEj8iRjB2ukr4MhoqLGFVoiKwcddOp8fMlMFuO53OdIncPnTmzjnn/zvnnntzCdd50HXWRyyAL/jlxKmJqSwzD0mE1cxYAoYDojMAFwHar2v5d+IkFRnAtHI6mHeAcFOYAIHOEtFLGfXNt6KARAIwi2I3GM9GCXjVhvGanjaea+fTFsAsiN2gmOK+agSIUICx4pbNVa6ONWZRGl+Gk++tnDN9z4sT6B240JSwRFImbDlCAUat3CSD+9yoM+d78OO7q/DPtNSyqkp3FZIM3L7hOBYsveTZuT2R1fLLWjm1BDCt3CaA3/YdD7/wELrkhd7r5b/K3j+7P2ZPRqL/QnX1zmDNjs/qNOnpVrsjBEDsAbDBj3JweAi39N/gvU6VLqHsVGBXKqh6AEBCktGdTF4VXTuyrz7p93XN2BhUhbAKnAK4vx7Af7YdB7N2GfcNpnHHnUsxOXken37+NZIJBalEwjObC0AlXcvfFg+gICogyEEAM3YZyVQSm55ah5sHgNmLwPgHx/D90ePoSXU3AzAcPW3UyBpG6woUxB8gLAoCmLVtKCkFT65fV2s0CZg4cgxHjp7AglRXEMCfetrojQUwWhTfMiMdvAQVuBCDaRUrbu3Dualf8eWhb5CUE0gpShMAEQpZ1VgTC8C0xPMAdgUBuHONTVi//s09gG26ZrwaC2Dk8NbliuL87DtZrzyAv3+pbUN/uNuwWmUQhW9D25ZXDA++cToWgGtsFnMfg/lx9/nCicWYPDD39AsK6M71PVjColW/1T4T7dXVfK1ZAkboSZgvioclxngr5yjzVcIjOdU40BGA62RYYi8BQ1HEGm0Y2Cc0w6tgxwBjVu7uqnfZiD8kkJrR8hPzAnCdR4u5ncy8LQ4CEe3Kqvnt7Xza3gc8gB8yC3laLgFY3C7gle+/U4/Tnx0Yu9zOPhKA1wtFfTMxNd0NggSYOCNU89pdyXwRwxIfErA+LCsGPhKa8US7zP3vkSvgOox8t3W54jgnAdQO/OYxa8vyXcOrgw+dIIdYAG4AsyAyIIwGyjOyetqItEwdVcB3Mi2xH8CjDRCf6JrxWNTSzwtgz6Ht3ReT0z8RsMQNxMC5G8s9Kzfeu3PmfwG4sivuJ6aDHgDxWqGaX8UVd+1j90C9iFHQn4EECNV8vRPxeQN0KlrvN68KXAuAfwGPn0oweUikaQAAAABJRU5ErkJggg==',
    markerWidth: 32,
    markerHeight: 32,
    markerDy: -32,
    markerDx: 0
};

参数	说明	举例
markerFile	图标, 其必须是base64编码
markerWidth	图标宽度	32
markerHeight	图标高度	32
markerDx	图标水平平移量	0
markerDy	图标垂直平移量	0
textName	文本，支持模板, 其会自动取数据的模板属性	`{name}` 会自动读取数据的 `name` 字段
textSize	文本大小	12
textFill	文本颜色	'#000000'
textHaloFill	文字描边颜色	#ffffff'
textHaloRadius	文字描边半径	1
textDx	文本水平平移量	0
textDy	文本垂直平移量	0

DANGER

markerFile 的值必须是base64, markerFile 不可太大，否则会超过浏览器 get 请求的最大长度限制

shanghai custom style wmts test

热区图

在传递style参数是开启 heat 选项即可

//默认的热区样式
const HeatOptions = {
    'max': 15,
    'gradient': {
        0.4: 'blue',
        0.6: 'cyan',
        0.7: 'lime',
        0.8: 'yellow',
        1.0: 'red'
    },
    'radius': 15,
    'blur': 15,
    'minOpacity': 0.05,
    'size': 8
};

//热区动态传样式示例
function enCodeStyle(style) {
    return encodeURIComponent(JSON.stringify(style));
}

const style5 = {
    //是否开启热区
    heat: true,
    //色板,不传采用默认的值
    // 'gradient': {
    //     0.4: 'blue',
    //     0.6: 'cyan',
    //     0.7: 'lime',
    //     0.8: 'yellow',
    //     1.0: 'red'
    // },
    'gradient': {
        0.4: '#FFF7ED',
        0.6: '#FDD59F',
        0.7: '#FC8E58',
        0.8: '#D82C19',
        1.0: '#800000'
    },
    // debug: true
};

const tileLayer5 = YY.LayerLookup.createTileLayer(`http://localhost:9600/common/wmts/shanghaipoi/{z}/{x}/{y}/3857?style=${enCodeStyle(style5)}`, {
    maxBounds: [
        [-180, -90],
        [180, 90]
    ],
    // debug: true,
    minZoom: 4,
    // preview: getAssetPath() + 'images/3.png'
}, {
    code: 'EPSG:3857'
});

default heatmap
heatmap custom style
heatmap custom style by leaflet

mapplat 怎样将代理在线切片并缓存?

有时业务需要访问在线的切片, 但是切片速度有点慢(比如天地图)，这是你可以代理在线切片并缓存, 这样就可以加快切片访问速度了

配置 /[path]/mappplat/serverconfig.jstilelayerMap里你需要代理的切片名字和地址

//serverconfig.js
//其他配置项
tilelayerMap: {
        //高德的矢量底图
        'amap-vector': 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
        //arcgis 的影像图
        'arcgis-image': 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
        //配置你的切片名字和地址
    },
    tileproxy: true

DANGER

注意配置的切片名字不能重复, 要做到切片名字的唯一性, 比如这样的错误示例

tilelayerMap: {
    //高德的矢量底图
    'amap-vector': 'xxxxx',
    'amap-vector': 'yyyyy',
},

重启 mapplat

 node  --max-old-space-size=80000 --tls-min-v1.0  index

tileproxy的请求地址规则：

[ip]:[port]/mapplat/common/tileproxy/:layerName/{z}/{x}/{y}

参数	说明
layerName	就是配置的tilelayer代理的名字, 比如上面的 `amap-vector` , `arcgis-image`

// [ip]:[port]/mapplat/common/tileproxy/amap-vector/{z}/{x}/{y}

tile layer proxy test
demo

如果想删除缓存的切片, 可以进入 代理服务数据管理页面进行缓存清除

mapplat 怎样将4326/4490的瓦片重投影为墨卡托(3857)?

有时业务需要访问在线的切片, 但是切片是 4326/4490 投影的(比如天地图)，但是你想要以 墨卡托的 方式加载(比如mapbox只能加载3857的切片), 这时你就可以使用该服务了

操作步骤：

配置 tilelayerMap里你需要代理的切片名字和地址

//serverconfig.js
//其他配置项
tilelayerMap: {
    ...,
    //  这里只做示范
    'tdt': 'https://t{s}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}'
    //配置你的切片名字和地址
}

DANGER

注意配置的切片名字不能重复, 要做到切片名字的唯一性, 比如这样的错误示例

tilelayerMap: {
    //天地图的矢量底图
    'tdt': 'xxxxx',
    'tdt': 'yyyyy',
},

重启 mapplat

 node  --max-old-space-size=80000 --tls-min-v1.0  index

请求地址规则：

[ip]:[port]/mapplat/common/tiletransform/:layerName/{z}/{x}/{y}

参数	说明
layerName	就是配置的tilelayer代理的名字, 比如上面的 `tdt`

// [ip]:[port]/mapplat/common/tiletransformy/tdt/{z}/{x}/{y}

tile transform test

如果想删除缓存的切片, 可以进入 代理服务数据管理页面进行缓存清除

mapplat 怎样将多个瓦片服务合并?

+ =

有时业务需要访问在线的多个切片, 为了减少前端的网络请求和压力(将多个瓦片合并成一张瓦片), 这时你就可以使用该服务了

操作步骤：

配置 tilelayerMap里你需要代理的切片名字和地址

//serverconfig.js
//其他配置项
tilelayerMap: {
    ...,
    //  这里只做示范
    'amap-image': 'https://webst04.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
    'amap-label': 'https://wprd02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8&ltype=11',
    //配置你的切片名字和地址
}

DANGER

注意配置的切片名字不能重复, 要做到切片名字的唯一性, 比如这样的错误示例

tilelayerMap: {
    //天地图的矢量底图
    'tdt': 'xxxxx',
    'tdt': 'yyyyy',
},

重启 mapplat

 node  --max-old-space-size=80000 --tls-min-v1.0  index

请求地址规则：

[ip]:[port]/mapplat/common/tilemerge/:layerName/{z}/{x}/{y}

参数	说明
layerName	就是配置的tilelayer代理的名字, 比如上面的 `amap-image` , 多个切片服务请用 `,` 分割, 比如 `amap-image,amap-label`

// [ip]:[port]/mapplat/common/tilemerge/amap-image,amap-label/{z}/{x}/{y}

demo

如果想删除缓存的切片, 可以进入 代理服务数据管理页面进行缓存清除

mapplat 怎样将 postgis里的表托管为矢量切片(vectortile)服务

在/[path]/mappplat/serverconfig.js文件里配置你的数据库连接信息

DANGER

保管好你的数据库信息，不要随便泄漏，这里这样做的原因就是用别名来代替数据库连接信息
防止数据库信息泄漏，对外暴露的只是一个别名，真正的连接信息放在服务端了

   postgisMap: {
       //默认的我添加的数据库连接信息
       'defaultName': 'postgres://postgres:123456@localhost:5432/gistest',
       //添加你的数据连接信息,可以参考上面的信息配置
       'hellotest': 'postgres://[username]:[passowrd]@[ip]:[port]/[database]'
       // ...
   },

重启 mapplat

 node  --max-old-space-size=80000 --tls-min-v1.0  index

tile地址的规则： [ip]:[port]/mapplat/common/postgis/vt/[pgName]/[tableName]/[geoFiled]/{z}/{x}/{y}/[fields]
- pgName 数据库名字, 就是你在postgisMap配置的，比如上面配置的 hellotest
- tableName 数据库里的表名, 比如 wujianggrid
- geoFiled 地理信息字段，默认 geom
- fields 需要携带的其他信息字段默认 * 表示所有字段, 其格式 col1,col2,col3,.... , 比如 id,name,fclass,osm_code
假设你的表叫 wujianggrid
那么你的 tile 请求地址为：[ip]:[port]/mapplat/common/postgis/vt/hellotest/wujianggrid/geom/{z}/{x}/{y}/name,id

test url
demo

mapplat提供postgis里表的查询和返回数据为(geojson)

在/[path]/mappplat/serverconfig.js文件里配置你的数据库连接信息

DANGER

   postgisMap: {
       //默认的我添加的数据库连接信息
       'defaultName': 'postgres://postgres:123456@localhost:5432/gistest',
       //添加你的数据连接信息,可以参考上面的信息配置
       'hellotest': 'postgres://[username]:[passowrd]@[ip]:[port]/[database]'
       // ...
   },

重启 mapplat

 node  --max-old-space-size=80000 --tls-min-v1.0  index

地址请求规则： [ip]:[port]/mapplat/common/postgis/querylayer?pgName=xxxx&tableName=xxxx
- pgName 数据库名字, 就是你在postgisMap配置的，比如上面配置的 hellotest
- tableName 数据库里的表名, 比如 wujianggrid
假设你的表叫 wujianggrid
那么你的请求地址为：[ip]:[port]/mapplat/common/postgis/querylayer?pgName=defaultName&tableName=wujianggrid

test url

TIP

mapplat为可选项, 如果你的服务地址必须要mapplat, 那就加上，否则去掉, 和你部署mapplat的方式有关，默认mapplat是没有[mapplat]的，但是如果你是做一些反向代理是么的可能就需要加上去

mapplat 提供postgis表的空间查询(spatialquery)

在/[path]/mappplat/serverconfig.js文件里配置你的数据库连接信息

DANGER

   postgisMap: {
       //默认的我添加的数据库连接信息
       'defaultName': 'postgres://postgres:123456@localhost:5432/gistest',
       //添加你的数据连接信息,可以参考上面的信息配置
       'hellotest': 'postgres://[username]:[passowrd]@[ip]:[port]/[database]'
       // ...
   },

重启 mapplat

 node  --max-old-space-size=80000 --tls-min-v1.0  index

地址请求规则： [ip]:[port]/mapplat/common/postgis/spatialquery
- pgName 数据库名字, 就是你在postgisMap配置的，比如上面配置的 hellotest
- tableName 数据库里的表名, 比如 wujianggrid
- lnglats 经纬度串, 比如 120,31;123,43;......

警告

该方法为post请求

假设你的表叫 wujianggrid
那么你的请求地址为：[ip]:[port]/mapplat/common/postgis/spatialquery

// 参数：
{
    pgName: 'defaultName',
    tableName: 'wujianggrid',
    lnglats: '120,31;122,32;134,44;.......'
}

//如果是圆查询

{
    pgName: 'defaultName',
    tableName: 'wujianggrid',
    lnglats: '120,31',
    radius: 100
}

TIP

mapplat 怎样对瓦片(tile)进行剪裁

有时业务里需要对瓦片进行区域剪裁(比如瓦片的的范围很大, 但是只想显示某个区域), 可以用 mapplat 来代理剪裁下

截图展现了本来是一个全国的瓦片数据，现在只显示上海的区域栅格数据

操作步骤：

/[path]/mappplat/serverconfig.js里开启 tilemask 选项

//serverconfig.js
//其他配置项

tilemask: true;

重启 mapplat

 node  --max-old-space-size=80000 --tls-min-v1.0  index

tile-mask的请求地址规则：

[ip]:[port]/mapplat/common/tile-mask/:fileName/{z}/{x}/{y}/:epsg?tileUrl={tileUrl}

参数	说明
fileName	区域的geojson文件名
epsg	投影选项, 目前支持 `3857` , `4326` , 如果你的瓦片数据是墨卡托投影的就填 `3857` ，如果是经纬度投影就填 `4326`
tileUrl	需要代理的瓦片服务地址, 例如：https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}

准备好区域的GeoJSON数据, 一般是个Polygon(MultiPolygon)数据
将GeoJSON数据放到 /[path]/mappplat/store/tile-mask 文件夹下或者使用代理服务数据管理页面进行数据上传
假设你的文件名字叫上海.geojson, 那么你的请求地址为:

[ip]:[port]/mapplat/common/tile-mask/上海/{z}/{x}/{y}/3857?tileUrl=https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}

DANGER

服务端匹配你的文件请求规则: 优先匹配 tile-mask 里的文件，如果匹配不到，将去匹配 shpfiles 里的文件

TIP

tileUrl参数的值就是你本来瓦片的服务地址，这里演示了加载高德矢量图资源

test 高德矢量图只显示上海的区域数据

test 高德影像图只显示上海的区域数据

test 高德矢量图只显示吴江区的区域数据

上海 demo

DANGER

目前仅仅支持标准的全球墨卡托和经纬度切片服务, 自定义切图参数的切片服务不支持

mapplat 怎样对瓦片(tile)进行反向剪裁

有时业务里需要对瓦片进行区域进行反向剪裁(挖洞), 可以用 mapplat 来代理剪裁下

截图展现了本来是一个全国的瓦片数据，现在将上海的区域栅格数据挖掉

操作步骤：

/[path]/mappplat/serverconfig.js里开启 tilemask 选项

//serverconfig.js
//其他配置项

tilemask: true;

重启 mapplat

 node  --max-old-space-size=80000 --tls-min-v1.0  index

tile-mask的请求地址规则：

[ip]:[port]/mapplat/common/tile-mask-rever/:fileName/{z}/{x}/{y}/:epsg?tileUrl={tileUrl}

参数	说明
fileName	区域的geojson文件名
epsg	投影选项, 目前支持 `3857` , `4326` , 如果你的瓦片数据是墨卡托投影的就填 `3857` ，如果是经纬度投影就填 `4326`
tileUrl	需要代理的瓦片服务地址, 例如：https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}

准备好区域的GeoJSON数据, 一般是个Polygon(MultiPolygon)数据
将GeoJSON数据放到 /[path]/mappplat/store/tile-mask 文件夹下或者使用代理服务数据管理页面进行数据上传
假设你的文件名字叫上海.geojson, 那么你的请求地址为:

[ip]:[port]/mapplat/common/tile-mask-rever/上海/{z}/{x}/{y}/3857?tileUrl=https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}

DANGER

服务端匹配你的文件请求规则: 优先匹配 tile-mask 里的文件，如果匹配不到，将去匹配 shpfiles 里的文件

TIP

tileUrl参数的值就是你本来瓦片的服务地址，这里演示了加载高德矢量图资源

DANGER

目前仅仅支持标准的全球墨卡托和经纬度切片服务, 自定义切图参数的切片服务不支持

mapplat 怎样提供路线规划服务

有时在内网内无法使用外网的高德/百度等LBS的路线规划服务，这时可能需要自己搭建一个路线规划功能服务, mapplat 里可以直接搭建该服务

操作步骤：

/[path]/mappplat/serverconfig.js里开启 roadpath 选项

//serverconfig.js
//其他配置项

roadpath: true;

重启 mapplat

 node  --max-old-space-size=80000 --tls-min-v1.0  index

将路网的数据预处理成拓扑的json数据(这个数据处理过程需要我来处理), 必须要求把原始数据处理成对应的拓扑文件才行

联系方式

邮箱:mehudeyi@163.com
QQ:1390110605

将json数据放到 /[path]/mappplat/store/road-json 文件夹下或者使用代理服务数据管理页面进行数据上传

DANGER

处理好的拓扑json文件不是 GeoJSON 文件的, 请注意区分，不要混淆了

数据的请求接口地址 [ip]:[port]/mapplat/common/roadpath/:fileName/:fromlnglat/:tolnglat/:bufferradius

参数	说明
fileName	json文件名, 比如 `kunshanroad`
fromlnglat	起点经纬度, 比如: `120,31`
tolnglat	终点经纬度, 比如: `120,32`
bufferradius	`查找起点终点的搜索的半径(M)` , 后台服务要根据你传入的起点经纬度去路网上查找起始点的, 所以需要一个buffer范围来搜索下, 如果搜索不到起点或者终点, 可能需要你扩大搜索半径

假设你的文件名字叫kunshanroads.json, 那么你的请求地址为:
[ip]:[port]/mapplat/common/roadpath/kunshanroad/:fromlnglat/:tolnglat/:bufferradius

//举例
//http://localhost:9600/common/roadpath/kunshanroad/120.93420325594843,31.380125303120366/120.95308845777424,31.38050721461903/40

其搜索结果的准确性和体验有以下要素决定
- 数据的完善性, 即原始的路网数据的完善性, 所以当原始的路网数据不完善时，其搜索的结果是很差的，甚至是错的等
- 更加优化的算法(我们会持续优化)

昆山市路网数据规划服务演示

//简单的示例代码
const baseURL = 'http://localhost:9600';
fetch(`${baseURL}/common/roadpath/kunshanroad/${fromLngLat}/${toLngLat}/${bufferRadius}`).then(res => res.json()).then(json => {
    if (json.ok) {
        const coordinates = json.data.map(d => {
            const {
                x,
                y
            } = d.data;
            return [x, y];
        });
        const line = new YY.LineString(coordinates, YY.Style.formatLine({
            lineColor: 'red',
            lineWidth: 4
        }));
        layer.addOverlay(line);
    } else {
        alert(json.message);
    }
})

返回的结果数据结构

json

{
    "ok": true,
    "message": "success",
    "data": [
        //拓扑节点信息
        {
        
            //节点所在的道路信息
            "properties": {
                "osm_id": "362212330",
                "code": 5114,
                "fclass": "secondary",
                "name": null,
                "ref": null,
                "oneway": "B",
                "maxspeed": 0,
                "layer": 0,
                "bridge": "F",
                "tunnel": "F",
                "altitude": 0,
                "name_2": "昆山市",
                "_color": "#bb11d6",
                "center": "(3:121.0027321253702,31.31666267522209,0)"
            },
            "id": 24312,
            "links": {},
            //节点自身信息
            "data": {
                
                "lineId": 3460,//道路的id
                "id": 24312,//节点ID
                "x": 120.9523649972982,//经度
                "y": 31.397359283009706,//纬度
                "mx": 13464355.681741402,
                "my": 3684462.0468256813
            }
        },
        {
            "properties": {
                "osm_id": "556194141",
                "code": 5115,
                "fclass": "tertiary",
                "name": "北门路",
                "ref": null,
                "oneway": "B",
                "maxspeed": 0,
                "layer": 0,
                "bridge": "F",
                "tunnel": "F",
                "altitude": 0,
                "name_2": "昆山市",
                "_color": "#bb11d6",
                "center": "(3:121.0027321253702,31.31666267522209,0)"
            },
            "id": 77819,
            "links": {},
            "data": {
                "lineId": 6328,
                "id": 77819,
                "x": 120.9523649972982,
                "y": 31.397359283009706,
                "mx": 13464355.681741402,
                "my": 3684462.0468256813
            }
        },
      
    ]
}

警告

该方案只是个备用方案, 如果你的项目环境允许外网的话，最好使用外网的在线LBS服务, 因为外网的LBS服务里还包含交通流量分析, 拥堵分析等, 而我们部署的这个服务仅仅是用来在解决内网无法使用在线LBS服务而已, 因为其和互联网是隔离的，所以无法提供这些数据服务

mapplat里查询polygon的地形数据

有时业务里需要做一些行政区的地形效果, 需要地形数据且是非规律的Polygon查询, 自己手写这个功能比较麻烦, mapplat 里做了这个功能的代理, 对地形数据瓦片做了剪裁和裙边

自己做的这个功能的话主要难点有:

不规则的polygon地形数据的剪裁
怎样识别返回图片的裙边

DANGER

该功能只能在互联网环境下使用, 如果在内网内使用需要离线rgb-tile数据瓦片

操作步骤：

/[path]/mappplat/serverconfig.js里开启 rgbtile 选项

//serverconfig.js
//其他配置项

rgbtile: true;

重启 mapplat

 node  --max-old-space-size=80000 --tls-min-v1.0  index

数据的请求接口地址 [ip]:[port]/mapplat/common/rgb-tile/query
- post方法
- 参数为gejson: 其必须是polygon feature
  用axios请求举例:

   axios({
       method: 'post',
       url: '[ip]:[port]/mapplat/common/rgb-tile/query',
       data: {
           //该值必须是string
           geojson: JSON.stringify(feature)
       }
   }).then(res => {
       //返回的结果
       console.log(res.data);

   });

返回的结果数据结构

json

  {
    "ok":true,
    "message":"",
    "data":"",//PNG图片的Base64编码
    "bbox":[] //图片的经纬度范围[minx,miny,maxx,maxy]
  }

其中返回的图片是这个样子, 其是一个mapbox rgb 规范的图片

警告

图片数据带了黑色的裙边, 在业务里使用时需要对黑色的裙边做特殊化处理, 之所以这么做是因为方便快速识别裙边, 当遇到RGB编码颜色是黑色rgb(0, 0, 0)时就认为其是裙边了

//举例代码:
const R = imgdata[i],
    G = imgdata[i + 1],
    B = imgdata[i + 2],
    A = imgdata[i + 3];
let height = 0;
//黑色的边框,你可以任意处理黑色边框,这里演示了将黑色边框处理成红色,也可以处理成透明的等
if (R === 0 && G === 0 && B === 0 && A > 0) {
    //黑色边框的地方height值为0 
    imageData1.data[i] = 255;
    imageData1.data[i + 1] = 0
    imageData1.data[i + 2] = 0
    imageData1.data[i + 3] = 255;
} else if (A > 0) {
    //地形解码,根据RGB值求出高度值
    height = -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1);
    height = Math.max(height, 0);
}

有了数据图片你就可以做些业务效果了，比如根据不同高度进行着色或者3D的效果

重庆市行政区根据海拔设置不同的颜色
 重庆市行政区根据海拔设置不同的颜色3D版本

警告

接口只是提供一个数据接口, 拿到了数据图片怎样在业务里展示有你的业务系统来决定

GIS服务托管服务 ​

mapplat 怎样托管瓦片(tile)集合 ​

mapplat 怎样托管矢量瓦片(vectortile)集合 ​

mapplat里怎样托管shp文件? ​

mapplat 怎样将 geojson 文件托管为矢量切片(vectortile)服务 ​

mapplat里怎样托管WFS服务 ​

操作步骤： ​

mapplat里怎样托管动态wmts服务? ​

操作步骤： ​

怎样加载服务? ​

怎样动态传样式 ​

热区图 ​

mapplat 怎样将代理在线切片并缓存? ​

mapplat 怎样将4326/4490的瓦片重投影为墨卡托(3857)? ​

mapplat 怎样将多个瓦片服务合并? ​

mapplat 怎样将 postgis里的表托管为矢量切片(vectortile)服务 ​

mapplat提供postgis里表的查询和返回数据为(geojson) ​

mapplat 提供postgis表的空间查询(spatialquery) ​

mapplat 怎样对瓦片(tile)进行剪裁 ​

mapplat 怎样对瓦片(tile)进行反向剪裁 ​

mapplat 怎样提供路线规划服务 ​

mapplat里查询polygon的地形数据 ​

GIS服务托管服务

mapplat 怎样托管瓦片(tile)集合

mapplat 怎样托管矢量瓦片(vectortile)集合

mapplat里怎样托管shp文件?

mapplat 怎样将 geojson 文件托管为矢量切片(vectortile)服务

mapplat里怎样托管WFS服务

操作步骤：

mapplat里怎样托管动态wmts服务?

操作步骤：

怎样加载服务?

怎样动态传样式

热区图

mapplat 怎样将代理在线切片并缓存?

mapplat 怎样将4326/4490的瓦片重投影为墨卡托(3857)?

mapplat 怎样将多个瓦片服务合并?

mapplat 怎样将 postgis里的表托管为矢量切片(vectortile)服务

mapplat提供postgis里表的查询和返回数据为(geojson)

mapplat 提供postgis表的空间查询(spatialquery)

mapplat 怎样对瓦片(tile)进行剪裁

mapplat 怎样对瓦片(tile)进行反向剪裁

mapplat 怎样提供路线规划服务

mapplat里查询polygon的地形数据