基本信息
源码名称：vue引入高德2D和3D地图实例
源码大小：0.88M
文件格式：.rar
开发语言：js
更新时间：2020-04-12
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300
本次赞助数额为： 2 元×
微信扫码支付：2 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
<template>
<div style="margin: 0px;">
<!--<div id="container" style="width:100%; height:100%;resize:both;"></div>-->
<div id="container2D" :class="type==2?'bigMap amap-container':'smallMap amap-container'" @dblclick="chanageMap(2)"></div>
<div id="container3D" :class="type==3?'bigMap amap-container':'smallMap amap-container'" @dblclick="chanageMap(3)"></div>
<div>
<el-button type="primary" v-if="isNightscape==1" @click="chanageModel()">切换白天</el-button>
<el-button type="primary" v-else-if="isNightscape==0" @click="chanageModel()">切换夜景</el-button>
<el-button type="primary" @click="worldVisualAngle()">世界视角</el-button>
</div>
</div>
</template>
<script>
import AMap from 'AMap' // 引入高德地图
export default {
name: 'Map3D',
props: {
msg: String
},
data() {
return {
type:3, //2 2D 3 3D
zoom:17, //比例
map3D:null,
map2D:null,
isNightscape:0 //是否夜景1、是 0、否
}
},
components: {},
computed: {},
created() {
},
mounted() {
this.mapInit3D();
this.mapInit2D();
// this.signMap();
},
methods: {
worldVisualAngle(){ //切换视角
this.map3D.setZoom(4);
},
chanageModel(){ //切换模式
if(!this.isNightscape){ //切夜景
this.isNightscape=1;
this.map3D.setMapStyle("dark");
this.map2D.setMapStyle("dark");
}else{
this.isNightscape=0;
this.map3D.setMapStyle(null);
this.map2D.setMapStyle(null);
}
},
chanageMap(clickType){ //切换地图
if(this.type!=clickType){
this.type=clickType;
}
},
mapInit2D() {
console.log("mapInit2D执行了===========")
this.map2D = new AMap.Map('container2D', {
resizeEnable: true,
rotateEnable: true,
pitchEnable: true,
zoom: 17,
pitch: 80,
rotation: -15,
buildingAnimation: true,//楼块出现是否带动画
expandZoomRange: true,
center: [116.333926, 39.997245]
});
/*this.map2D.addControl(new AMap.ControlBar({
showZoomBar: false,
showControlButton: true,
position: {
right: '10px',
top: '10px'
}
}))*/
/* this.map2D.addControl(new AMap.MapType({
defaultType:0 //0代表默认，1代表卫星
}));*/
},
mapInit3D() {
console.log("mapInit3D执行了===========")
var buildingLayer = new AMap.Buildings({zIndex:130,merge:false,sort:false,zooms:[17,20]});
var options =
{
hideWithoutStyle:false,//是否隐藏设定区域外的楼块
areas:[{ //围栏1
//visible:false,//是否可见
rejectTexture:true,//是否屏蔽自定义地图的纹理
color1: 'ffffff00',//楼顶颜色
color2: 'ffffcc00',//楼面颜色
path: [[116.471546,39.991033],[116.471825,39.991284],[116.471337,39.991637],[116.471031,39.99137]]
}, { //围栏2
color1: 'ff99ff00',
color2: 'ff999900',
path: [[116.472532,39.991742],[116.473068,39.992213],[116.47258,39.992704],[116.472037,39.992152]]
}]
};
buildingLayer.setStyle(options); //此配色优先级高于自定义mapStyle
this.map3D = new AMap.Map('container3D', {
// resizeEnable: true,
// rotateEnable: true,
// pitchEnable: true,
/*zoom: this.zoom,
pitch: 80,
rotation: -15,
viewMode: '3D',//开启3D视图,默认为关闭
// buildingAnimation: true,//楼块出现是否带动画
// expandZoomRange: true,
zooms: [3, 20],
center:[116.472605,39.992075],
layers:[
new AMap.TileLayer(),
buildingLayer,
],
features: ['bg', 'road']*/
/*,
mapStyle:"dark"*/
viewMode: '3D', // 开启 3D 模式
pitch: 70,
rotation: 35,
center: [116.472605,39.992075],
zooms: [3, 20],
features: ['bg', 'road','point'],
zoom: this.zoom/*,
mapStyle:"dark"*/
});
/*this.map3D.addControl(new AMap.ControlBar({
showZoomBar: false,
showControlButton: true,
position: {
right: '10px',
top: '10px'
}
}))*/
/*this.map3D.addControl(new AMap.MapType({
defaultType:0 //0代表默认，1代表卫星
}));*/
let map=this.map3D;
// 将 icon 传入 marker
var endMarker = new AMap.Marker({
position: new AMap.LngLat(116.472605,39.992075),
icon: require("@/assets/mc/图层 1.png"),
offset: new AMap.Pixel(-13, -30)
});
// 将 markers 添加到地图
this.map3D.add([endMarker]);
endMarker.on('click', clickMarker,this);
function clickMarker(){
map.setCenter(endMarker.getPosition());
map.setZoom(this.zoom);
console.log("clickMarker" endMarker.getPosition())
}
//获取动画数据
var i=1;
let zoom=this.zoom;
let icon=null;
setInterval(function(){
if(i > 20){
i=1;
}
let scale=map.getZoom()/zoom;
scale=(scale<1?scale/1.5:scale);
// console.log(scale)
icon=new AMap.Icon({
image: require("@/assets/mc/图层 " i ".png"),
size: new AMap.Size(226*scale, 167*scale), //图标大小
imageSize: new AMap.Size(226*scale,167*scale)
})
endMarker.setIcon(icon);
i ;
},100);
var object3Dlayer = new AMap.Object3DLayer();
map.add(object3Dlayer);
var lnglat1 = new AMap.LngLat(116.472605,39.992075);
var center_3d = map.lngLatToGeodeticCoord(lnglat1);
/* var topColor = [0, 0, 1, 0.9];
var topFaceColor = [0, 0, 1, 0.9];
var bottomColor = [0, 0, 1, 0.9];
//添加一个圆柱体
var addRegularPrism = function (center, segment, height, radius) {
var cylinder = new AMap.Object3D.Mesh();
var geometry = cylinder.geometry;
var verticesLength = segment * 2;
var path = []
for (var i = 0; i < segment; i = 1) {
var angle = 2 * Math.PI * i / segment;
var x = center.x Math.cos(angle) * radius;
var y = center.y Math.sin(angle) * radius;
path.push([x, y]);
geometry.vertices.push(x, y, 0); //底部顶点
geometry.vertices.push(x, y, -height); //顶部顶点
geometry.vertexColors.push.apply(geometry.vertexColors, bottomColor); //底部颜色
geometry.vertexColors.push.apply(geometry.vertexColors, topColor); //顶部颜色
var bottomIndex = i * 2;
var topIndex = bottomIndex 1;
var nextBottomIndex = (bottomIndex 2) % verticesLength;
var nextTopIndex = (bottomIndex 3) % verticesLength;
geometry.faces.push(bottomIndex, topIndex, nextTopIndex); //侧面三角形1
geometry.faces.push(bottomIndex, nextTopIndex, nextBottomIndex); //侧面三角形2
}
// 构建顶面三角形,为了区分顶面点和侧面点使用不一样的颜色,所以需要独立的顶点
for (var i = 0; i < segment; i = 1) {
geometry.vertices.push.apply(geometry.vertices, geometry.vertices.slice(i * 6 3, i * 6 6)); //底部顶点
geometry.vertexColors.push.apply(geometry.vertexColors, topFaceColor);
}
var triangles = AMap.GeometryUtil.triangulateShape(path);
var offset = segment * 2;
for (var v = 0; v < triangles.length; v = 3) {
geometry.faces.push(triangles[v] offset, triangles[v 2] offset, triangles[v 1] offset);
}
cylinder.transparent = false; // 如果使用了透明颜色，请设置true
// cylinder.textures.push("https://a.amap.com/jsapi_demos/static/tourist/crate.gif");
object3Dlayer.add(cylinder);
};
addRegularPrism(center_3d.add(new AMap.Pixel(0, 0)), 4, 800, 500) //三棱柱*/
var topColor = [0, 1, 5, 0.9];
var topFaceColor = [0, 1, 1, 0.9];
var bottomColor = [0, 1, 1, 0.9];
//添加一个圆柱体
var addRegularPrism = function (center, segment, height, radius) {
var cylinder = new AMap.Object3D.Mesh();
var geometry = cylinder.geometry;
var verticesLength = segment * 2;
var path = []
for (var i = 0; i < segment; i = 1) {
var angle = 2 * Math.PI * i / segment;
var x = center.x Math.cos(angle) * radius;
var y = center.y Math.sin(angle) * radius;
path.push([x, y]);
geometry.vertices.push(x, y, 0); //底部顶点
geometry.vertices.push(x, y, -height); //顶部顶点
geometry.vertexColors.push.apply(geometry.vertexColors, bottomColor); //底部颜色
geometry.vertexColors.push.apply(geometry.vertexColors, topColor); //顶部颜色
var bottomIndex = i * 2;
var topIndex = bottomIndex 1;
var nextBottomIndex = (bottomIndex 2) % verticesLength;
var nextTopIndex = (bottomIndex 3) % verticesLength;
geometry.faces.push(bottomIndex, topIndex, nextTopIndex); //侧面三角形1
geometry.faces.push(bottomIndex, nextTopIndex, nextBottomIndex); //侧面三角形2
}
// 构建顶面三角形,为了区分顶面点和侧面点使用不一样的颜色,所以需要独立的顶点
for (var i = 0; i < segment; i = 1) {
geometry.vertices.push.apply(geometry.vertices, geometry.vertices.slice(i * 6 3, i * 6 6)); //底部顶点
geometry.vertexColors.push.apply(geometry.vertexColors, topFaceColor);
}
var triangles = AMap.GeometryUtil.triangulateShape(path);
var offset = segment * 2;
for (var v = 0; v < triangles.length; v = 3) {
geometry.faces.push(triangles[v] offset, triangles[v 2] offset, triangles[v 1] offset);
}
cylinder.transparent = true; // 如果使用了透明颜色，请设置true
object3Dlayer.add(cylinder);
};
addRegularPrism(center_3d.add(new AMap.Pixel(0, 0)), 4, 800, 500) //三棱柱
// addRegularPrism(center_3d, 5, 1200, 500)//五棱柱
//
// addRegularPrism(center_3d.add(new AMap.Pixel(1500, 0)), 32, 1600, 500)//圆柱
// addRegularPrism(center_3d, 5, 1200, 500)//五棱柱
//
// addRegularPrism(center_3d.add(new AMap.Pixel(1500, 0)), 32, 1600, 500)//圆柱
},
signMap(){ //标记地图
// 创建一个 icon
/*var endIcon = new AMap.Icon({
size: new AMap.Size(25, 34),
image: '../assets/images/map_qd_1.png',
imageSize: new AMap.Size(135, 40),
imageOffset: new AMap.Pixel(-95, -3)
});*/
/* console.log("signMap执行了===========")
// 将 icon 传入 marker
var endMarker = new AMap.Marker({
position: new AMap.LngLat(116.333926, 39.997245),
icon: /!*endIcon*!/require("@/assets/images/map_qd_1.png"),
offset: new AMap.Pixel(-13, -30)
});
var endMarker2 = new AMap.Marker({
position: new AMap.LngLat(116.333926, 39.987245),
icon: /!*endIcon*!/require("@/assets/images/map_qd_2.png"),
offset: new AMap.Pixel(-13, -30)
});
// 将 markers 添加到地图
this.map.add([endMarker,endMarker2]);*/
}
}
}
</script>
<style lang='less' scoped>
body,html{ margin:0;padding:0;font:12px/16px Verdana,Helvetica,Arial,sans-serif;width: 100%;height: 100%}
.container{
height: 100%
}
.bigMap{
width:100%;
height:600px;
}
.smallMap{
width: 400px;
height: 300px;
position: absolute;
right: 0px;
top: 0px;
border: 3px solid #CFF;
z-index: 1;
}
</style>