地图创作指南
本模块包含从数据处理、连接数据库、发布数据服务、地图制图内容，是从0开始进行制图的完整步骤；
- 本案例数据均来自OSM网站的开源数据，示例内容开源数据下载与软件安装；
- 案例数据位置：香港中西区、湾仔区、东区、南区；
- 案例使用软件：QGIS 3.36.3；
1. 数据处理
数据处理是为了解决数据冗余和数据坐标系不一致的问题，是不可忽略的步骤；
1.1. QGIS加载数据
- 打开QGIS，将数据的shp文件全部放置在QGIS软件中；
1.2. 裁切数据范围
- 利用行政边界裁剪数据范围；
- 为每个图层执行此步骤；
1.3. 坐标重投影
- 为了使数据坐标一致，将数据的坐标系统一为EPSG：3857；
- 规范图层命名；
- 每个图层执行此步骤；
1.4. 整理数据表单
- 删除“id”字段和冗余字段；
- 每个图层执行此步骤；
2. 数据入库
整理好的数据需要放置在数据库中，发布数据服务时需要连接到此数据库；
2.1. QGIS新建数据库连接
- 右击数据库，输入数据库信息，连接到数据库；
- 连接数据库的账号和密码中不要出现 “空格”；
2.2. 在数据库中进行“新建架构”
- 右击PostgreSQL，新建架构，自定义架构名称；
- 架构的名称不要使用中文或者英文大写；
2.3. 上传数据到数据库
- 单选/多选处理好的数据图层，拖动到数据库中，完成数据上传；
3. 发布矢量地图服务
在Mapmost Studio中发布矢量地图服务；
3.1 添加数据库
- 进入Mapmost Studio首页，点击添加数据/数据库，选择添加数据库，并填写相关数据库信息，点击确定后完成数据库添加。
3.2. 发布服务
3.2.1. 选择数据图层
- 在 “我的数据-数据库列表” 中，选中新连接的数据库与中需要发布的矢量数据，并点击发布，弹出矢量地图服务发布页面。
3.2.2. 配置服务信息
- 在矢量地图服务发布页面配置服务的 “基础信息”和“图层信息”，完成信息配置后点击发布即可完成服务发布。
4. 矢量配图初始化设置
获取服务，进行地图配图初始化参数配置；
4.1. 添加数据源
4.1.1. 复制“服务地址”
- 打开菜单栏中的“地图服务清单”，复制“服务地址”列的字段；
4.1.2. 配置数据源弹窗
- 点击“制图平台”按钮，进入配图页面，点击“数据源”按钮，进行ID自定义、Type选择、粘贴URL的服务地址；
4.2. 设置中心点坐标
4.2.1. 配置地图中心点
- 打开Mapmost Studio,点击“ 样式配置 ”按钮，输入中心点坐标，详情参照“菜单栏：5. 样式配置”;
4.3. 导出样式与样式加载
4.3.1. 地图规范命名
- 点击“导出”按钮，导出现有样式，并规范命名；
4.3.2. 加载Json文件
- 点击“打开”按钮，在Mapmost Studio中加载Json文件；
5. 地图制图
- 获取服务，进行地图配图与基础参数配置；
- 网址中“#”后面的数字为当前视图的显示层级；
- 下级图层会对上级图层形成压盖效果，需要注意调整图层顺序；
- 当图层名称前缀一致时，图层会被自动打组；
5.1. 添加背景层
5.1.1. 配置“添加图层”弹窗
点击“添加图层”按钮，添加背景层，自定义"ID"为“Background”，“Type”选择为"Background"；
5.1.2. 配置“图层属性”模块
选中“Background”图层，配置“绘制属性”模块参数，修改背景层颜色、透明度（网页链接中的“#9”表示当前视窗层级处于第9级）；
5.2. 添加边界图层，设置图层属性
5.2.1. 配置“添加图层”弹窗
- 点击“添加图层”按钮，添加边界图层，自定义"ID"为“boundary”，“Type”选择“Fill”，"Source"选择“data”；“Type”详情参照“背景图层Background：1.2”；"Source"该参数为“数据源”中的ID参数，详情参照“制图先决条件：2.1”；
5.2.2. 配置“图层属性”模块
- 选中“boundary”图层，配置“图层属性”模块参数，选择“Source Layer”为“boundary_district”，其中"Source Layer"与发布服务中设置的“图层名”字段一致。
5.2.3. 配置“绘制属性”模块
- 选中“boundary”图层，配置“绘制属性”模块参数，点击“Σ”可以控制属性在不同层级下的显示效果，每个参数后的“！”点击可查看参数注释；
5.2.4. 复制“图层属性”模块
- 复制“boundary”图层，配置“图层属性”模块，自定义"ID"为“boundary_line”、“Type”选择“Line”，变更显示层级；
5.2.5. 修改“boundary_line”图层
- 选中“boundary_line”图层，在“绘制属性”模块中修改描边颜色、描边粗细；
5.3. 添加用地类型图层，设置图层属性
5.3.1. 配置“添加图层”弹窗
- 点击“添加图层”按钮，添加用地类型图层，自定义"ID"为“landuse”、“Type”选择“Fill”、"Source"选择“data”；
5.3.2. 配置“图层属性”模块
- 选中“landuse”图层，配置“图层属性”模块，"SourceLayer"选择“landuse_joint”、修改图层显示层级；
5.3.3. 添加过滤条件
- 选中“landuse”图层，配置“过滤条件”模块，过滤出“fclass”为"residential”的面数据，操作方式见下图1，过滤条件见图2（如若过滤结果未显示，可以检查“JSON编辑器”模块信息）。
5.3.4. 配置“绘制属性”模块
- 选中“landuse”图层，在“绘制属性”模块中修改面颜色；
5.3.5. 复制“landuse”图层
- 复制“landuse”图层，配置“图层属性”模块，修改“ID”名称为“landuse_n”、调整图层顺序；
5.3.6. 调取数据字段
- 选中“landuse_n”图层，配置“文本布局属性”模块，填写“field”为“name”，调用数据中包含的名称字段；
5.3.7. 配置“文本布局属性”模块
- 选中“landuse_n”图层，配置“文本布局属性”模块，配置文本基本属性，如：字体、大小、行距、行宽、对齐方式、文字颜色、透明度、描边颜色、描边粗细等；
5.3.8. 丰富地图样式
- 参照步骤6.3.1-6.3.8，展示更多用地类型数据，提升配图效果丰富度（注意调整图层顺序）；
5.4. 添加道路图层，设置图层属性
5.4.1. 配置“添加图层”弹窗
- 点击“添加图层”按钮，添加道路图层，自定义"ID"名为“road_main”、“Type”选择“Line”、"Source"选择“data”、“SourceLayer”选择“road”、修改显示层级；
5.4.2. 添加过滤条件
- 选中“road_main”图层，在“过滤条件”模块中，过滤“fclass”字段中“motorway_link”、“motorway”、“trunk”、“trunk_link”数据；
5.4.3. 配置“绘制属性”模块
- 选中“road_main”图层，在“绘制属性”模块与“布局属性”模块中，更改线颜色、线宽度、线连接点方式等参数；
5.4.4. 复制“road_main”图层，制作描边线
- 复制“road_main”图层，更改ID、颜色、线宽度等信息，制作道路描边效果（注意调整图层顺序）；
5.4.5. 复制“road_main”图层，显示道路名称
- 复制“road_main”图层，“Type”选择“Symbol”、在“文本布局属性”模块中调用道路名称字段（注意调整图层顺序）；
5.4.6. 配置“通用布局属性”模块
- 选中“road_main_n”图层，在“通用布局属性”中设置文字走向、字体大小、旋转方式、字体颜色、描边等信息；
5.4.7. 丰富地图样式
- 参照步骤6.4.1-6.4.6展示更多道路线数据，提升场景丰富度（注意调整图层顺序）；
5.5. 添加水图层，设置图层属性
5.5.1. 配置“添加图层”弹窗
- 点击“添加图层”按钮，添加水图层，自定义"ID"为“water_big”、“Type”选择“Fill”、"Source"选择“data”、“SourceLayer”选择“water”、修改显示层级；
5.5.2. 添加过滤条件
- 选中“water_big”图层，在“过滤条件”模块中，过滤出“area>=1000000”的面数据；
5.5.3. 配置“绘制属性”模块
- 选中“water_big”图层，在“绘制属性”模块中更改面数据颜色；
5.5.4. 复制“water_big”图层，显示大湖泊数据
- 复制“water_big”图层，修改ID为“water_small”、修改显示层级、过滤出“area<1000000”的面数据；
5.5.5. 复制“water_big”图层，显示水系数据
- 复制“water_big”图层，修改ID为“water_line”、修改显示层级、“SourceLayer”选择“waterline”、删除过滤条件；
5.6. 添加建筑图层，设置图层属性
5.6.1. 配置“添加图层”弹窗
- 点击“添加图层”按钮，添加建筑图层，自定义"ID"为“building”、“Type”选择“FillExtrusion”、"Source"选择“data”、“SourceLayer”选择“building_joint”、修改显示层级；
5.6.2. 配置“绘制属性”模块
- 选中“building”图层，在“绘制属性”模块中修改建筑颜色、透明度，在“Extrusion height”参数中，输入“["get", "height"]”获取建筑高度；
5.7. 添加点位图层，设置图层属性
5.7.1. 配置“添加图层”弹窗
- 点击“添加图层”按钮，添加点位图层，自定义"ID"为“poi_gov”、“Type”选择“Symbol”、"Source"选择“data”、“SourceLayer”选择“poi_joint”、修改显示层级；
5.7.2. 添加过滤条件
- 选中“poi_gov”图层，在“过滤条件”模块中，添加过滤条件，并获取名称字段；
5.7.3. 添加图标
- 选中“poi_gov”图层，在“图标布局属性”模块中，添加图标，并修改图标尺寸；
5.7.4. 配置“文本布局属性”模块
- 选中“poi_gov”图层，在“文本布局属性”模块中，修改文字字体、文字行宽、文字对齐方式、文字偏移距离、文字颜色、文字描边等信息；
5.7.5. 配置“图标布局属性”模块
- 选中“poi_gov”图层，在“图标布局属性”模块中，修改图标显示密度；
5.7.6. 丰富地图样式
- 参照步骤6.7.1-6.7.5，展示更多点位数据，丰富配图样式；
5.8. 调整图层顺序
- 根据视觉效果与配图需求，整体调整图层顺序，防止文字压盖、数据被避让等情况；
5.9. 样式导出
- 点击导出按钮，导出地图样式；
6. Mapmost SDK加载样式
- Mapmost SDK文档链接，点击跳转至Mapmost SDK在线示例；
6.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>