基于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. 前端JS下载文件总结

    Data URLs Data URLs: 即前缀为data: 协议的URL,其允许内容创建者向文档中嵌入小文件. 例如:可以直接在HTML中的img元素直接使用Data URLs : data:[&l ...

  2. 12.java设计模式之代理模式

    基本介绍: 代理模式(Proxy)为一个对象提供一个替身,以控制对这个对象的访问.即通过代理对象访问目标对象.这样做的好处是:可以在目标对象实现的基础上,增强额外的功能操作,即扩展目标对象的功能,想在 ...

  3. 部署sftp服务

    部署sftp服务有风险,可能造成ssh无法连接到服务器,因此写个脚本定时覆盖一下,保证ssh可以正常使用. 创建数据目录并赋权,创建账号密码,修改ssh文件. * mkdir /sftp groupa ...

  4. SpringBoot加载配置文件的几种方式

    首先回忆一下在没有使用SpringBoot之前也就是传统的spring项目中是如何读取配置文件,通过I/O流读取指定路径的配置文件,然后再去获取指定的配置信息. 传统项目读取配置方式 读取xml配置文 ...

  5. Mac 安装并破解热部署插件JRebel详细教程

    热部署插件 JRebel 非常高效的解决了在IDEA中对 Java 代码修改重启Tomcat的效率问题,这样大大降低了项目开发的时间,不用重启即可重新编译修改过的Java代码! (1)IDEA中安装热 ...

  6. ServerLess之云函数实践-天气API

    关注我的个人博客,发掘更多的内容 ServerLess之云函数实践-天气API 前言 云计算是大势所趋 Serverless 架构即"⽆服务器"架构,它是一种全新的架构方式,是云计 ...

  7. 算法基础——KMP字符串匹配

    原题链接 题目: 给定一个模式串S,以及一个模板串P,所有字符串中只包含大小写英文字母以及阿拉伯数字. 模板串P在模式串S中多次作为子串出现. 求出模板串P在模式串S中所有出现的位置的起始下标. 输入 ...

  8. 仅一年工作经验成功跳槽字节跳动,腾讯并拿到字节的offer,全靠这份面经!

    前言 前几天由于工作的原因一直没怎么看私信,昨天在整理私信的时候看到了一个粉丝给我疯狂私信想要我帮忙整理一份大厂面经,说自己工作也有几年了想跳槽冲刺一下,但是不知道该怎么做好前期准备.我看到这个粉丝也 ...

  9. ABBYY FineReader 15如何比较文档?

    ABBYY FineReader 15 OCR文字识别软件能帮助用户快速地对比两个文档间的差异,适合用于审阅.修改文档,发现新旧版本差异,预防输出错误版本等情况.此功能既能用于对比同一格式文档的不同版 ...

  10. 找回消失的IDM嗅探下载浮动条的方法

    我们之前讲了IDM资源嗅探的下载浮动条的设置方法,然而在有些时候,这个下载浮动条无法正常显示出来,影响了下载体验,这个问题该如何解决呢? 1.安装IDM扩展程序 一般来说,在IDM安装完成后,会在浏览 ...