V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
JasonTsang
V2EX  ›  JavaScript

这个 3D 可交互的地图 怎么做?

  •  
  •   JasonTsang · 2018-12-15 17:43:57 +08:00 · 6740 次点击
    这是一个创建于 2161 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我想做一个 3D 的地图,可交互的。主要是点击之类的事件

    当鼠标点击某个区域时,某个区域就会慢慢升起。而且区域可变色。

    中国地图

    当鼠标升到广东时,广东这块地区就会。慢慢升起(有一个过程)。。

    当然下图的广东地图应该是在中国地图上,只是广东这块区域升起来了。(暂时没找到样例图 所以大家联想一下吧。)

    广东地图

    17 条回复    2018-12-26 19:46:45 +08:00
    Wnbo
        1
    Wnbo  
       2018-12-15 17:53:36 +08:00
    highcharts ?
    lucahan
        2
    lucahan  
       2018-12-15 18:01:15 +08:00
    echarts,highcharts 应该都可以的
    JasonTsang
        3
    JasonTsang  
    OP
       2018-12-15 18:20:22 +08:00
    @lucahan echarts 试了,里面的确可以做到 图一的效果。但交互无法完成。比如我要不同的区不同的颜色。点击后可以变色,并慢慢升起。echarts 做不到。他可以升起。但没有动画没有过程。
    JasonTsang
        4
    JasonTsang  
    OP
       2018-12-15 18:21:50 +08:00
    @lucahan 而且无法自定义区域。比如我一个广东广州市的。鼠标点击天河区。天河区可以慢慢升起。并变色。可惜的是。并没有 区的细分
    beginor
        5
    beginor  
       2018-12-15 19:18:44 +08:00 via Android
    mapbox 可以轻松实现,GIS 的功能还是应该用 GIS 来解决
    davin
        6
    davin  
       2018-12-15 22:23:11 +08:00 via iPhone
    Echarts 2 里面好像有地图叫下沉式地图?省市区县镇这种,不过需要详尽的对应经纬度好像。
    lqw3030
        7
    lqw3030  
       2018-12-15 23:39:52 +08:00 via iPhone
    webgl 了解下
    janus77
        8
    janus77  
       2018-12-16 00:41:56 +08:00
    webgl ……可能有点大材小用了不过
    duan602728596
        9
    duan602728596  
       2018-12-16 00:56:43 +08:00 via iPhone
    基本上是用 webgl 了,而且还需要有个会做模型的人给你做模型
    yuanfnadi
        10
    yuanfnadi  
       2018-12-16 01:05:01 +08:00 via iPhone
    gooin
        11
    gooin  
       2018-12-16 07:12:57 +08:00 via Android
    Cesium 了解一下,每个省就是个 polygon,给个厚度就有图上效果了。鼠标移入到每个 polygon 上修改厚度就 OK 了。动画的话也简单,Cesium 是有时间轴这个概念的,移入之每 xx 毫秒增加高度就行。
    andy12530
        12
    andy12530  
       2018-12-16 09:11:32 +08:00 via iPhone
    mapbox
    1KN6sAqR0a57no6s
        13
    1KN6sAqR0a57no6s  
       2018-12-16 19:00:34 +08:00 via Android   ❤️ 1
    这不就是我们 GIS 专业搬砖人员一天到晚做的事吗...(doge)
    wangxiaotang
        14
    wangxiaotang  
       2018-12-25 00:06:09 +08:00
    请问图一的上升的那一部分是怎么实现的呢?想知道,等待等待
    JasonTsang
        15
    JasonTsang  
    OP
       2018-12-25 20:33:17 +08:00
    @wangxiaotang 我选 了用 WEBGL 去做了一个 3D 的场景。。。发现现在 的所部地图 都是为了显示数据。
    ![地图]( )
    wangxiaotang
        16
    wangxiaotang  
       2018-12-26 09:27:53 +08:00
    @JasonTsang 我是想尽量就用 echarts 解决,就是你图一那种效果,中间有一部分区域上升凸出来,我看你说可以实现,我研究两天了,也没有实现这个。WEBGL 这个没有用过,感觉我没办法在一定的时间内弄出来。
    JasonTsang
        17
    JasonTsang  
    OP
       2018-12-26 19:46:45 +08:00
    @wangxiaotang 已经实现 了。就是要点击某一个区,然后 哪个区 3D 的形式慢慢升起。然后再播放业务动画。WEBGL 可能有点难。我是花了不少时间去完成。或者你可以想想别的方法。呵呵
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4641 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 05:36 · PVG 13:36 · LAX 21:36 · JFK 00:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.