高德地图上画图!和3D绘制区域

封装了一些方法前提是引入高德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, // 线条宽度，默认为 1strokeWeight: 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;// debuggerwindow._AMapSecurityConfig = {
//秘钥securityJsCode: "d427d954bfafa3fb694741659dab2dae",};AMapLoader.load({
//申请的KEY的值key: "8e990b742a2f4e168eee432972a9972c", //此处填入我们注册账号后获取的Key// version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["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", {//设置地图容器idviewMode: "3D", //是否为3D地图模式zoom: 16, //初始化地图级别121.680479,31.300322  121.680429,31.30037center: [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=thislet 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=thislet weixing = new AMap.TileLayer.Satellite({zIndex: 10,});this.map.add(weixing);that.map.setFitView();

高德地图上画图!和3D绘制区域相关推荐

高德地图上展示终端信息
本人参与的一个智慧园区的项目,网络地图开发出来的后期效果如下图所示: 初次拿到设计图时还没有左上角的全局搜索框,第一步首先是绘制出浮在上层的四张卡片,我是用遍历的方式依次渲染的: {showCards ...
Android Studio之高德地图实现定位和3D地图显示
在应用开发中,地图开发是经常需要使用的"组件",国内比较出名的是就是百度地图和高德地图. 此博客讲的是高德地图实现定位和3D地图显示,并标注相应位置,话不多说,先看看效果,在上代码 ...
android------之高德地图实现定位和3D地图显示
2019独角兽企业重金招聘Python工程师标准>>> 在应用开发中,地图开发是经常需要使用的"组件",国内比较出名的是就是百度地图和高德地图. 此博客讲的是高德 ...
【高德地图进阶】--- 使用DistrictSearch 绘制城市版块
在[高德地图入门]-通过geoJson绘制点,线,面一章中,我们学会了如何使用GeoJson绘制城市版块.今天我们使用高德自己的api来绘制城市版块 DistrictSearch DistrictS ...
vue人员轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
LeetCode高频题：《逆水寒》在地图的制作中，美术在地图上刷一片连通区域，连通区域自动填充，请你判断给定几个点位置，他们是否属于被刷区域
LeetCode高频题:<逆水寒>在地图的制作中,美术在地图上刷一片连通区域,连通区域自动填充,请你判断给定几个点位置,他们是否属于被刷区域? 提示:本题是系列LeetCode的150道高 ...
Echarts+高德地图，获取全国省市区，区域板块地图获取并高亮显示
当用户选择省市区之后,可以看到对应区域的高亮显示. 如图: 之前用户选择的是江苏省,因此当前高亮显示的是江苏省地图板块,如果之前用户选择的是成都市,那么地图则会变成四川省的版图,高亮显示成都市,如下图 ...
高德地图 js API Loca 3D动画的使用说明
高德地图 js API Loca 3D动画的使用说明我们在使用 Loca 制作地图动画时,里面有几个对应的动画效果,有 center: 平移 pitch: 视角 zoom: 缩放 rotation: ...

高德地图上画图!和3D绘制区域

高德地图上画图!和3D绘制区域相关推荐

最新文章

热门文章