JS地图开发

JS地图开发,第1张

之前有提到由于项目需要进行LBS,从而对百度地图进行了一些研究。碰巧最近又接触了微信小程序,其中也涉及到有关地图方面的开发,腾讯地图这不就也来了。所以记录一下项目实践过程中的一些感悟。

首先,从官方文档来看(以下内容仅仅是JavaScript API部分):百度地图和腾讯地图很类似。不仅仅体现在支持的绘画图层(标记点、信息窗口、覆盖物)和服务类(常用的路线规划、正/逆地址解析),甚至命名也很一致。因此,有其中一个的开发经验,另一个也可以很快上手。

使用方式也一致。申请key以后引入到项目中。

默认样式主题。个人认为腾讯比百度好看(个人看法!),但是都支持自定义主题样式,因此没什么区别。

文档查阅。个人认为百度优于腾讯。

每日调试次数对比:百度配额更高些

https://lbsyun.baidu.com/solutions/privilege

https://lbs.qq.com/service/webService/webServiceGuide/webServiceQuota

有个小区别在于经纬度标准,两者数据需要进行一个转换,否则会有些许偏差。

作为一个用户,在平时导航使用感受是:高德>百度>腾讯。由于现在还没在开发过程中使用过高德地图,只是粗略地去看了眼官方文档,其中有一个关于天气的服务支持,好像在另外两家没有看到。其他的也都大同小异。不过腾讯有个支持游戏的LBS服务的解决方案,特色~

three.js创建地图的方法:

1.定义html页面

<!DOCTYPE html>

<html>

<head>

<title>Three.js Step Tutorial</title>

<style>

 body {

  margin: 0px

  background-color: #fff

  overflow: hidden

 }

</style>

</head>

<body>

<script src="js/three.min.js"></script>

<script src="js/three-tut.js"></script>

</body>

</html>

2、编写动画脚本anotation.js

var camera定义相机

var scene定义场景画布

var renderer定义渲染入口

var mesh定义恢复

init()初始化画布

animate()开始动画

函数定义

function init() {

scene = new THREE.Scene()

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000)

var light = new THREE.DirectionalLight( 0xffffff )

light.position.set( 0, 1, 1 ).normalize()

scene.add(light)

var geometry = new THREE.CubeGeometry( 10, 10, 10)

var material = new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } )

mesh = new THREE.Mesh(geometry, material )

mesh.position.z = -50

scene.add( mesh )

renderer = new THREE.WebGLRenderer()

renderer.setSize( window.innerWidth, window.innerHeight )

document.body.appendChild( renderer.domElement )

window.addEventListener( 'resize', onWindowResize, false )

render()

}

function animate() {

mesh.rotation.x += .04

mesh.rotation.y += .02

render()

requestAnimationFrame( animate )

}

function render() {

renderer.render( scene, camera )

}

形状变换

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight

camera.updateProjectionMatrix()

renderer.setSize( window.innerWidth, window.innerHeight )

render()

}

3、运行以上程序,效果如下:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/11285250.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-15
下一篇 2023-05-15

发表评论

登录后才能评论

评论列表(0条)

保存