3D Web地图渲染引擎

JavaScript011

3D Web地图渲染引擎,第1张

是一个 实验性和正在进行 的开源3D地图渲染引擎。

您可以使用此引擎:

考虑到这一点,我们已经包含了一些模块,让您开始使用一些简单的Web应用程序,这些应用程序可以使用我们的默认样式显示地图

添加three.js和harp.gl你的HTML,并创建一个id画布map:

初始化地图:

节点模块

使用包生成器生成一个简单的应用程序:

这个存储库是一个包含核心组件的monorepo harp.gl,组织在一个yarn workspace。

所有组件都可以独立使用,并且位于@here子目录中。

在Node.js中

所有harp.gl模块均可通过纱线(或npm)安装:

在浏览器中

由于harp.gl包含一组模块,因此没有现成的捆绑包。查看有关如何使用工具的信息的示例,例如webpack为浏览器创建一个包。

跑:

下载并安装所有必 需的包并设置工作区。

跑:

发射webpack-dev-server。localhost:8080/在您喜欢的浏览器中打开。

跑:

localhost:8080/在您喜欢的浏览器中打开以运行测试。

跑:

跑:

记下URL并使用调用测试mocha-webdriver-runner。例:

跑:

它将输出所有文档/dist/doc。

更多用法 需要查看官方文档

您知道哪些好用的网络地图渲染引擎,欢迎评论分享,共同探讨学习

vue中使用 echarts地图

main.js中

package.json 使用版本

在vue文件中使用

3d地图示例

中国地图json数据

import '@/components/china'

var myChart = this. echarts.registerMap("china", china)//china为上图中的json数据

const myChart = this.$echarts.init(document.getElementById('main'))

option={

//此处配置可参考官网例子即可

};

myChart.setOption(option)

此处说明如何出现geo3d(立体地图)

数据来源

http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

按照需求,选择对应的数据,保存为json文件引入项目中即可

羊了个羊变成3D模式的方法是用网页端进入羊了个羊,然后迅速通过第一关,接着右键网页 点击检查 需要用到抓包工具100多行的python代码,以及一个用来显示3d地图的Three.js网页。