基于echarts的3D地图进行,直接将这代码粘贴到echarts的demo中即可呈现效果

var mygeo = { // 标准的geojson格式
"type": "FeatureCollection",
"features": [
{
     "type":"Feature",
"properties":{
"name": "myself1"
},
"geometry":{
"type":"MultiPolygon",
"coordinates": [
[
[[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]], // outer ring
[[37.29, -108.58],[40.71, -108.58],[40.71, -102.50],[37.29, -102.50]] // hole
]
]
}
},
{
     "type":"Feature",
"properties":{
"name": "myself2"
},
"geometry":{
"type":"Polygon",
"coordinates": [
[[41, -109.03],[41, -102.05],[43, -102.04],[43, -109.03]]
]
}
}
]
};
echarts.registerMap('mygeo', mygeo);
var regions = mygeo.features.map(function (feature) {
console.log(JSON.stringify(feature));
return {
name: feature.properties.name,
value: Math.random(),
height: Math.random()*10
};
});
myChart.setOption({
visualMap: {
show: false,
min: 0.4,
max: 1,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
}
},
series: [{
type: 'map3D',
map: 'mygeo',
data: regions
}]
});

效果图:

参考地址:https://echarts.apache.org/examples/zh/editor.html?c=map3d-buildings&gl=1

参考地址对应的效果:

自定义3D地图的更多相关文章

  1. Windows 10 新特性 -- Bing Maps 3D地图开发入门(一)

    本文主要内容是讲述如何创建基于 Windows Universal App 的Windows 10 3D地图应用,涉及的Windows 10新特性包括 Bing Maps 控件.Compiled da ...

  2. 初级开发者也能码出专业炫酷的3D地图吗?

    好看的3D地图搭建出来,一定是要能为开发者所用与业务系统开发中才能真正地体现价值.基因于此,CityBuilder建立了与ThingJS的通道——直转ThingJS代码,支持将配置完成的3D地图一键转 ...

  3. HT for Web自定义3D模型的WebGL应用

    有不少朋友询问<HTML5 Web 客户端五种离线存储方式汇总>文章例子的3D表计模型是如何生成的,这个例子是通过导入3dmax设计好的表计模型,然后通过obj格式导入到HT for We ...

  4. ArcGIS API for JavaScript 4.2学习笔记[2] 显示3D地图

    3D地图又叫场景. 由上一篇可知, require入口函数的第一个参数是字符串数组 ["esri/Map", "esri/views/MapView", &qu ...

  5. Threejs 开发3D地图实践总结

    前段时间连续上了一个月班,加班加点完成了一个3D攻坚项目.也算是由传统web转型到webgl图形学开发中,坑不少,做了一下总结分享. 1.法向量问题 法线是垂直于我们想要照亮的物体表面的向量.法线代表 ...

  6. 使用WebGL 自定义 3D 摄像头监控模型

    前言 随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的同时,在监控系统中面临着严峻的现状问 ...

  7. 基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型

    前言 随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的同时,在监控系统中面临着严峻的现状问 ...

  8. Threejs 开发3D地图实践总结【转】

    Threejs 开发3D地图实践总结   前段时间连续上了一个月班,加班加点完成了一个3D攻坚项目.也算是由传统web转型到webgl图形学开发中,坑不少,做了一下总结分享. 1.法向量问题 法线是垂 ...

  9. ArcGIS Pro 自定义坐标系地图矢量切片制作

    ArcGIS Pro从1.4版本起就支持自定义坐标系统地图的矢量切片制作了. 步骤: 1. 将地图有全图范围缩小到屏幕像素大约10*10像素的范围,然后记录下地图的比例尺.这一步十分关键,不然系统要经 ...

随机推荐

  1. 预估ceph的迁移数据量

    引言 我们在进行 ceph 的 osd 的增加和减少的维护的时候,会碰到迁移数据,但是我们平时会怎么去回答关于迁移数据量的问题,一般来说,都是说很多,或者说根据环境来看,有没有精确的一个说法,到底要迁 ...

  2. bWAPP----iFrame Injection

    iFrame Injection 直接上代码 1 <div id="main"> 2 3 <h1>iFrame Injection</h1> 4 ...

  3. yum安装no more mirrors to try

    先挂载:mount /dev/cdrom /mnt yum clean allyum makecacheyum -y update 后重试

  4. 企业级工作流解决方案(九)--微服务Tcp消息传输模型之客户端处理

    客户端启动 客户端启动主要做三件事情,1. 从配置文件读取服务调用配置,存储到全局对象中.2. 指定客户端编解码器工厂.3. 预连接,即预先建立与服务端的通信Chanel. [DependsOn(ty ...

  5. Postman设置自动捕获传递Cookie教程

    目录 前言 一.安装 1.Postman安装Install Interceptor Bridge 2.谷歌浏览器安装扩展Postman Interceptor 二.使用 1. 打开Capture Co ...

  6. Camtasia如何给视频添加测试题

    Camtasia是一款专门录制屏幕动作的工具,除此之外,它还具有即时播放和编 辑压缩的功能,可对视频片段进行剪接.添加转场效果.给视频添加测试题自然也不在话下了. 今天笔者就向大家展示一下如何使用Ca ...

  7. Mac下载器Folx的标签功能怎么使用

    当大家使用Folx下载软件的时候,会发现,下载好的文件或者视频,会被Folx自动打上标签,进行归类,这其实就是Folx自带的智能标签功能,它能智能识别图片.视频.应用程序并分类.但很多时候,智能标签并 ...

  8. 从Guarded Block来看Java中的wait和notify方法

    目录 预备知识 概览 线程同步 wait()方法 wait() wait(long timeout) wait(long timeout, int nanos) notify() & noti ...

  9. pycharm2020激活破解和汉化

    一:破解补丁和程序下载:链接:https://pan.baidu.com/s/1u-aZrKMmfRBlQHtcivUt8Q    提取码:tvko 二:破解步骤: 1.安装下载的pycharm202 ...

  10. 精尽MyBatis源码分析 - MyBatis-Spring 源码分析

    该系列文档是本人在学习 Mybatis 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释(Mybatis源码分析 GitHub 地址.Mybatis-Spring 源码分析 GitHub ...