高德地图
开启卫星地图
import AMap from 'AMap' // 引入高德地图
var map;//定义
map = new AMap.Map('container', {
resizeEnable: true,
rotateEnable:true,
pitchEnable:true,
zoom: 13,
pitch: 65,
rotation: 45,
viewMode:'3D',//开启3D视图,默认为关闭
buildingAnimation:true,//楼块出现是否带动画
expandZoomRange:true,
center:[113.2385,22.96605],
layers: [
// 高德默认标准图层，开启卫星地图
new AMap.TileLayer.Satellite(),
// 楼块图层，拉近显示楼层
new AMap.Buildings({
zooms: [16, 18],
zIndex: 10,
heightFactor: 2 //2倍于默认高度，3D下有效
}),
],
})
标记点
//定位鼎旺中心
var maskerIn = new AMap.Marker({
position:[113.2385,22.96605],
map:map
});
动画镜头拉近
var loca = window.loca = new Loca.Container({
map,
});
var pl = window.pl = new Loca.PolygonLayer({
zIndex: 120,
shininess: 10,
hasSide: true,
cullface: 'back',
depth: true,
});
//定位，地图没有这个说明，找客服的，没有这个加模型报错
pl.setCustomCenter([109.663237,23.594774]);
pl.setLoca(loca);
map.on('complete', function () {
loca.animate.start();
// setTimeout(_this.animates, 2000);//调用镜头动画
});
//点击调用精通动漫
animates(){
var speed = 1;
loca.viewControl.addAnimates([
// 寻迹
{
center: {
value: [113.2385,22.96605],
control: [[113.2385,22.96605], [113.2385,22.96605]],
timing: [0.3, 0, 0.1, 1],
duration: 8000 / speed,
},
//快速移动,前进
zoom: {
value: 18,
control: [[0.3, 15], [1, 17]],
timing: [0.3, 0, 0.7, 1],
duration: 4000 / speed,
},
}, {
// 环绕
rotation: {
value: 270,
control: [[0, 0], [1, 270]],
timing: [0, 0, 0, 1],
duration: 7000 / speed,
},
//前进
zoom: {
value: 17,
control: [[0.3, 16], [1, 17]],
timing: [0.3, 0, 0.7, 1],
duration: 5000 / speed,
},
}], function () {
pl.hide(1000);
setTimeout(animate, 2000);
console.log('结束');
});
},
移除
//定位鼎旺中心
var maskerIn = new AMap.Marker({
position:[113.2385,22.96605],
map:map
});
//移除点maskerIn
map.remove(maskerIn);
添加
var marker = new AMap.Marker({
position:[113.2385,22.96605],
map:map
});
map.add(marker);//添加到地图
图层添加减少（切换卫星图等）
//实时卫星图层
var trafficLayer = new AMap.TileLayer.Satellite();//卫星图层
map.add(trafficLayer);//添加卫星图层到地图
// 楼块图层
var buildings = new AMap.Buildings({
zooms: [16, 18],
zIndex: 10,
heightFactor: 2 //2倍于默认高度，3D下有效
});
map.add(buildings);//添加图层到地图
自定义地图
mapStyle:'amap://styles/7dcd2efda489aabcf37d2cbf57302856',
画圆线等
提供了绘制圆Circle、折线 Polyline、多边形 Polygon、椭圆 Ellipse、矩形 Rectangle、贝瑟尔曲线 BesizerCurve等矢量图形的能力，比如添加折线：
var lineArr = [
[116.368904, 39.913423],
[116.382122, 39.901176],
[116.387271, 39.912501],
[116.398258, 39.904600]
];
//Polyline折线
var polyline = new AMap.Polyline({
path: lineArr, //设置线覆盖物路径
strokeColor: "#3366FF", //线颜色
strokeWeight: 5, //线宽
strokeStyle: "solid", //线样式
});
map.add(polyline);
点击事件
//定位鼎旺中心
var maskerIn = new AMap.Marker({
position:[113.2385,22.96605],
id:'大得'
});
map.add(maskerIn);//添加到地图
//绑定maskerIn点击事件
maskerIn.on('click',function(e){
console.log(e.target._originOpts.id)
});
普通窗体
通过 anchor 可以方便的设置锚点方位。anchor 可选值有 'top-left'、'top-center'、'top-right'、'middle-left'、'center'、'middle-right'、'bottom-left'、'bottom-center'、'bottom-right' ， 分别代表了信息窗体锚点的不同方位。
var infoWindow = new AMap.InfoWindow({
anchor: 'top-left',
content: '这是信息窗体！',
});
infoWindow.open(map,[116.401337,39.907886]);
自定义窗口
1、css复制黏贴进去
.content-window-card {
position: relative;
box-shadow: none;
bottom: 0;
left: 0;
width: auto;
padding: 0;
}
.content-window-card p {
height: 2rem;
}
.custom-info {
border: solid 1px silver;
}
div.info-top {
position: relative;
background: none repeat scroll 0 0 #F9F9F9;
border-bottom: 1px solid #CCC;
border-radius: 5px 5px 0 0;
}
div.info-top div {
display: inline-block;
color: #333333;
font-size: 14px;
font-weight: bold;
line-height: 31px;
padding: 0 10px;
}
div.info-top img {
position: absolute;
top: 10px;
right: 10px;
transition-duration: 0.25s;
}
div.info-top img:hover {
box-shadow: 0px 0px 5px #000;
}
div.info-middle {
font-size: 12px;
padding: 10px 6px;
line-height: 20px;
}
div.info-bottom {
height: 0px;
width: 100%;
clear: both;
text-align: center;
}
div.info-bottom img {
position: relative;
z-index: 104;
}
span {
margin-left: 5px;
font-size: 11px;
}
.info-middle img {
float: left;
margin-right: 6px;
}
2、点击弹出窗体
//定位鼎旺中心
var maskerIn = new AMap.Marker({
position:[113.2385,22.96605],
id:'大得'
});
map.add(maskerIn);//添加到地图
//点击事件
maskerIn.on('click',function(e){
//console.log(e.target._originOpts.id)
_this.listener()
});
3、封装的listener方法
//点击弹窗窗体
listener(){
var content = [
"<div><div style='color:red;'>电话 : 010-84107000 邮编 : 100102</div>",
"<div style='color:red;'>地址 : 北京市望京阜通东大街方恒国际中心A座16层</div></div>"
];
var infoWindow = new AMap.InfoWindow({ //创建信息窗体
isCustom: true, //使用自定义窗体
content: createInfoWindow('大得', content.join("<br/>")),
offset: new AMap.Pixel(16, -45)
});
infoWindow.open(map,[113.2385,22.96605]);
//构建自定义信息窗体
function createInfoWindow(title, content) {
var info = document.createElement("div");
info.className = "custom-info input-card content-window-card";
//可以通过下面的方式修改自定义窗体的宽高
//info.style.width = "400px";
// 定义顶部标题
var top = document.createElement("div");
var titleD = document.createElement("div");
var closeX = document.createElement("img");
top.className = "info-top";
titleD.innerHTML = title;
closeX.src = "https://webapi.amap.com/images/close2.gif";
closeX.onclick = closeInfoWindow;
top.appendChild(titleD);
top.appendChild(closeX);
info.appendChild(top);
// 定义中部内容
var middle = document.createElement("div");
middle.className = "info-middle";
middle.style.backgroundColor = 'white';
middle.innerHTML = content;
info.appendChild(middle);
// 定义底部内容
var bottom = document.createElement("div");
bottom.className = "info-bottom";
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
var sharp = document.createElement("img");
sharp.src = "https://webapi.amap.com/images/sharp.png";
bottom.appendChild(sharp);
info.appendChild(bottom);
return info;
}
//关闭信息窗体
function closeInfoWindow() {
map.clearInfoWindow();
}
},
自定义图标（图片标记）
var maskerIn = new AMap.Marker({
position: new AMap.LngLat(113.2385,22.96605),
// 将一张图片的地址设置为 icon
icon: 'http://www.dap.com:8086/666.png',
// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-13, -30)
});
map.add(maskerIn);//添加到地图
一块区域凸起（版本1.4.15）
// 设置光照
map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);
map.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1);
var object3Dlayer = new AMap.Object3DLayer();
map.add(object3Dlayer);
new AMap.DistrictSearch({
subdistrict: 0, //返回下一级行政区
extensions: 'all', //返回行政区边界坐标组等具体信息
level: 'city' //查询行政级别为 市
}).search('顺德区', function (status, result) {
var bounds = result.districtList[0].boundaries;
var height = 5000;
var color = '#0088ffcc'; // rgba
var prism = new AMap.Object3D.Prism({
path: bounds,
height: height,
color: color
});
prism.transparent = true;
object3Dlayer.add(prism);
text.setMap(map);
});
禁止缩放和滚动
zoomEnable:false,
dragEnable: false,
自定义地图
mapStyle: "amap://styles/你的样式ID"，
地图显示角度
function GisMapMoveTo(lng, lat) {
// map.setCenter([lng, lat]); //设置地图中心点
map.setRotation((map.getRotation()+0.6)%360);
//显示角度
map.setRotation(121.499809);
GisMapMoveTo();
}
GisMapMoveTo();
地图结合three模型gltf
<template>
<div class="box">
<div style="position: absolute;z-index: 10;cursor:pointer;margin-top:200px;" @click="animates()">
666666666666666666666666
<!-- <div style="width: 500px;height: 960px;background-color: #000000;">6666666666666666666666666666666666</div> -->
</div>
<div id="container" style="width: 100%;height: 990px;"></div>
</div>
</template>
<script>
import AMap from 'AMap' // 引入高德地图
var map;
export default {
data() {
return {
}
},
mounted () {
this.init()
},
methods: {
init () {
var _this = this;
map = new AMap.Map('container', {
zoom: 14,
pitch: 65,
viewMode:'3D',//开启3D视图,默认为关闭
showBuildingBlock: false,
mapStyle: "amap://styles/7dcd2efda489aabcf37d2cbf57302856",
center:[109.663237,23.594774],
})
//定位鼎旺中心
var maskerIn = new AMap.Marker({
position:[109.663237,23.594774],
map:map
});
var loca = window.loca = new Loca.Container({
map
});
var pl = window.pl = new Loca.PolygonLayer({
zIndex: 120,
shininess: 10,
hasSide: true,
cullface: 'back',
depth: true,
});
pl.setCustomCenter([109.663237,23.594774]);
pl.setLoca(loca);
map.on('complete', function () {
loca.animate.start();
// setTimeout(_this.animates, 2000);//调用镜头动画
});
//调用模型
this.model3d();
},
//点击调用精通动漫
animates(){
var speed = 1;
loca.viewControl.addAnimates([
// 寻迹
{
center: {
value: [109.663237,23.594774],
control: [[109.663237,23.594774], [109.663237,23.594774]],
timing: [0.3, 0, 0.1, 1],
duration: 8000 / speed,
},
//快速移动,前进
// zoom: {
// value: 16,
// control: [[0.3, 15], [1, 17]],
// timing: [0.3, 0, 0.7, 1],
// duration: 4000 / speed,
// },
// 环绕
rotation: {
value: 270,
control: [[0, 0], [1, 270]],
timing: [0, 0, 0, 1],
duration: 7000 / speed,
},
//前进
zoom: {
value: 14,
control: [[0.3, 16], [1, 17]],
timing: [0.3, 0, 0.7, 1],
duration: 5000 / speed,
},
},
{
// // 环绕
// rotation: {
// value: 270,
// control: [[0, 0], [1, 270]],
// timing: [0, 0, 0, 1],
// duration: 7000 / speed,
// },
// //前进
// zoom: {
// value: 16,
// control: [[0.3, 16], [1, 17]],
// timing: [0.3, 0, 0.7, 1],
// duration: 5000 / speed,
// },
}], function () {
pl.hide(1000);
setTimeout(animate, 2000);
// console.log('结束');
});
},
//小黄鸭
model3d(){
map.on('dblclick', function(e){
// console.log('dblclick')
})
map.on('click', function(e){
// console.log('click')
})
var camera;
var renderer;
var scene;
var dLight;
var meshes = [];
var customCoords = map.customCoords;
var data = customCoords.lngLatsToCoords([
[109.663237,23.594774],
[109.653237,23.594774],
[109.643237,23.594774],
]);
var gllayer = new AMap.GLCustomLayer({
zIndex: 0,
init: (gl) => {
camera = new THREE.PerspectiveCamera(60, 1500 / 990, 100, 1 << 30);
renderer = new THREE.WebGLRenderer({
context: gl,//地图的gl上下文
});
//自动清空画布这里必须设置为 false，否则地图底图将无法显示
renderer.autoClear = false;
renderer.outputEncoding = THREE.sRGBEncoding;
scene = new THREE.Scene();
// 没有光 纹理看不到，// 环境光照和平行光
// var aLight = new THREE.AmbientLight(0xffffff);
// scene.add(aLight);
var aLight = new THREE.AmbientLight(0xffffff, 0.3);
var dLight = new THREE.DirectionalLight(0xffffff, 1);
dLight.position.set(1000, -100, 900);
scene.add(dLight);
scene.add(aLight);
// 加载gltf
var loader = new THREE.GLTFLoader();
// Load a glTF resource
// var urlDuck = 'https://a.amap.com/jsapi_demos/static/gltf-online/shanghai/scene.gltf';
var urlDuck = 'https://a.amap.com/jsapi_demos/static/gltf/Duck.gltf';
loader.load(
urlDuck,
function ( gltf ) {
let rotateX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), Math.PI / 2);
gltf.scene.traverse(child => {
if (child instanceof THREE.Mesh) {
// child.material.color = [0,0,0,1];
child.material.opacity = 1;
child.material.transparent = false;
child.applyMatrix4(rotateX);
child.geometry.center();
child.rotateZ(360 / 180 * Math.PI);
//位置角度
child.rotateY(130);
}
})
// child.applyMatrix4(rotateX);
//模型大小
gltf.scene.scale.set( 500, 500, 500);
scene.add( gltf.scene );
renderer.render(scene, camera);
},
function ( xhr ) {
// console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
function ( error ) {
// console.log( 'An error happened' );
}
);
},
render: () => {
// console.log('---render---')
renderer.state.reset();
const { near, far, fov, up, lookAt, position } = customCoords.getCameraParams();
camera.near = near;
camera.far = far;
camera.position.set(...position);
camera.up.set(...up);
camera.lookAt(...lookAt);
camera.fov = fov;
// console.log(fov)
camera.updateProjectionMatrix();
renderer.render(scene, camera);
},
});
map.add(gllayer);
}
},
}
</script>
<style lang="scss">
//地图背景颜色
.amap-e, .amap-maps {
width: 100%;
height: 100%;
outline: none;
background: #05162a;
}
// 隐藏左下角地图图标
.amap-copyright {
display: none!important;
left: 77px;
height: 16px;
bottom: 0;
padding-bottom: 2px;
font-size: 11px;
font-family: Arial,sans-serif;
}
.amap-copyright, .amap-logo {
display: none!important;
}
// 隐藏左下角地图图标结束
</style>
导入gltf设置高度
loader.load(urlDucks,function ( gltf ) {
gltf.scene.traverse(child => {
if (child instanceof THREE.Mesh) {
// child.material.color = [0,0,0,1];
child.material.opacity = 1;
child.material.transparent = false;
child.applyMatrix4(rotateX);
child.geometry.center();
//设置高度x,y,z
child.position.set(0,0,-2090)
console.log(child.position)
child.rotateX(300 * Math.PI);
child.rotateZ(360 / 180 * Math.PI);
//位置
child.rotateY(360 / 180 * Math.PI);
// child.rotateY(200);
}
})
// child.applyMatrix4(rotateX);
//小黄丫模型大小
// gltf.scene.scale.set( 500, 500, 500);
//武宣县大小
gltf.scene.scale.set( 300,300,300);
scene.add( gltf.scene );
renderer.render(scene, camera);
},
function ( xhr ) {
// console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
function ( error ) {
console.log( error);
}
);
点击获得经纬度
map.on('click', function(e) {
//经度
console.log(e.lnglat.getLng())
//纬度
console.log(e.lnglat.getLat())
});
扫一扫
826
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
