地图创作指南
本模块包含从数据处理、连接数据库、发布数据服务、地图制图内容，是从0开始进行制图的完整步骤；
- 本案例数据均来自OSM网站的开源数据，示例内容开源数据下载与软件安装；
- 案例数据位置：香港中西区、湾仔区、东区、南区；
- 案例使用软件：QGIS 3.36.3；
步骤一、数据处理
数据处理是为了解决数据冗余和数据坐标系不一致的问题，是不可忽略的步骤；
1.1 QGIS加载数据
- 打开QGIS，将数据的shp文件全部放置在QGIS软件中；
1.2 裁切数据范围
- 利用行政边界裁剪数据范围；
- 为每个图层执行此步骤；
1.3 坐标重投影
- 为了使数据坐标一致，将数据的坐标系统一为EPSG：3857；
- 规范图层命名；
- 每个图层执行此步骤；
1.4 整理数据表单
- 删除“id”字段和冗余字段；
- 每个图层执行此步骤；
步骤二、数据入库
整理好的数据需要放置在数据库中，发布数据服务时需要连接到此数据库；
2.1 QGIS新建数据库连接
- 右击数据库，输入数据库信息，连接到数据库；
- 连接数据库的账号和密码中不要出现 “空格”；
2.2 在数据库中进行“新建架构”
- 右击PostgreSQL，新建架构，自定义架构名称；
- 架构的名称不要使用中文或者英文大写；
2.3 传输数据到数据库
- 单选\多选处理好的数据图层，拉动到数据库中，完成数据上传；
步骤三、发布数据服务
在Mapmost Studio中发布数据服务；
3.1 Mapmost Studio菜单查阅
- 进入Mapmost Studio首页，点击左上角收缩图标，打开菜单栏，查阅菜单栏模块；
3.2 连接数据库
- 点进入 “数据库资源” 菜单，进入数据库资源页面，点击 “连接数据库”；
3.3 配置数据库参数
- 右击QGIS的数据库，点击 “编辑连接” ，获取到数据库参数数值，在Mapmost Studio中进行“基础信息”填写；
3.4 发布数据服务
3.4.1 、选择数据图层发布服务
- 在 “数据库资源” 菜单中，选中新连接的数据库与需要的数据图层，发布数据服务；
3.4.2、配置服务基础信息
- 在 “创建服务” 的 “基础信息”、“图层信息”模块中，配置服务的基础信息；
步骤四、查阅服务状态
服务状态支持二次编辑与查阅，注意只有当服务发布结束后才可以进行配图；
4.1 检查服务发布状态
- 进入 “资源服务管理” 的 “地图服务清单” 菜单栏，选中发布的服务列表，点击状态查看，数据全部显示出来表示服务发布已经完成；
4.2 数据服务二次编辑
- 进入 “资源服务管理” 的 “地图服务清单” 菜单栏，选择服务列表，点击 “开始编辑” 即可进行服务调整；
步骤五、矢量配图初始化设置
获取服务，进行地图配图初始化参数配置；
5.1 添加数据源
5.1.1、复制“服务地址”
- 打开菜单栏中的“地图服务清单”，复制“服务地址”列的字段；
5.1.2、配置数据源弹窗
- 点击“制图平台”按钮，进入配图页面，点击“数据源”按钮，进行ID自定义、Type选择、粘贴URL的服务地址；
5.2 设置中心点坐标
5.2.1、配置地图中心点
- 打开Mapmost Studio,点击“ 样式配置 ”按钮，输入中心点坐标，详情参照“菜单栏：五”;
5.3导出样式与样式加载
5.3.1、地图规范命名
- 点击“导出”按钮，导出现有样式，并规范命名；
5.3.2、加载Json文件
- 点击“打开”按钮，在Mapmost Studio中加载Json文件；
步骤六、地图制图
- 获取服务，进行地图配图与基础参数配置；
- 网址中“#”后面的数字为当前视图的显示层级；
- 下级图层会对上级图层形成压盖效果，需要注意调整图层顺序；
- 当图层名称前缀一致时，图层会被自动打组；
6.1 添加背景层
6.1.1、配置“添加图层”弹窗
点击“添加图层”按钮，添加背景层，自定义"ID"为“Background”，“Type”选择为"Background"；
6.1.2、配置“图层属性”模块
选中“Background”图层，配置“绘制属性”模块参数，修改背景层颜色、透明度（网页链接中的“#9”表示当前视窗层级处于第9级）；
6.2 添加边界图层，设置图层属性
6.2.1、配置“添加图层”弹窗
- 点击“添加图层”按钮，添加边界图层，自定义"ID"为“boundary”，“Type”选择“Fill”，"Source"选择“data”；“Type”详情参照“背景图层Background：1.2”；"Source"该参数为“数据源”中的ID参数，详情参照“制图先决条件：2.1”；
6.2.2、配置“图层属性”模块
- 选中“boundary”图层，配置“图层属性”模块参数，选择“Source Layer”为“boundary_district”，其中"Source Layer"信息与步骤3.4.2中的“表名”字段一致“地图创作指南：3.4.2”；
6.2.3、配置“绘制属性”模块
- 选中“boundary”图层，配置“绘制属性”模块参数，点击“Σ”可以控制属性在不同层级下的显示效果，每个参数后的“！”点击可查看参数注释；
6.2.4、复制“图层属性”模块
- 复制“boundary”图层，配置“图层属性”模块，自定义"ID"为“boundary_line”、“Type”选择“Line”，变更显示层级；
6.2.5、修改“boundary_line”图层
- 选中“boundary_line”图层，在“绘制属性”模块中修改描边颜色、描边粗细；
6.3 添加用地类型图层，设置图层属性
6.3.1、配置“添加图层”弹窗
- 点击“添加图层”按钮，添加用地类型图层，自定义"ID"为“landuse”、“Type”选择“Fill”、"Source"选择“data”；
6.3.2、配置“图层属性”模块
- 选中“landuse”图层，配置“图层属性”模块，"SourceLayer"选择“landuse_joint”、修改图层显示层级；
6.3.3、添加过滤条件
- 选中“landuse”图层，配置“过滤条件”模块，过滤出“fclass”为"residential”的面数据，操作方式见下图1，过滤条件见图2（如若过滤结果未显示，可以检查“JSON编辑器”模块信息），过滤条件中的字段查找方式参照“地图创作指南：3.4.2”；
6.3.4、配置“绘制属性”模块
- 选中“landuse”图层，在“绘制属性”模块中修改面颜色；
6.3.5、复制“landuse”图层
- 复制“landuse”图层，配置“图层属性”模块，修改“ID”名称为“landuse_n”、调整图层顺序；
6.3.6、调取数据字段
- 选中“landuse_n”图层，配置“文本布局属性”模块，填写“field”为“name”，调用数据中包含的名称字段；
6.3.7、配置“文本布局属性”模块
- 选中“landuse_n”图层，配置“文本布局属性”模块，配置文本基本属性，如：字体、大小、行距、行宽、对齐方式、文字颜色、透明度、描边颜色、描边粗细等；
6.3.8、丰富地图样式
- 参照步骤6.3.1-6.3.8，展示更多用地类型数据，提升配图效果丰富度（注意调整图层顺序）；
6.4 添加道路图层，设置图层属性
6.4.1、配置“添加图层”弹窗
- 点击“添加图层”按钮，添加道路图层，自定义"ID"名为“road_main”、“Type”选择“Line”、"Source"选择“data”、“SourceLayer”选择“road”、修改显示层级；
6.4.2、添加过滤条件
- 选中“road_main”图层，在“过滤条件”模块中，过滤“fclass”字段中“motorway_link”、“motorway”、“trunk”、“trunk_link”数据；
6.4.3、配置“绘制属性”模块
- 选中“road_main”图层，在“绘制属性”模块与“布局属性”模块中，更改线颜色、线宽度、线连接点方式等参数；
6.4.4、复制“road_main”图层，制作描边线
- 复制“road_main”图层，更改ID、颜色、线宽度等信息，制作道路描边效果（注意调整图层顺序）；
6.4.5、复制“road_main”图层，显示道路名称
- 复制“road_main”图层，“Type”选择“Symbol”、在“文本布局属性”模块中调用道路名称字段（注意调整图层顺序）；
6.4.6、配置“通用布局属性”模块
- 选中“road_main_n”图层，在“通用布局属性”中设置文字走向、字体大小、旋转方式、字体颜色、描边等信息；
6.4.7、丰富地图样式
- 参照步骤6.4.1-6.4.6展示更多道路线数据，提升场景丰富度（注意调整图层顺序）；
6.5 添加水图层，设置图层属性
6.5.1、配置“添加图层”弹窗
- 点击“添加图层”按钮，添加水图层，自定义"ID"为“water_big”、“Type”选择“Fill”、"Source"选择“data”、“SourceLayer”选择“water”、修改显示层级；
6.5.2、添加过滤条件
- 选中“water_big”图层，在“过滤条件”模块中，过滤出“area>=1000000”的面数据；
6.5.3、配置“绘制属性”模块
- 选中“water_big”图层，在“绘制属性”模块中更改面数据颜色；
6.5.4、复制“water_big”图层，显示大湖泊数据
- 复制“water_big”图层，修改ID为“water_small”、修改显示层级、过滤出“area<1000000”的面数据；
6.5.5、复制“water_big”图层，显示水系数据
- 复制“water_big”图层，修改ID为“water_line”、修改显示层级、“SourceLayer”选择“waterline”、删除过滤条件；
6.6 添加建筑图层，设置图层属性
6.6.1、配置“添加图层”弹窗
- 点击“添加图层”按钮，添加建筑图层，自定义"ID"为“building”、“Type”选择“FillExtrusion”、"Source"选择“data”、“SourceLayer”选择“building_joint”、修改显示层级；
6.6.2、配置“绘制属性”模块
- 选中“building”图层，在“绘制属性”模块中修改建筑颜色、透明度，在“Extrusion height”参数中，输入“["get", "height"]”获取建筑高度；
6.7 添加点位图层，设置图层属性
6.7.1、配置“添加图层”弹窗
- 点击“添加图层”按钮，添加点位图层，自定义"ID"为“poi_gov”、“Type”选择“Symbol”、"Source"选择“data”、“SourceLayer”选择“poi_joint”、修改显示层级；
6.7.2、添加过滤条件
- 选中“poi_gov”图层，在“过滤条件”模块中，添加过滤条件，并获取名称字段；
6.7.3、添加图标
- 选中“poi_gov”图层，在“图标布局属性”模块中，添加图标，并修改图标尺寸；
6.7.4、配置“文本布局属性”模块
- 选中“poi_gov”图层，在“文本布局属性”模块中，修改文字字体、文字行宽、文字对齐方式、文字偏移距离、文字颜色、文字描边等信息；
6.7.5、配置“图标布局属性”模块
- 选中“poi_gov”图层，在“图标布局属性”模块中，修改图标显示密度；
6.7.6、丰富地图样式
- 参照步骤6.7.1-6.7.5，展示更多点位数据，丰富配图样式；
6.8 调整图层顺序
- 根据视觉效果与配图需求，整体调整图层顺序，防止文字压盖、数据被避让等情况；
6.9 样式导出
- 点击导出按钮，导出地图样式；
步骤七、Mapmost SDK加载样式
- Mapmost SDK文档链接，点击跳转至Mapmost SDK在线示例；
7.1 Mapmost SDK加载示例
- Mapmost SDK加载效果与代码展示；
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.4.1/mapmost-webgl-min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
let map = new mapmost.Map({
container: 'map',
center: [114.13358978380347, 22.283166218948566],
zoom: 14,
style: "https://studio.mapmost.com:443/mms-style/1743052815295-15189827268-customStyle.json",//更改为自定义的地图
userId: '***' // 授权码
});
</script>
</body>
</html>