基础平面地图教程

本文涉及的产品
数据可视化DataV,5个大屏 1个月
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: 基础知识学习:GCJ-02坐标系、GeoJson格式、坐标拾取器—高德地图;基础平面地图:地图容器、底图层(地图瓦片层)、背景图、点图层(散点层、呼吸气泡层、点热力层、流式气泡层)、线图层(线热力层)、面图层(区域热力层、区域(行政)下钻层、等值面层、网格热力层)、地图交互(回调ID)。

1 基础知识学习

1 GCJ-02坐标系

1.2 GeoJson格式

1.3 坐标拾取器—高德地图

详细地址与精准坐标之间的相互转化 坐标拾取器,输入西溪湿地 ,右侧坐标获取结果即可显示对应的坐标信息。



2 基础平面地图

2.1 地图容器

基础平面地图地图容器包括 全局设置图表尺寸位置 默认参数设置
全局设置:设置地图背景色、地图缩放级别、地图中心经纬度、控制比例尺控件显影等默认参数
图表尺寸位置:设置 基础平面地图 组件位于画布的位置及其长宽尺寸



2.2 底图层(地图瓦片层)

目前支持接入的地图瓦片服务

2.2.1 GeoQ地图
GeoQ水墨灰:'//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}'
GeoQ午夜蓝:'//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
GeoQ彩色:'//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}'
GeoQ边界:'//thematic.geoq.cn/arcgis/rest/services/ThematicMaps/administrative_division_boundaryandlabel/MapServer/tile/{z}/{y}/{x}'

2.2.2 高德地图

2.2.3 天地图
天地图电子地图:'//t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z} '
天地图电子地图注记:'//t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
天地图影像:'//t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
天地图影像注记:'//t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}'
天地图地形:'//t0.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}'
天地图地形注记:'//t0.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}'

2.2.4 Google地图(可能访问不到,建议使用GeoQ、高德、天地图瓦片服务)
谷歌电子地图:'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
谷歌卫星地图:'http://mt3.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}'

2.3 背景图

对于固定缩放等级的大屏设计需求,用户可以考虑自己设计地图背景,作为地图底图,增强地图美感



2.4 点图层—散点层、呼吸气泡层、点热力层、流式气泡层

2.4.1 散点层
散点层数据格式

  [
      {
   
          "dotid": 0,
          "lat": 31.8998, //纬度
          "lng": 102.2212, //经度
          "value": 8,  //权重值
          "info": "描述信息0", //弹窗信息
          "type": "error", 
          "name": "点0", //点位名称,可以用于显示点位标注
          "rotationAngle": 45
      }
  ]



参考博文 DataV地图组件全新发布,带你玩转地理大数据

2.4.2 呼吸气泡层
呼吸气泡层数据格式
json [ { "lat": 31.8998, //纬度 "lng": 102.2212, //经度 "value": 1, //权重值 "type": 1 //气泡类型 } ]







2.4.3 点热力层
呼吸气泡层数据格式
json [ { "lat": 25.82, //纬度 "lng": 98.86, //经度 "value": 17 //权重值 } ]







2.4.4 流式气泡层
流式气泡层数据格式, info支持 </br>换行
json [ { "lng": 124.233398, //经度 "lat": 45.73686, //纬度 "info": "自定义信息</br>自定义信息" } ]


2.5 线图层—线热力层

参考:DataV地图组件全新发布,带你玩转地理大数据

2.6 面图层—区域热力层、区域(行政)下钻层、等值面层、网格热力层

2.6.1 区域热力层
参考:基础平面地图——区域热力层使用教程
2.6.2 区域(行政)下钻层
参考:基础平面地图——区域热力层使用教程
2.6.3 等值面层
参考:DataV带你回顾春节前后全国空气质量变化
2.6.4 网格热力层
注意经纬度坐标格式要写正确



2.7 地图交互—回调ID

DataV中的回调ID是个什么鬼?
DataV回调id升级啦

相关实践学习
DataV Board用户界面概览
本实验带领用户熟悉DataV Board这款可视化产品的用户界面
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
目录
相关文章
|
6月前
|
定位技术 数据安全/隐私保护 iOS开发
一文讲清楚地图地理坐标系
一文讲清楚地图地理坐标系
253 0
|
3月前
|
定位技术 API
GIS开发:自定义坐标系的地图
GIS开发:自定义坐标系的地图
|
6月前
|
定位技术 API 数据处理
使用GIS制作静态地图和处理地理数据
使用GIS制作静态地图和处理地理数据
|
6月前
|
数据可视化 定位技术 数据格式
Tableau可视化设计案例-07 多边形地图和背景图地图
Tableau可视化设计案例-07 多边形地图和背景图地图
|
数据可视化 JavaScript 定位技术
地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果
地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果
554 0
|
JavaScript 前端开发 定位技术
地图开发实战案例:高德地图弧线连接线标注
地图开发实战案例:高德地图弧线连接线标注
150 0
|
容器
游戏开发实战教程(6):把图形放置到网格上
在第四节中我们实现了图形的拖拽功能,拖拽的图形最终需要被放置在网格的对应位置上。 先说一下实现思路: 使用拖拽图形上的左下角的位置作为图形位置,与整个网格的位置进行比对。如果图形位置与当前单元格的位置匹配,则根据图形的数据从当前的单元格开始填充,直到填充完整个图形为止。 看不懂?没关系。接着往下我会一步一步的进行拆解和分析。
98 0
|
容器
微信小游戏开发实战6-把图形放置到网格上
本篇主要内容包括如何将拖拽的图形安放到网格的对应位置上。 如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。
77 0
|
传感器 算法 前端开发
【应用SLAM技术建立二维栅格化地图】
【应用SLAM技术建立二维栅格化地图】
455 0
|
定位技术
GIS开发:根据距离画网格
GIS开发:根据距离画网格
141 0
下一篇
无影云桌面