BDP怎么制作可视化网页制作软件地图

有没有可以做地图可视化的软件,操作简单一点的_百度知道
有没有可以做地图可视化的软件,操作简单一点的
我有更好的答案
这个是程序,不是网页设计。程序运行出来的是一个结果,所以一般不会有这中能实时显示结果的。不过zendstudio这样的软件可以做断点跟踪。推荐你试试
电子地图标注软件可以标注位置,可以搜索地图上本来有的位置和标注的位置,可以把某个标注的位置显示在地图中心。软件有很多功能,请用户们来体验吧!软件支持电脑在线(离线)地图查看浏览,支持无人机航拍地图导入!1.支持谷歌在线(离线)百度地图,百度卫星地图,混合卫星地图,普通地图,地形地图,微软电子地图,微软卫星地图,bing地图,高德地图,在软件界面上可以选择地图类型切换;2.支持1-20级的地图随意缩放,鼠标右键拖动漫游。3.支持名称查询定位,可以输入地点名称后定位到所查询的位置。4.支持坐标查询定位,可以输入坐标数值后定位的所查询的位置。5.支持用户自定义信息,信息高级查询,查询结果实时定位。6.支持在地图上所选择的标注能点击查看详细信息。7.支持添加地图标记,距离测量显示,地点名称显示。8.支持保存您当前操作的文件,供日后打开再用,保证操作不会丢失。9.支持添加自定义标识图标,用户可以更换图标。10.新增批量导入导出数据功能,网络代理设置。11.新增分类图层管理。12.图标上方显示文字。13.支持在地图上绘制路线。14.支持gps卫星定位。15.支持商圈范围功能。16.支持出图带标注功能。17.支持打印出图。
放大看图,有深圳地区、全国地区的数据地图展示,将需要分析的数据上传到BDP个人版,然后拖拽选择经纬度和维度、数值,即可生成自定义的数据地图,操作不难的~
2条折叠回答
为您推荐:
其他类似问题
换一换
回答问题,赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。在BDP数据地图上快速实现柱状图!
在BDP,经纬度地图分成6种类型:热力图、气泡图、海量点、轨迹图、动态轨迹图和统计图,想在数据地图上实现柱状图就属于统计图,统计图有三种:地图+柱状图/条形图/饼图。
统计地图的制作一般分为3个过程,即上传数据—拖拽制图——地图润色,不需要编程基础也能搞定数据统计地图。
1.上传数据,添加图表
登录,上传数据后在右上方点击“新建图表”—“经纬度地图”,选择需要的地图数据(这里用的是BDP本身的公共数据源——本地生活数据)
2.拖拽制图
先拖拽工作表至图层,再拖拽需要分析的数据,然后选择右侧的统计图(柱状图)即可;
3.地图润色
可设置颜色、尺寸,如下图~
可以对地图进行放大缩小(鼠标滑动也能放大缩小),选择需要呈现的地图范围,比如下图的北京市)。还可以自定义圈定地图区域,操作也很简单。
比如做工作总结、方案解说时,做好的数据地图可以在BDP中全屏展示,当然你也可以把数据地图导出为PPT中进行展示,这一定会让你的报告增色不少啊。
(全屏展示)
没有更多推荐了,
加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!1.2k 人阅读
标签:至少1个,最多5个
推荐技术栈
mapbox + deck.gl/echarts.gl
地理相关库
  用css实现太累
使用百度地图的服务,需使用BD09坐标。
若使用非BD09坐标、未经过坐标转换(非BD09转成BD09)直接叠加在地图上,地图展示位置会偏移,因此通过其他坐标(WGS84、GCJ02)调用服务时,需先将其他坐标转换为BD09。
非百度坐标系,如何转换成百度坐标系?
图吧地图api
地图API和工具
坐标拾取器械
另外,百度地图api的开发文档下的工具支持中有很多类似的工具
坐标系统说明
高德地图: GCJ-02 我国地图坐标系统 百度地图: BD-09 (BD-09II/bd09mc)
普通GPS定位出来的数值都是基于WSG-84坐标系标准,这是世界通用的坐标系。(美国的)
GCJ-02和WSG-84之间的坐标系转换算法是保密的。
“中国政府为了国家安全在国内 GPS 定位时人为加入一定偏移”这种说法是不正确的。应该是“我国所发行的地图类产品强制性加入偏移算法,使原本标准的坐标系统(WSG-84)变为国家保密的自定义坐标系统(GCJ-02)”。
在进行地图开发过程中,我们一般能接触到以下三种类型的地图坐标系:
1.WGS-84原始坐标系,一般用国际GPS纪录仪记录下来的经纬度,通过GPS定位拿到的原始经纬度,Google和高德地图定位的的经纬度(国外)都是基于WGS-84坐标系的;但是在国内是不允许直接用WGS84坐标系标注的,必须经过加密后才能使用;
2.GCJ-02坐标系,又名“火星坐标系”,是我国国测局独创的坐标体系,由WGS-84加密而成,在国内,必须至少使用GCJ-02坐标系,或者使用在GCJ-02加密后再进行加密的坐标系,如百度坐标系。高德和Google在国内都是使用GCJ-02坐标系,可以说,GCJ-02是国内最广泛使用的坐标系;
3.百度坐标系:bd-09,百度坐标系是在GCJ-02坐标系的基础上再次加密偏移后形成的坐标系,只适用于百度地图。(目前百度API提供了从其它坐标系转换为百度坐标系的API,但却没有从百度坐标系转为其他坐标系的API)
three.js地图
通常情况下,地理数据的可视化会包含多份数据:一份是用于绘制地图的经纬度数据,一份是用户真正想要可视化的用户数据。
实例 只有经纬度数据,但是特殊的是,这个实例中,我们从amap api获得数据,在左侧绘制地图(其中中国地图直接得到的geoJSON数据,行政区划得到的是TopoJSON数据),在右侧用g2绘制处理行政区划数据(geojson -& json数组 --& dataset) 绘制地图
需要在世界地图上标注各个国家的男女比例情况,这个时候就可以使用多视图的可视化方案:详情 戳 ---&
地图数据一般保存为JSON格式,G2和D3常用的有两种:
GeoJSON 描述地理信息的一种基本格式 例——&
D3作者Mike Bostock制定的格式,符合JSON规范
我们以这个为例
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&
&meta http-equiv="X-UA-Compatible" content="ie=edge"&
&title&中国地图-省市下钻&/title&
&link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/&
.button-group{
bottom:50%;
width: 70%;
&script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"&&/script&
&div id="mountNode"&&/div&
&div class='button-group' style="background-color: #fff"&
&input type='radio' onclick='refresh(this.value)' checked name='mapStyle' value='normal'&标准
&input type='radio' onclick='refresh(this.value)' name='mapStyle' value='dark'&幻影黑
&input type='radio' onclick='refresh(this.value)' name='mapStyle' value='light'&月光银
&input type='radio' onclick='refresh(this.value)' name='mapStyle' value='fresh'&草色青
&input type='radio' onclick='refresh(this.value)' name='mapStyle' value='grey'&雅士灰&br&
&input type='radio' onclick='refresh(this.value)' name='mapStyle' value='graffiti'&涂鸦
&input type='radio' onclick='refresh(this.value)' name='mapStyle' value='whitesmoke'&远山黛
&input type='radio' onclick='refresh(this.value)' name='mapStyle' value='macaron'&马卡龙
&input type='radio' onclick='refresh(this.value)' name='mapStyle' value='blue'&靛青蓝
&input type='radio' onclick='refresh(this.value)' name='mapStyle' value='darkblue'&极夜蓝&br&
&input type='radio' onclick='refresh(this.value)' name='mapStyle' value='wine'&酱籽
&script&/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientH&/script&
&script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.4-beta.2/g2.min.js"&&/script&
&script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.3/data-set.min.js"&&/script&
&script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"&&/script&
&script src="https://gw.alipayobjects.com/os/antv/assets/lib/lodash-4.17.4.min.js"&&/script&
&script src="https://webapi.amap.com/maps?v=1.4.1&key=8c8cb9a62ef"&&/script&
&script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"&&/script&
$('#mountNode').html(
'&div style="position:"&'+
'&div id="china" style="width:50%;height:400position:left:0;top:0"&&/div&' +
'&div id="province" style="width:50%;height:400position:right:0;top:0;"&&/div&'+
//调用高德api绘制底图以及geo数据
const map = new AMap.Map('china',{
resizeEnable: true,
function refresh(enName) {
map.setMapStyle('amap://styles/'+enName);
const colors = [ "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac" ];
// 当前聚焦的区域
let currentAreaN
AMapUI.load(['ui/geo/DistrictExplorer', 'lib/$'], function(DistrictExplorer) {
//创建一个实例
const districtExplorer = window.districtExplorer = new DistrictExplorer({
eventSupport: true, //打开事件支持
//创建一个辅助Marker,提示鼠标内容
var tipMarker = new AMap.Marker({
//启用冒泡,否则click事件会被marker自己拦截
bubble:true
// feature 被点击
districtExplorer.on('featureClick', function(e, feature) {
const props = feature.
//如果存在子节点
console.log(props);
if(props.childrenNum & 0) {
//切换聚焦区域
switch2AreaNode(props.adcode);
//外部区域被点击
districtExplorer.on('outsideClick', function(e) {
districtExplorer.locatePosition(e.originalEvent.lnglat, function(error,routeFeatures) {
if(routeFeatures && routeFeatures.length & 1) {
//切换到省级区域
switch2AreaNode(routeFeatures[1].properties.adcode);
//切换到全国
switch2AreaNode(100000)
levelLimit:2
//绘制某个区域的边界
function renderAreaPolygons(areaNode) {
const node = _.cloneDeep(areaNode);
districtExplorer.clearFeaturePolygons();
districtExplorer.renderSubFeatures(node, function(feature, i) {
const fillColor = colors[i % colors.length];
const strokeColor = colors[colors.length - 1 -i % colors.length];
cursor: 'default',
bubble:true,
strokeColor,//线颜色
strokeOpacity:1,//线透明度
strokeWeight:1, //线宽
fillOpacity: 0.35 //填充透明度
//绘制父区域
districtExplorer.renderParentFeature(node, {
cursor: 'default',
bubble: true,
strokeColor: 'black',//线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线宽
fillColor: null, //填充色
fillOpacity: 0.35 //填充透明度
//切换区域后刷新显示内容
function refreshAreaNode(areaNode) {
districtExplorer.setHoverFeature(null);
renderAreaPolygons(areaNode)
//切换区域
function switch2AreaNode(adcode, callback) {
if (currentAreaNode && ('' + currentAreaNode.getAdcode() === '' + adcode)) {
loadAreaNode(adcode, function(error, areaNode) {
if (error) {
if (callback) {
callback(error);
currentAreaNode = window.currentAreaNode = areaN
refreshAreaNode(areaNode);
if (callback) {
callback(null, areaNode);
//加载区域
function loadAreaNode(adcode, callback) {
districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
if(error) {
if(callback) {
callback(error);
renderG2Map(areaNode); //使用 G2 绘制地图
if(callback) {
callback(null, areaNode);
switch2AreaNode(330000);
//开始使用G2绘制地图
let provinceC
function renderG2Map(areaNode) {
const adcode = areaNode.getAdcode();
const geoJSON = areaNode.getSubFeatures(); // 获取 geoJSON 数据
const name = areaNode.getName();
provinceChart && provinceChart.destroy();
provinceChart =
if (!geoJSON || currentAreaNode && ('' + currentAreaNode.getAdcode() === '' + adcode)) {
const dv = processData(geoJSON);
// start: 计算地图的最佳宽高
const longitudeRange = dv.range('longitude');
const lantitudeRange = dv.range('lantitude');
const ratio = (longitudeRange[1] - longitudeRange[0]) / (lantitudeRange[1] - lantitudeRange[0]);
if (ratio & 1) {
width = $('#province').width();
height = width /
width = 300 *
height = $('#province').height();
// end: 计算地图的最佳宽高
provinceChart = new G2.Chart({
container: 'province',
padding: 0
provinceChart.source(dv);
provinceChart.axis(false);
provinceChart.tooltip({
showTitle: false
provinceChart
.polygon()
.position('longitude*lantitude')
.label('name', {
textStyle: {
fill: '#fff',
fontSize: 10,
shadowBlur: 2,
shadowColor: 'rgba(0, 0, 0, .45)'
stroke: '#fff',
lineWidth: 1
.color('value', '#BAE7FF-#1890FF-#0050B3');
provinceChart.guide().text({
position: [ 'min', 'max' ],
offsetY: 20,
content: name,
fontSize: 14,
fontWeight: 'bold'
provinceChart.render();
function processData(geoJSON) {
console.log("---------------------geoJSON---------------------------");
console.log(geoJSON);
const mapData = {
type: 'FeatureCollection',
features: geoJSON
// 构造虚拟数据
const userData = [];
for (let i = 0; i & geoJSON. i++) {
const name = geoJSON[i].properties.
userData.push({
value: Math.round(Math.random() * 1000)
console.log("----------------userData----------------");
console.log(userData);
const ds = new DataSet();
const geoDataView = ds.createView().source(mapData, {
type: 'GeoJSON'
}); // geoJSON 经纬度数据
// 用户数据
const dvData = ds.createView().source(userData);
dvData.transform({
type: 'geo.region',
field: 'name',
geoDataView,
as: [ 'longitude', 'lantitude' ]
console.log('---------------------dvData-------------');
console.log(dvData);
return dvD
这里的代码
AMapUI.load(['ui/geo/DistrictExplorer', 'lib/$'], function(DistrictExplorer) {
是对高德地图ui的组件调用,DistrictExplorer是
自有组件还有:
我们还可以自定义组件模块,AMapUI组件库的扩展 ,详情戳这里————&
ui/geo/DistrictExplorer是扩展的模块路径
lib/$, 即DomLibrary(jQuery或者Zepto)
这里load的json数据是这样的,其中的topo内的就是TopoJSON数据
type 是Topology,表示文件类型
transform用于描述缩放量和平移量,分别用一个只有两项的数组来表示
objects里存有几何体模块,此处只有浙江省
parent 是全省
sub 是各市县
arcs表示如何从最外层的数组arcs里提取地形.
注意 :相比GeoJSON直接使用Polygon、Point之类的几何体来表示图形的方法,TopoJSON中的每一个几何体都是通过将共享边(被称为arcs)整合后组成TopoJSON消除了冗余,文件大小缩小了80%,因为:
边界线只记录一次
地理坐标使用整数,不使用浮点数
我们再看一看 g2的另一个实例 :
const dv = ds.createView('back')
.source(mapData,{
type: 'GeoJSON'
.transform({
type:'geo.projection',
projection: 'geoMercator',
as:['x','y','centroidX','centroidY']
这里的 projection: 'geoMecator',表示投影是
我们可以看看d3里面关于地图的投影api,看看有哪些地图投影:
相比2.0版本 3.0版本的container是支持string 也支持dom对象的
从上面两个例子我们可以看出来,在载入地图时候我们可以
调用amap api地图
本地GeoJSON或TopoJSON生成
这里我们说一说如何载入数据
这里我们可以看到 g2中绘制地图时候需要 传入一个JSON数组所以上面例子
const dv = processData(geoJSON); processData函数应该有这样一个转换过程 GeoJSON --& JSON数组 --& DataSet,我们来看一看是不是这样(即userData应该是JSON数组,dvData应该是DataSet)
const geoDataView = ds.createView().source(mapData, {
type: 'GeoJSON'
}); // geoJSON 经纬度数据
为什么是转换为Dataset?
自 G2 3.0 版本开始,原先内置的数据处理模块 frame 从 G2 包中抽离出来,独立成为 DataSet 包。DataSet 的目标是为数据可视化场景提供状态驱动(state driven)的 --&
&script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.1/data-set.js"&&/script&
在DataSet包中
我们把数据处理分为两个大的步骤:数据连接(Connector)和数据转换(Transform)。Connector 负责导入和归一化数据(譬如导入 CSV 数据,导入 GeoJSON 数据等),Transform 负责进行各种数据转换操作(譬如图布局、数据统计、数据补全等)。
想要了解直接点击
[python处理地理数据-geopandas和pyshp]()
1 收藏&&|&&9
你可能感兴趣的文章
同样做过一个地图可视化的案例分析:
同样做过一个地图可视化的案例分析:http://t.cn/R9ICdm7
你可能感兴趣的文章
分享到微博?
我要该,理由是:
在 SegmentFault,学习技能、解决问题
每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。在BDP如何制作行政地图及各地省份地图,实现地图可视化在BDP如何制作行政地图及各地省份地图,实现地图可视化海致BDP百家号地图可视化即地理信息可视化,用户及用户行为的地理信息是现在在“精准营销”中需要着重分析的数据。地图的可视化有很多种,有热力地图、轨迹地图等,但今天想介绍的是一种操作起来非常简单的行政地图。这里讲的行政地图分为面积地图和气泡地图,两者有什么不同呢?1、面积地图每块区域颜色的深浅可以表明数量的大小。若当你想对比“华北”与“华东”的情况或是数值是否与地域面积大小有关时最好选择面积地图。2、气泡地图用气泡大小和颜色深浅两个指标来衡量数据的大小。若当你想着重展示地域数据而不考虑地理位置及面积时应选择气泡地图。以上两种图相比来说气泡地图能够清楚直观地看出比较结果,而面积地图由于面积大小而限制了显示效果,比如上海面积不如四川大,但其订单数量却比四川多得多,像上述这种情况我们就应该合理地选择气泡地图。下面举例来说下操作过程,场景如下:现有一份某网站访问用户分布数据,想得知哪个地区用户最多,之后进行重点推广营销。1、选择分析字段,拖拽制图2、设置颜色及梯度(1)将想要设置颜色的字段拖拽至“颜色”(2)点击字段,进行颜色和梯度设置(梯度越大颜色区分越明显)这样我们就可以得知哪些地区需要我们“重点观察”而哪些地区可以选择适当减少精力甚至放弃,会减少一定的损失,为后期网站运营打下良好的基础。接下来若先看某省中各市的数据,应该如何实现呢?操作总共分为三步,其中前两步基本同上...但想要实现省份地图的前提是你要有本省每个市的数据,之后进行筛选。可以参考下图:(1)将字段拖拽到“筛选器”,并选择省份(以四川为例)(2)统计设置(选择“按市汇总”和“显示区域”),显示四川各城市数据信息。做了省份地图后的好处有什么呢?可以更加详细到每个市的数据,将此图表分享给各区域负责人,让其细化营销方案,进而可能会提高决策的正确性,带来不可估量的价值。以上工具为BDP个人版本文由百家号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。未经作者许可,不得转载。海致BDP百家号最近更新:简介:大数据时代的商业智能作者最新文章相关文章flash-china-map:动态可视化的开源地图 - 开源软件 - ITeye资讯
开发者ComingX在上开源了其“Flash中国地图”项目,遵循Apache 2.0开源协议。
Flash中国地图是一个基于Flash和Flex开发的地图项目,以Object为数据源,你可以用于项目中来展示动态、可视化的中国地图效果。
演示:
使用方法:
Flash中国地图的主要特点如下:
格式为swc,便于导入到Flex项目中
数据源为Object,比XML更方便
数据驱动的地图块颜色和Hover颜色
可配置是否显示省份名
快速方便
源码:
你可以下载其中的文件,直接导入Flash Build中,即可快速演示该项目。
axeon 写道南沙群岛给漏了,这要以前是重大事故没有,在下面。
南沙群岛给漏了,这要以前是重大事故
慢慢来,前面还有openlayers和openscales呢

我要回帖

更多关于 小程序可视化制作工具 的文章

 

随机推荐