0306-二维地图开发-地图可视化：简单符号渲染

地图可视化是地图作为信息呈现媒介的一个重要功能。通过可视化，我们可以洞察出地图上呈现的数据特征和它们之间的空间关系。目前做空间可视化这块的越来越精细，有些甚至上升到的艺术的层面。对于地图开发者来说，如果将数据在地图上可视化是入门的一个基础。目前，4.x系列API在可视化化方面提供了非常丰富的接口帮助开发者实现业务功能。在接下来的几个章节中将重点介绍地图可视化相关的API接口。
在API中，要实现地图可视化，需要重点关注以下两个包：
1. esri/renderers：渲染器
2. esri/symbols：符号
render和symbol的关系很微妙，从字眼上看好像都是为了地图的可视化，但是它们的所提供的接口层次还是不太一样。render强调一份数据根据属性值而采用多少种符号来表达。symbol更多是针对一份数据而采用一种符号。所以，你会发现，new一个render的时候，同时需要new一个symbol。所以说，render和symbol是包含的关系。
首先我们来看一个点图层、线图层和面图层如何来渲染。先看效果图：

上面这份地图包含了全球主要城市的点图层、全美主要高速公路的线图层以及全美行政州界的面图层。
实现上面的这种可视化效果，我们先发布一份包含这三个图层的要素服务(FeatureServer)，我这里是之前使用了Esri提供的在线服务。符号化要素的关键代码编写过程如下：
1. 分别给三个图层new一个FeatureLayer对象以加载要素服务的图层
2. 给每个FeatureLayer的renderer属性赋予相应的渲染器(render)
3. 点要素采用SimpleMarkerSymbol符号化
4. 线要素采用SimpleLineSymbol符号化
5. 面要素采用SimpleFillSymbol符号化
譬如，点要素的符号化关键完整代码如下：

/***************************************** 设置渲染器，使用单个符号可视化所有城市****************************************/
var citiesRenderer = {type: "simple", //自动转换为SimpleRenderer对象，SimpleRenderer是简单渲染器对象，采用单一符号对几何进行渲染symbol: {type: "simple-marker", //自动转换为SimpleMarkerSymbol对象，用于渲染具有简单形状和颜色的二维点几何图形。size: 10,color: "#FF4000",outline: { //自动转换成SimpleLineSymbol对象color: [255, 64, 0, 0.4], //自动转换成Color对象width: 7}}
};
var citiesLyr = new FeatureLayer({url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/WorldCities/FeatureServer/0",renderer: citiesRenderer
});
myMap.add(citiesLyr);

你可能已经发现，render和symbol对象的构造采用的是JSON的格式直接定义，而不是new一个对象，采用这种方向，程序在运行时会自己转换成相应的对象。当然，这种方向有优点也有缺点，优点是JSON的可读性比较高，习惯了JSON的编写的话，也比较顺手。缺点是，必须要在定义的时候，把全部的属性都给设置好，后续再去调整会相对麻烦。完整的代码如下：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /><title>二维地图开发-可视化:符号化</title><link rel="stylesheet" href="http://192.168.1.144/4.6/esri/css/main.css" /><style>html,body,#mapViewDiv {margin: 0;padding: 0;width: 100%;height: 100%;color:#8E980F;}</style><script src="http://192.168.1.144/4.6/dojo/dojo.js"></script><script>var myMap, mapView;require(["esri/Basemap","esri/layers/TileLayer","esri/Map","esri/views/MapView","esri/layers/FeatureLayer","esri/widgets/Legend","dojo/domReady!"], function (Basemap, TileLayer, Map, MapView, FeatureLayer, Legend){//  *************************************//  TileLayer接口负责加载ArcGIS Server发布的MapServer缓存切片服务//  http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer是GeoQ提供的以中国区域为主的缓存切片服务//  TileLayer将作为Basemap对象的一个图层添加到Map对象中。//  *************************************var layer = new TileLayer({url: "http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer"});//  *************************************//  Basemap:负责管理所有自定义的基础地图//  我们可以把所有的基础地图都放在Basemap对象中//  每个基础地图服务在Basemap对象中都作为一个图层//  *************************************var customBasemap = new Basemap({baseLayers: [layer],title: "基础地图",id: "gisBasemap"});myMap = new Map({basemap: customBasemap});mapView = new MapView({center: [-76.925, 39.741638], //初始化地图居中时的中心经度、维度container: "mapViewDiv",    //地图展示区域，对应页面上的DIVmap: myMap,   //MapView包含Map对象zoom: 7     //初始显示地图级别});/***************************************** 设置渲染器，用单个符号可视化全美行政州****************************************/var statesRenderer = {type: "simple", symbol: {type: "simple-fill", //自动转换为SimpleFillSymbol对象，用于渲染二维面几何图形。color: [0, 255, 0, 0.1], //填充颜色outline: {      //边框颜色对象，包括边框的颜色和宽度color: [128, 128, 128],width: 1}}};var statesLyr = new FeatureLayer({url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",renderer: statesRenderer});myMap.add(statesLyr);/******************************************* 设置渲染器，用单个符号可视化所有高速公路******************************************/var hwyRenderer = {type: "simple", symbol: {type: "simple-line", //自动转换为SimpleLineSymbol对象，用于渲染二维线几何图形。width: 1,   //线宽color: [64, 255, 0] //填充颜色}};var hwyLyr = new FeatureLayer({url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/USA_Freeway_System/FeatureServer/2",renderer: hwyRenderer,minScale: 0,maxScale: 0,definitionExpression: "CLASS = 'O' OR CLASS = 'I' OR CLASS = 'U'"});myMap.add(hwyLyr);/***************************************** 设置渲染器，使用单个符号可视化所有城市****************************************/var citiesRenderer = {type: "simple", //自动转换为SimpleRenderer对象，SimpleRenderer是简单渲染器对象，采用单一符号对几何进行渲染symbol: {type: "simple-marker", //自动转换为SimpleMarkerSymbol对象，用于渲染具有简单形状和颜色的二维点几何图形。size: 10,color: "#FF4000",outline: { //自动转换成SimpleLineSymbol对象color: [255, 64, 0, 0.4], //自动转换成Color对象width: 7}}};var citiesLyr = new FeatureLayer({url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/WorldCities/FeatureServer/0",renderer: citiesRenderer});myMap.add(citiesLyr);/***************** 给图层设置图例****************/var legend = new Legend({view: mapView,layerInfos: [{layer: citiesLyr,title: "全球主要城市"}, {layer: hwyLyr,title: "全美高速公路"}, {layer: statesLyr,title: "全美行政州界"}]});mapView.ui.add(legend, "bottom-left");});</script></head><body><div id="mapViewDiv"></div></body>
</html>

最后，建议图层的叠加顺序采用点图层在最上方、线图层在中间、面图层在最下面的顺序叠加。另外，如果为了表达数据的某个特征在某个区域或者位置上具有强烈的突出时，可以将暗色或清一色的地图作为底图，上面叠加的要素图层用高亮度符号渲染，颜色的反差可以让人快速识别地图中的突出要素。

0306-二维地图开发-地图可视化：简单符号渲染相关推荐

c语言利用二维数组制作地图,用程序实现RPG背景地图二维数组构建
朱艳萍摘要:该文主要阐述了前端RPG开发中,当作为背景的地图较为复杂时,如何用程序的方法构建与背景地图一致的二维数组,采用图文结合论述其算法,并使用原生JavaScript语言实现. 关键词:二维数 ...
cartographer二维点云地图
文章目录前言一.修改思路还是TrajectoryNode 二.计算步骤 1.gravity_alignment 坐标系到local坐标系 2.local坐标系到global坐标系三.具体替换代 ...
谷歌地图开发地图不能显示_Google，为什么地图不能让我在家工作？
谷歌地图开发地图不能显示 The year is 2018, and telecommuting is at an all-time high. Working from home has never ...
鸿蒙二维码开发Zxing
鸿蒙二维码开发Zxing 一,概述鸿蒙中目前选用开源三方库Zxing进行二次封装开发来完成二维码扫描和生成,Zxing目前已经相当的成熟和稳定,是纯Java库,所以可以直接在鸿蒙工程中引用. 首先简 ...
有没有二维码制作工具？二维码制作其实很简单
有没有二维码制作工具?二维码现如今作为我们日常获取信息的常见工具,对我们自身还是他人都是十分重要的,那么问题来了,二维码怎么制作呢?我们个人可以完成吗?答案当然是肯定的,我们自己借助一些好用的工具就可 ...
java用二维数组编写地图_[Java] Java二维数组写一个超级简单的扫雷游戏，适合新手...
直接上代码//随机生成地雷数 int numOfMines=10; //地图尺寸 int mapSize=9; Random r=new Random(); //用二位数组做地图 int [][] m ...
最新版人脸识别小程序图片识别生成二维码签到地图上选点进行位置签到计算签到距离课程会议活动打卡日常考勤上课签到打卡考勤口令签到
技术选型 1,前端小程序原生MINA框架 css JavaScript Wxml 2,管理后台云开发Cms内容管理系统 web网页 3,数据后台小程序云开发云函数云开发数据库(基于Mongo ...
SuperMap、Cesium叠加ArcGIS,高德，谷歌二维，卫星地图实现二三维地图切换
先初始化GIS场景: var viewer = new Cesium.Viewer("cesiumContainer"); 1.加载高德二维地图 //高德二维地图自带路网注记 va ...
如何在二维或三维地图中叠加一个视频（以mapboxgl为例）
手上有一个交通分析结果视频,正射视角,来自遥感卫星视频,通过加工形成交通流量视频分析成果,现在需要把分析结果放在地图中进行可视化展示 mapboxgl的地图如下 map = new mapboxgl. ...

0306-二维地图开发-地图可视化：简单符号渲染

0306-二维地图开发-地图可视化：简单符号渲染相关推荐

最新文章

热门文章