封装了一些方法 前提是引入 高德api 才能使用这个办法
// 绘制进博会的区域
$(document).ready(function () {
// 绘制板块
$.ajax({
//可以是一个json里面是地址就是经纬度
url: ctx + '/map/demonstration/json/jinbohui.json',
async: false,
success: function (data) {
var polygons = outPolygon(data);
// 创建小区覆盖物群组
allBankuai = new AMap.OverlayGroup(polygons);
}
});
})
// 创建外层不规则图形
function outPolygon(areaDatas) {
let polygons = [];
for (let i = 0; i < areaDatas.length; i++) {
let areaData = areaDatas[i];
let name = areaData.name;
let areas = areaData.areas;
let strokeColor = '#00B6DA';
let fillColor = '#00A2E8';
let polygon = new AMap.Polygon({
path: areas,
fillColor: fillColor, // 多边形填充颜色
//这个是不规则的区域的
fillOpacity: 0, // 填充透明度
borderWeight: 2, // 线条宽度,默认为 1
strokeWeight: 1.5, // 轮廓线宽度
strokeColor: strokeColor, // 轮廓线条颜色
bubble: true
});
polygons.push(polygon);
}
return polygons;
}
map.add(allBankuai)
// 绘制进博会的区域
3D绘制代码如下
在vue中引用高德地图
npm i @amap/amap-jsapi-loader
哪里使用在哪里引入
import AMapLoader from "@amap/amap-jsapi-loader"; //引入
记得在data中使用
data() {
return {
//引入图片的方法
images: require("@/assets/screen/personnel/renyuanzuobiao.png"),
imagetip: require("@/assets/screen/personnel/bordertip.png"),
zaichangrneyuan: 40,
// infoWindow: "",
map: "", //地图实例化对象
// info: [], //信息窗体的内容
};
},
使用如下 这是在一个方法中使用 initmap(){}
let that = this;
// debugger
window._AMapSecurityConfig = {
//秘钥
securityJsCode: "d427d954bfafa3fb694741659dab2dae",
};
AMapLoader.load({
//申请的KEY的值
key: "8e990b742a2f4e168eee432972a9972c", //此处填入我们注册账号后获取的Key
// version: "2.0", //指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: ["AMap.Object3DLayer"], //需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap) => {
// this.map = new AMap.Map("container", {
//
// //设置地图容器id
// viewMode: "3D", //是否为3D地图模式
// zoom: 18, //初始化地图级别121.680479,31.300322 121.680429,31.30037
// center: [121.680479, 31.300322], //初始化地图中心点位置
// // 禁止拖动
// // zoomEnable: false, //是否缩放
// // dragEnable: false, //是否拖动
// showLabel: false, //不显示地图文字标记
// });
this.map = new AMap.Map("container12", {
//设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 16, //初始化地图级别121.680479,31.300322 121.680429,31.30037
center: [121.680497, 31.301334], //初始化地图中心点位置
// 禁止拖动
// zoomEnable: false, //是否缩放
// dragEnable: false, //是否拖动
showLabel: false, //不显示地图文字标记
});
//这个还是使用了自定义的地图
var styleName = "amap://styles/497004ae2c51a8533ae790fa18b72c5e";
that.map.setMapStyle(styleName);
that.map.setFitView();
})
.catch((e) => {
console.log(e);
});
},
上方是必须写的 下发是利用了了插件
var object3Dlayer = new AMap.Object3DLayer();
console.log("object3Dlayer", object3Dlayer);
// 以不规则棱柱体 Prism 为例,添加至 3DObjectLayer 图层中,定义3d图层的形状 就是四个点位 用来绘制3d柱体
//这个是路径点的所有的坐标
var paths = [
[
[121.679736, 31.300845],
[121.679313, 31.300075],
[121.679608, 31.29997],
[121.679999, 31.300749],
[121.679608, 31.29997],
[121.679999, 31.300749],
[121.679999, 31.300749],
[121.679736, 31.300845],
],
[
[121.679865, 31.299942],
[121.680267, 31.300634],
[121.680552, 31.300543],
[121.680166, 31.299832],
[121.68009, 31.299828],
[121.680133, 31.299929],
[121.679967, 31.299988],
[121.67993, 31.299896],
[121.679865, 31.299942],
],
[
[121.680852, 31.300401],
[121.680444, 31.299599],
[121.680659, 31.299534],
[121.681056, 31.300323],
[121.680852, 31.300401],
],
[
[121.678233, 31.300527],
[121.678083, 31.300298],
[121.678093, 31.300165],
[121.678211, 31.300161],
[121.67819, 31.300197],
[121.678249, 31.300284],
[121.678362, 31.300312],
[121.678619, 31.300243],
[121.678646, 31.30017],
[121.678737, 31.300275],
[121.678689, 31.300344],
[121.678233, 31.300527],
],
[
[121.678517, 31.300569],
[121.678571, 31.300523],
[121.678624, 31.300546],
[121.678914, 31.300449],
[121.678962, 31.300642],
[121.678898, 31.300683],
[121.678807, 31.300665],
[121.678673, 31.300688],
[121.678657, 31.300669],
[121.678555, 31.300665],
[121.678651, 31.30061],
[121.678555, 31.300665],
[121.678517, 31.300569],
],
];
// 控制显示不同的颜色
// let boundColors = ['rgb(50,182,255)','rgb(50,182,255)','rgb(255,192,0)','rgb(50,182,255)','rgb(255,255,1)'];
//双重循环
paths.forEach(function (path,index) {
var bounds = path.map(function (p) {
return new AMap.LngLat(p[0], p[1]);
});
//插件
var prism = new AMap.Object3D.Prism({
path: bounds,
height: 400, //定义柱子有多高
color: 'rgb(50,182,255)', // 支持 #RRGGBB、rgb()、rgba() 格式数据
});
// 开启透明度支持
prism.transparent = true;
// 添加至 3D 图层
object3Dlayer.add(prism);
});
that.map.setFitView();
//添加到地图上
that.map.add(object3Dlayer);
这个是绘制一个区域 和最上方是一致 的
//我要开始hi画图了
var path1 = [
// new AMap.LngLat(121.680184,31.301315),
[121.67702, 31.300161],
[121.677578, 31.300307],
[121.678581, 31.299941],
[121.680582, 31.299083],
[121.681328, 31.299313],
[121.681736, 31.299941],
[121.681822, 31.300468],
[121.681779, 31.30088],
[121.680497, 31.301334],
[121.679815, 31.301339],
[121.678839, 31.300954],
[121.676967, 31.300225],
[121.677235, 31.30033],
[121.676967, 31.300225],
[121.67702, 31.300161],
];
console.log("11212");
//这个是线的插件 下方是属性
var polyline = new AMap.Polyline({
path: path1,
isOutline: true,
outlineColor: "#0ddbe5",
borderWeight: 1,
strokeColor: "#0ddbe5",
strokeOpacity: 1,
strokeWeight: 2,
// 折线样式还支持 'dashed'
strokeStyle: "solid",
// strokeStyle是dashed时有效
strokeDasharray: [10, 5],
lineJoin: "round",
lineCap: "round",
zIndex: 50,
});
this.map.add(polyline);
这个是在地图上放置标记
// 我是三个坐标的位置
// 三个泵站点数据
let that=this
let addressMarkers = [
{
name: "金海泵站",
lng: 121.664746,
lat: 31.255257,
icon: that.imaglist1,
},
{
name: "南汇北泵站",
lng: 121.68,
lat: 31.3,
icon: that.imaglist2,
id: 1,
},
{
name: "临江泵站",
lng: 121.469751,
lat: 31.110018,
icon: that.imaglist3,
},
];
// 添加一些分布不均的点到地图上,地图上添加三个点标记,作为参照
var offset;
addressMarkers.forEach(function (marker) {
if (marker.id == "1") {
offset = new AMap.Pixel(-13, -30);
} else {
offset = new AMap.Pixel(-250, -30);
}
let markers = new AMap.Marker({
icon: marker.icon,
position: [marker.lng, marker.lat],
offset: offset,
imageSize: new AMap.Size(400, 500),
});
that.map.add(markers);
// that.map.on("zoomend", () => {
// // 获取地图的层级
// // let zoom = that.map.getZoom(); //获取当前地图级别
// // console.log(zoom);
// // if (zoom < 10) {
// // that.map.remove(markers);
// // } else {
// // that.map.add(markers);
// // }
// });
});
// 自适应
// 第一个参数为空,表明用图上所有覆盖物 setFitview
// 第二个参数为false, 非立即执行
// 第三个参数设置上左下右的空白
that.map.setFitView(null, true, [250, 200, 250, 120]);
这个是卫星的地图
let that=this
let weixing = new AMap.TileLayer.Satellite({
zIndex: 10,
});
this.map.add(weixing);
that.map.setFitView();