fase()新建地图
王熙朝
parent
97acceb830
commit
1e6509846d
|
|
@ -36,6 +36,7 @@
|
||||||
"url": "https://gitee.com/y_project/MuYu-Cloud.git"
|
"url": "https://gitee.com/y_project/MuYu-Cloud.git"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||||
"@riophae/vue-treeselect": "0.4.0",
|
"@riophae/vue-treeselect": "0.4.0",
|
||||||
"axios": "0.24.0",
|
"axios": "0.24.0",
|
||||||
"clipboard": "2.0.8",
|
"clipboard": "2.0.8",
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,9 @@
|
||||||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
|
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
|
||||||
<link href="<%= BASE_URL %>favicon.ico" rel="icon">
|
<link href="<%= BASE_URL %>favicon.ico" rel="icon">
|
||||||
<title><%= webpackConfig.name %></title>
|
<title><%= webpackConfig.name %></title>
|
||||||
|
<!-- <script src="https://webapi.amap.com/maps?v=2.0&key=0e95def81c998806b1a63910f7f51f3c&plugin=AMap.MouseTool"></script>-->
|
||||||
|
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=0e95def81c998806b1a63910f7f51f3c"></script>
|
||||||
|
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
|
||||||
<!--[if lt IE 11]>
|
<!--[if lt IE 11]>
|
||||||
<script>window.location.href = '/html/ie.html';</script><![endif]-->
|
<script>window.location.href = '/html/ie.html';</script><![endif]-->
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
'use strict';(function(m,p){"object"===typeof exports&&"undefined"!==typeof module?module.exports=p():"function"===typeof define&&define.amd?define(p):(m=m||self,m.AMapLoader=p())})(this,function(){function m(a){var b=[];a.AMapUI&&b.push(p(a.AMapUI));a.Loca&&b.push(r(a.Loca));return Promise.all(b)}function p(a){return new Promise(function(h,c){var f=[];if(a.plugins)for(var e=0;e<a.plugins.length;e+=1)-1==d.AMapUI.plugins.indexOf(a.plugins[e])&&f.push(a.plugins[e]);if(g.AMapUI===b.failed)c("\u524d\u6b21\u8bf7\u6c42 AMapUI \u5931\u8d25");
|
||||||
|
else if(g.AMapUI===b.notload){g.AMapUI=b.loading;d.AMapUI.version=a.version||d.AMapUI.version;e=d.AMapUI.version;var l=document.body||document.head,k=document.createElement("script");k.type="text/javascript";k.src="https://webapi.amap.com/ui/"+e+"/main.js";k.onerror=function(a){g.AMapUI=b.failed;c("\u8bf7\u6c42 AMapUI \u5931\u8d25")};k.onload=function(){g.AMapUI=b.loaded;if(f.length)window.AMapUI.loadUI(f,function(){for(var a=0,b=f.length;a<b;a++){var c=f[a].split("/").slice(-1)[0];window.AMapUI[c]=
|
||||||
|
arguments[a]}for(h();n.AMapUI.length;)n.AMapUI.splice(0,1)[0]()});else for(h();n.AMapUI.length;)n.AMapUI.splice(0,1)[0]()};l.appendChild(k)}else g.AMapUI===b.loaded?a.version&&a.version!==d.AMapUI.version?c("\u4e0d\u5141\u8bb8\u591a\u4e2a\u7248\u672c AMapUI \u6df7\u7528"):f.length?window.AMapUI.loadUI(f,function(){for(var a=0,b=f.length;a<b;a++){var c=f[a].split("/").slice(-1)[0];window.AMapUI[c]=arguments[a]}h()}):h():a.version&&a.version!==d.AMapUI.version?c("\u4e0d\u5141\u8bb8\u591a\u4e2a\u7248\u672c AMapUI \u6df7\u7528"):
|
||||||
|
n.AMapUI.push(function(a){a?c(a):f.length?window.AMapUI.loadUI(f,function(){for(var a=0,b=f.length;a<b;a++){var c=f[a].split("/").slice(-1)[0];window.AMapUI[c]=arguments[a]}h()}):h()})})}function r(a){return new Promise(function(h,c){if(g.Loca===b.failed)c("\u524d\u6b21\u8bf7\u6c42 Loca \u5931\u8d25");else if(g.Loca===b.notload){g.Loca=b.loading;d.Loca.version=a.version||d.Loca.version;var f=d.Loca.version,e=d.AMap.version.startsWith("2"),l=f.startsWith("2");if(e&&!l||!e&&l)c("JSAPI \u4e0e Loca \u7248\u672c\u4e0d\u5bf9\u5e94\uff01\uff01");
|
||||||
|
else{e=d.key;l=document.body||document.head;var k=document.createElement("script");k.type="text/javascript";k.src="https://webapi.amap.com/loca?v="+f+"&key="+e;k.onerror=function(a){g.Loca=b.failed;c("\u8bf7\u6c42 AMapUI \u5931\u8d25")};k.onload=function(){g.Loca=b.loaded;for(h();n.Loca.length;)n.Loca.splice(0,1)[0]()};l.appendChild(k)}}else g.Loca===b.loaded?a.version&&a.version!==d.Loca.version?c("\u4e0d\u5141\u8bb8\u591a\u4e2a\u7248\u672c Loca \u6df7\u7528"):h():a.version&&a.version!==d.Loca.version?
|
||||||
|
c("\u4e0d\u5141\u8bb8\u591a\u4e2a\u7248\u672c Loca \u6df7\u7528"):n.Loca.push(function(a){a?c(a):c()})})}if(!window)throw Error("AMap JSAPI can only be used in Browser.");var b;(function(a){a.notload="notload";a.loading="loading";a.loaded="loaded";a.failed="failed"})(b||(b={}));var d={key:"",AMap:{version:"1.4.15",plugins:[]},AMapUI:{version:"1.1",plugins:[]},Loca:{version:"1.3.2"}},g={AMap:b.notload,AMapUI:b.notload,Loca:b.notload},n={AMap:[],AMapUI:[],Loca:[]},q=[],t=function(a){"function"==typeof a&&
|
||||||
|
(g.AMap===b.loaded?a(window.AMap):q.push(a))};return{load:function(a){return new Promise(function(h,c){if(g.AMap==b.failed)c("");else if(g.AMap==b.notload){var f=a.key,e=a.version,l=a.plugins;f?(window.AMap&&"lbs.amap.com"!==location.host&&c("\u7981\u6b62\u591a\u79cdAPI\u52a0\u8f7d\u65b9\u5f0f\u6df7\u7528"),d.key=f,d.AMap.version=e||d.AMap.version,d.AMap.plugins=l||d.AMap.plugins,g.AMap=b.loading,e=document.body||document.head,window.___onAPILoaded=function(d){delete window.___onAPILoaded;if(d)g.AMap=
|
||||||
|
b.failed,c(d);else for(g.AMap=b.loaded,m(a).then(function(){h(window.AMap)})["catch"](c);q.length;)q.splice(0,1)[0]()},l=document.createElement("script"),l.type="text/javascript",l.src="https://webapi.amap.com/maps?callback=___onAPILoaded&v="+d.AMap.version+"&key="+f+"&plugin="+d.AMap.plugins.join(","),l.onerror=function(a){g.AMap=b.failed;c(a)},e.appendChild(l)):c("\u8bf7\u586b\u5199key")}else if(g.AMap==b.loaded)if(a.key&&a.key!==d.key)c("\u591a\u4e2a\u4e0d\u4e00\u81f4\u7684 key");else if(a.version&&
|
||||||
|
a.version!==d.AMap.version)c("\u4e0d\u5141\u8bb8\u591a\u4e2a\u7248\u672c JSAPI \u6df7\u7528");else{f=[];if(a.plugins)for(e=0;e<a.plugins.length;e+=1)-1==d.AMap.plugins.indexOf(a.plugins[e])&&f.push(a.plugins[e]);if(f.length)window.AMap.plugin(f,function(){m(a).then(function(){h(window.AMap)})["catch"](c)});else m(a).then(function(){h(window.AMap)})["catch"](c)}else if(a.key&&a.key!==d.key)c("\u591a\u4e2a\u4e0d\u4e00\u81f4\u7684 key");else if(a.version&&a.version!==d.AMap.version)c("\u4e0d\u5141\u8bb8\u591a\u4e2a\u7248\u672c JSAPI \u6df7\u7528");
|
||||||
|
else{var k=[];if(a.plugins)for(e=0;e<a.plugins.length;e+=1)-1==d.AMap.plugins.indexOf(a.plugins[e])&&k.push(a.plugins[e]);t(function(){if(k.length)window.AMap.plugin(k,function(){m(a).then(function(){h(window.AMap)})["catch"](c)});else m(a).then(function(){h(window.AMap)})["catch"](c)})}})},reset:function(){delete window.AMap;delete window.AMapUI;delete window.Loca;d={key:"",AMap:{version:"1.4.15",plugins:[]},AMapUI:{version:"1.1",plugins:[]},Loca:{version:"1.3.2"}};g={AMap:b.notload,AMapUI:b.notload,
|
||||||
|
Loca:b.notload};n={AMap:[],AMapUI:[],Loca:[]}}}})
|
||||||
|
|
@ -0,0 +1,170 @@
|
||||||
|
<template>
|
||||||
|
<div class="index">
|
||||||
|
<el-button type="primary" @click="drawRectangle">绘制多边形</el-button>
|
||||||
|
<el-button type="primary" @click="editRectangle">编辑多边形</el-button>
|
||||||
|
<el-button type="primary" @click="deleRectangle">删除多边形</el-button>
|
||||||
|
<div id="amapContainer"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||||||
|
// 例如：import 《组件名称》 from '《组件路径》,
|
||||||
|
export default {
|
||||||
|
// import引入的组件需要注入到对象中才能使用"
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
paths: {} //编辑
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
// 这里存放数据"
|
||||||
|
return {
|
||||||
|
path: [], //当前绘制多边形经纬度数组
|
||||||
|
polygonItem: [], // 地图上绘制所有的多边形对象
|
||||||
|
polyEditors: [] //所有编辑对象的数组
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 计算属性 类似于data概念",
|
||||||
|
computed: {},
|
||||||
|
// 监控data中的数据变化",
|
||||||
|
watch: {},
|
||||||
|
// 方法集合",
|
||||||
|
methods: {
|
||||||
|
// 地图初始化
|
||||||
|
intAmap (callBack) {
|
||||||
|
this.AMap = window.AMap;
|
||||||
|
this.AMap.plugin(['AMap.MouseTool', 'AMap.PolyEditor', 'AMap.ControlBar'], function () {
|
||||||
|
//TODO 创建控件并添加
|
||||||
|
});
|
||||||
|
this.map = new this.AMap.Map("amapContainer", {
|
||||||
|
center: [116.434381, 39.898515],
|
||||||
|
zoom: 14,
|
||||||
|
mapStyle: "amap://styles/darkblue",
|
||||||
|
pitch: 80,
|
||||||
|
rotation: -15,
|
||||||
|
viewMode: '3D',//开启3D视图,默认为关闭
|
||||||
|
buildingAnimation: true,//楼块出现是否带动画
|
||||||
|
});
|
||||||
|
this.map.addControl(new this.AMap.ControlBar());
|
||||||
|
if (callBack && typeof callBack == 'function') {
|
||||||
|
callBack();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 编辑围栏
|
||||||
|
editRectangle (paths) {
|
||||||
|
const path = paths;
|
||||||
|
const AMap = window.AMap;
|
||||||
|
var polygon = new this.AMap.Polygon({
|
||||||
|
path: path,
|
||||||
|
strokeColor: "#FF33FF",
|
||||||
|
strokeWeight: 6,
|
||||||
|
strokeOpacity: 0.2,
|
||||||
|
fillOpacity: 0.4,
|
||||||
|
fillColor: '#1791fc',
|
||||||
|
zIndex: 50,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.map.add(polygon);
|
||||||
|
this.polygonItem.push(polygon);
|
||||||
|
// 缩放地图到合适的视野级别
|
||||||
|
this.map.setFitView([polygon]);
|
||||||
|
|
||||||
|
this.polyEditor = new AMap.PolyEditor(this.map, polygon);
|
||||||
|
this.polyEditor.open();
|
||||||
|
this.polyEditors.push(this.polyEditor);
|
||||||
|
|
||||||
|
this.polyEditor.on('addnode', function (event) {
|
||||||
|
console.info('触发事件：addnode', event)
|
||||||
|
console.info('修改后的经纬度：', polygon.getPath())
|
||||||
|
});
|
||||||
|
|
||||||
|
this.polyEditor.on('adjust', function (event) {
|
||||||
|
console.info('触发事件：adjust', event)
|
||||||
|
console.info('修改后的经纬度：', polygon.getPath())
|
||||||
|
});
|
||||||
|
|
||||||
|
this.polyEditor.on('removenode', function (event) {
|
||||||
|
console.info('触发事件：removenode', event)
|
||||||
|
console.info('修改后的经纬度：', polygon.getPath())
|
||||||
|
});
|
||||||
|
|
||||||
|
this.polyEditor.on('end', function (event) {
|
||||||
|
console.info('触发事件： end', event)
|
||||||
|
console.info('修改后的经纬度：', polygon.getPath())
|
||||||
|
// event.target 即为编辑后的多边形对象
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 绘制多边形
|
||||||
|
drawRectangle () {
|
||||||
|
const vm = this;
|
||||||
|
this.mouseTool = new this.AMap.MouseTool(this.map);
|
||||||
|
const polygon = this.mouseTool.polygon({
|
||||||
|
strokeColor: 'red',
|
||||||
|
strokeOpacity: 0.5,
|
||||||
|
strokeWeight: 6,
|
||||||
|
fillColor: 'blue',
|
||||||
|
fillOpacity: 0.5,
|
||||||
|
// strokeStyle还支持 solid
|
||||||
|
strokeStyle: 'solid',
|
||||||
|
// strokeDasharray: [30,10],
|
||||||
|
});
|
||||||
|
|
||||||
|
this.mouseTool.on('draw', function (event) {
|
||||||
|
// event.obj 为绘制出来的覆盖物对象
|
||||||
|
var polygonItem = event.obj;
|
||||||
|
var paths = polygonItem.getPath();//取得绘制的多边形的每一个点坐标
|
||||||
|
console.log('覆盖物对象绘制完成各个点的坐标', paths);
|
||||||
|
var path = []; // 编辑的路径
|
||||||
|
paths.forEach(v => {
|
||||||
|
path.push([v.lng, v.lat])
|
||||||
|
});
|
||||||
|
vm.path = path;
|
||||||
|
vm.editRectangle(vm.path);
|
||||||
|
vm.polygonItem.push(event.obj);
|
||||||
|
vm.map.remove(event.obj); // 删除多边形
|
||||||
|
console.log(polygon, '------polygon-----');
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 批量删除多边形
|
||||||
|
deleRectangle () {
|
||||||
|
// 取消编辑状态
|
||||||
|
this.polyEditors.forEach(v => {
|
||||||
|
v.close();
|
||||||
|
});
|
||||||
|
this.map.clearMap(); // 删除地图所有覆盖物
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 生命周期 - 创建完成（可以访问当前this实例）",
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
// 生命周期 - 挂载完成（可以访问DOM元素）",
|
||||||
|
mounted() {
|
||||||
|
this.intAmap(() => {
|
||||||
|
if (this.paths) {
|
||||||
|
this.editRectangle(this.paths);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
beforeCreate() {
|
||||||
|
}, // 生命周期 - 创建之前",
|
||||||
|
beforeMount() {
|
||||||
|
}, // 生命周期 - 挂载之前",
|
||||||
|
beforeUpdate() {
|
||||||
|
}, // 生命周期 - 更新之前",
|
||||||
|
updated() {
|
||||||
|
}, // 生命周期 - 更新之后",
|
||||||
|
beforeDestroy() {
|
||||||
|
}, // 生命周期 - 销毁之前",
|
||||||
|
destroyed() {
|
||||||
|
}, // 生命周期 - 销毁完成",
|
||||||
|
activated() {
|
||||||
|
} // 如果页面有keep-alive缓存功能，这个函数会触发",
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#amapContainer {
|
||||||
|
height: 800px;
|
||||||
|
width: 1000px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -1,73 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<span v-if="enterprise == null">
|
|
||||||
|
|
||||||
</span>
|
|
||||||
<span v-else>
|
|
||||||
<span v-if="enterprise.authentication != 1 ">
|
|
||||||
<h2>企业信息尚未完善，请先补充完善后通知管理员审核</h2>
|
|
||||||
</span>
|
|
||||||
<span v-else>
|
|
||||||
电子围栏
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
|
||||||
// 例如：import 《组件名称》 from '《组件路径》,
|
|
||||||
import {listEnterprise} from "@/api/goods/business";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
// import引入的组件需要注入到对象中才能使用"
|
|
||||||
components: {},
|
|
||||||
props: {},
|
|
||||||
data() {
|
|
||||||
// 这里存放数据"
|
|
||||||
return {
|
|
||||||
enterprise:{}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 计算属性 类似于data概念",
|
|
||||||
computed: {},
|
|
||||||
// 监控data中的数据变化",
|
|
||||||
watch: {},
|
|
||||||
// 方法集合",
|
|
||||||
methods: {
|
|
||||||
bulk() {
|
|
||||||
alert("信息已发送，等待处理")
|
|
||||||
},
|
|
||||||
getInfo() {
|
|
||||||
listEnterprise().then(res => {
|
|
||||||
this.enterprise = res.data
|
|
||||||
console.log(res.data)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 生命周期 - 创建完成（可以访问当前this实例）",
|
|
||||||
created() {
|
|
||||||
this.getInfo()
|
|
||||||
},
|
|
||||||
// 生命周期 - 挂载完成（可以访问DOM元素）",
|
|
||||||
mounted() {
|
|
||||||
},
|
|
||||||
beforeCreate() {
|
|
||||||
}, // 生命周期 - 创建之前",
|
|
||||||
beforeMount() {
|
|
||||||
}, // 生命周期 - 挂载之前",
|
|
||||||
beforeUpdate() {
|
|
||||||
}, // 生命周期 - 更新之前",
|
|
||||||
updated() {
|
|
||||||
}, // 生命周期 - 更新之后",
|
|
||||||
beforeDestroy() {
|
|
||||||
}, // 生命周期 - 销毁之前",
|
|
||||||
destroyed() {
|
|
||||||
}, // 生命周期 - 销毁完成",
|
|
||||||
activated() {
|
|
||||||
} // 如果页面有keep-alive缓存功能，这个函数会触发",
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue