vue高德地圖繪制行政區(qū)邊界功能
更新時間：2024年03月12日 10:43:02 作者：zj_zjk_sjz
這篇文章主要介紹了vue高德地圖繪制行政區(qū)邊界功能,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧
vue高德地圖繪制行政區(qū)邊界
<template>
<div id="gaodeMap"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// 設置安全密鑰
window._AMapSecurityConfig = {
securityJsCode: '從高德申請的安全密鑰',
}
export default {
name: "index",
data() {
return {
districtCode:'310112',
district: null,
polygons : [],
//行政區(qū)劃查詢
opts: {
subdistrict: 0, //獲取邊界不需要返回下級行政區(qū)
extensions: 'all', //返回行政區(qū)邊界坐標組等具體信息
level: 'district' //查詢行政級別為 區(qū)
}
}
},
mounted() {
this.getMapCenter();
this.initMap();
},
methods: {
getMapCenter() {
this.districtCode = this.$route.params.districtCode
},
/**
* 初始化地圖
*/
initMap() {
AMapLoader.load({
key: "從高德申請的key",
version: "2.0",
plugins: ['AMap.Scale', 'AMap.DistrictSearch'],
}).then((AMap) => {
// 初始化地圖
this.map = new AMap.Map('gaodeMap', {
viewMode: "2D",
resizeEnable: true,
center: [116.30946, 39.937629],
zoom: 3
});
this.map.addControl(new AMap.Scale())
this.drawBounds();
}).catch(e => {
console.log(e);
});
},
/**
* 繪制區(qū)域
*/
drawBounds() {
let that = this
this.district = new AMap.DistrictSearch(this.opts)
this.district.search(this.districtCode, function (status, result) {
that.map.remove(that.polygons)//清除上次結(jié)果
that.polygons = [];
let bounds = result.districtList[0].boundaries;
if (bounds) {
for (let i = 0, l = bounds.length; i < l; i++) {
//生成行政區(qū)劃polygon
let polygon = new AMap.Polygon({
strokeWeight: 1,
path: bounds[i],
fillOpacity: 0.4,
fillColor: '#80d8ff',
strokeColor: '#0091ea'
});
that.polygons.push(polygon);
}
}
that.map.add(that.polygons)
that.map.setFitView(that.polygons);//視口自適應
});
}
}
}
</script>
<style scoped>
#gaodeMap {
width: 100%;
height: 100%;
}
</style>補充：
vue 實現(xiàn) 高德地圖繪制并編輯區(qū)域功能
業(yè)務需要參考很多文章最后實現(xiàn)的功能 仍有缺陷 先展示
1.根據(jù)所在區(qū)域自動繪制范圍
2.切換區(qū)域自動切換所畫范圍
3.回顯其他人繪制的范圍（業(yè)務需求繪制范圍不可以重復）
4.繪制的區(qū)域可編輯 可刪除
（刪除功能仍有瑕疵 實現(xiàn)了部分刪除功能 都是比較傻瓜試的操作 不喜勿噴）
編輯的時候白色點是可以取消掉的
高德地圖開放平臺https://lbs.amap.com/api/javascript-api-v2/summary/
要在控制臺見一個key才可以運行高德地圖插件 要選web服務的才行
下載插件
npm i @amap/amap-jsapi-loader --save
上代碼
我的是彈窗的形式 主頁面
<el-dialog
title="繪制區(qū)域"
width="80%"
top="8vh"
:visible.sync="dialogVisible"
:before-close="hideDialog"
:close-on-click-modal="false"
class="dialogPa"
>
<div class="dialog-body" >
//centerDrop: [123.455551,41.798729]地圖中心點 allCoordinates其他人繪制的區(qū)域數(shù)據(jù) address當前區(qū)域文字areaCode當前區(qū)域code isUpdateBtn是否顯示編輯按鈕 updateId可修改數(shù)據(jù)的id isaddBtn是否是新增 mapIdDiv地圖畫布id
<seeAddIndex v-if="dialogVisible" :center="centerDrop" :allCoordinates="alllist" :address="dataForm.address" :areaCode="dataForm.areaCode" :isUpdateBtn="true" @mapList="mapList" :updateId="updateId" :isaddBtn="isaddBtnMap" :mapIdDiv="'mapIdDiv'+updateId"></seeAddIndex>
</div>
</el-dialog>js部分
import seeAddIndex from "@/components/AMapLoader/seeAddIndex.vue"; //自定義高德地圖繪制區(qū)域
components: {seeAddIndex },
//組件點擊確定或取消 istype確定/取消 date點集合數(shù)據(jù) mapname切換后的區(qū)域數(shù)據(jù)
mapList(istype,date,mapname) {
var that = this;
if(istype){// 確定
that.newlatlng = date;
console.log("---", date);
//...調(diào)用保存接口
}else{//取消
that.newlatlng = [];
that.dialogVisible = false;
}
}組件代碼
<template>
<div class="container">
<div class="input-card mapNewCss">
<div class="input-item">
<div class="input-item-prepend">
<span class="input-item-text">省市區(qū):</span>
</div>
<el-select
style="width: 70%;"
v-model="province"
@change="searchNew('province')"
>
<el-option
v-for="item in provinceList"
:key="item.adcode"
:label="item.name"
:value="item.adcode"
@click.native="getName('province',item)"
>
</el-option>
</el-select>
</div>
<div class="input-item">
<div class="input-item-prepend">
<span class="input-item-text">地級市:</span>
</div>
<el-select
style="width: 70%;"
v-model="city"
@change="searchNew('city')"
>
<el-option
v-for="item in cityList"
:key="item.adcode"
:label="item.name"
:value="item.adcode"
@click.native="getName('city',item)"
>
</el-option>
</el-select>
</div>
<div class="input-item">
<div class="input-item-prepend">
<span class="input-item-text">區(qū)縣:</span>
</div>
<el-select
style="width: 70%;"
v-model="district2"
@change="searchNew('district')"
>
<el-option
v-for="item in districtList"
:key="item.adcode"
:label="item.name"
:value="item.adcode"
@click.native="getName('district2',item)"
>
</el-option>
</el-select>
</div>
</div>
<div :id="mapIdDiv" style="width: 100%;height: 65vh;"></div>
//兩個編輯方法 一個是新增的編輯 一個是修改的編輯 獲取到的繪制區(qū)域圖層不一樣 數(shù)據(jù)格式對不上就不會顯示 所以就很笨拙的實現(xiàn)基本功能 希望有大神可以優(yōu)化
<div class="input-card">
<el-button v-if="isaddBtnOne"
class="filter-item"
type="primary"
@click="upPolygon"
:disabled="isDisabled"
>編輯</el-button
>
<el-button
v-if="!isaddBtnOne"
class="filter-item"
type="primary"
@click="getPoly"
:disabled="isDisabled"
>編輯</el-button
>
//刪除功能部分數(shù)據(jù)實現(xiàn)了
<el-button
v-if="isClear"
class="filter-item"
type="primary"
@click="clearPolygon"
:disabled="isDisabled"
>刪除</el-button
>
<div style="float: right;" v-if="isUpdateBtn">
<el-button @click="hideDialog">取 消</el-button>
<el-button type="primary" @click="getOk" :disabled="isDisabled">確 定</el-button>
</div>
</div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
name: "AreaMapSee",
props: {
//地圖id
mapIdDiv: {
type: '',
default: 'container'
},
//中心點
center: {
type: '',
default: null
},
//所有數(shù)據(jù)
allCoordinates:{
type: '',
default: null
},
//回顯區(qū)域數(shù)據(jù)
// coordinates: {
// type: Object / Array,
// default: []
// },
address:{
type: "",
default: null
},
areaCode:{
type: "",
default: null
},
//編輯按鈕
isUpdateBtn: {
type: Boolean,
default: false
},
//待修改的id
updateId: {
type: '',
default: null
},
// 新增按鈕
isaddBtn: {
type: Boolean,
default: false
},
},
data() {
return {
map: null,
polyEditor: null,
polyEditorNew: null,
addNumber:0,
updatePolygon:null,
updateCoordinates:[],
isaddBtnOne: false,
isDisabled: false,
district: null,
polygonArea: [],
serviceList: [],
province: "",
provinceName:'',
provinceList: [],
city: "",
cityName: "",
cityList: [],
district2: "",
district2Name: "",
districtList: [],
street: "",
streetList: [],
addOne:false,
mapSeeA:0,//第一次進入頁面
mapAreaCode:'',
mapAreaName:'',
newMap:false,
isClear:true,
};
},
mounted() {
console.log("mounted",this.address,this.areaCode);
//對當時接口返回參數(shù)的處理
if (this.address) {
let address = this.address.split(",");
this.province=address[0]
this.provinceName=address[0]
this.city=address[1]
this.cityName=address[1]
this.district2=address[2]
this.district2Name=address[2]
this.mapAreaCode=this.areaCode
}
this.isaddBtnOne = this.isaddBtn;
this.echart();
},
methods: {
echart() {
let that=this
AMapLoader.reset()
AMapLoader.load({
key: "", // 申請好的Web端開發(fā)者Key，首次調(diào)用 load 時必填
version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時默認為 1.4.15
plugins: [
"AMap.ToolBar",
"AMap.Driving",
"AMap.PolygonEditor",
"AMap.PlaceSearch",
"AMap.ControlBar",
"AMap.Scale",
"AMap.Geocoder",
"AMap.DistrictSearch"http://區(qū)域查詢
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
that.map = new AMap.Map(that.mapIdDiv, {
resizeEnable: true,
// viewMode: '3D',
pitch: 45,
zoom: 13, // 初始化地圖級別
center:that.center, // 初始化地圖中心點位置
});
const ControlBar = new AMap.ControlBar({
position: { top: '0', right: '10px' }
})
that.map.addControl(ControlBar);
// //數(shù)據(jù)格式化;
let allList=that.allCoordinates//列表所有數(shù)據(jù)
let data=[]
for (var i = 0; i < allList.length; i++) {
if (allList[i].serviceRange) {
let data2 = JSON.parse(allList[i].serviceRange);
if(data2.coordinates[0]){
let list=data2.coordinates[0]
if(allList[i].id!=that.updateId){
console.log('allList[i].id',allList[i].id,that.updateId)
data.push({list:list,name:allList[i].name,id:allList[i].id})
// data.push(list)
}else{
//可編輯數(shù)據(jù)
console.log('that.updateId',that.updateId)
that.updateCoordinates={list:list,name:allList[i].name,id:allList[i].id}
}
}
}
}
console.log('data',data)
let lengthaaa=data.length
that.polygonList=[]
for (var j = 0; j < data.length; j++) {
var points
var name
//循環(huán)遍歷添加多邊形;
points = data[j].list;
name=data[j].name
let polygon1 = new AMap.Polygon({
path: points,
strokeColor: "#FF0000",
strokeWeight: 1,
strokeOpacity: 0.2,
fillOpacity: 0.24,
fillColor: "#FF0000",
zIndex: 20,
});
that.polygonList.push(polygon1);
that.map.add([polygon1]);
let marker = new AMap.Marker({
position: points[0],
offset: new AMap.Pixel(0, 0),
direction:'right',
})
marker.setLabel({
position: points[0],
icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
direction:'right',
offset: new AMap.Pixel(0, 0), //設置文本標注偏移量
content: "<div style='background-color: #D9EAFF;color:#333;padding:3px;'>"+name+"</div>", //設置文本標注內(nèi)容
});
that.map.add(marker)
}
//可編輯數(shù)據(jù)
that.updatePolygon = new AMap.Polygon({
path: that.updateCoordinates.list,
strokeColor: "#0075FF",
strokeWeight: 1,
strokeOpacity: 0.2,
fillOpacity: 0.24,
fillColor: "#0075FF",
zIndex: 20,
extData:{
id:that.updateCoordinates.id
}
});
that.polygonList.push(that.updatePolygon);
that.map.add([that.updatePolygon]);
that.map.setFitView();
that.polyEditor = new AMap.PolygonEditor(that.map,that.updatePolygon);//編輯數(shù)據(jù)
//行政區(qū)劃查詢
var opts = {
subdistrict: 1, //返回下一級行政區(qū)
showbiz: false //最后一級返回街道信息
};
that.district = new AMap.DistrictSearch(opts);
that.district.search("中國", function(status, result) {
if (status == "complete") {
that.getData(result.districtList[0], "province");
that.searchNew("province","no",1); //默認城市
}
});
})
.catch((e) => {
console.log("---",e);
});
},
//刪除當前編輯區(qū)域
clearPolygon(){
let that=this
that.polyEditor.close()
if(that.isaddBtnOne){//新增
let polygonDiv = that.map.getAllOverlays("polygon"); //獲取所有的polygon
let number=polygonDiv.length
console.log('polygonDiv',polygonDiv)
that.map.remove(polygonDiv[number-1]) // 移除覆蓋物
}else{//編輯
let overlaysList=that.polygonList
for(var i = 0; i < overlaysList.length; i++){
// 獲取存在每個 extData 中的 id
var id = overlaysList[i].getExtData().id;
console.log('that.updateId',that.updateId)
if(id === that.updateCoordinates.id){//可編輯的id區(qū)域
that.map.remove(overlaysList[i]) // 移除覆蓋物
console.log('id',id)
break;
}
}
}
that.isClear=false
that.isDisabled=true
},
getPoly() {
this.polyEditor.open();
},
showInfoClick(e) {
console.log("**", e.lnglat.getLng() + "," + e.lnglat.getLat());
this.isDisabled = false;
},
getOk(){
let overlaysList = this.map.getAllOverlays('polygon'); //獲取所有的polygon
let pathList=[]
for(let i=0;i<overlaysList.length;i++){
let path=overlaysList[i]._opts.path
if(path&&path.length>0){
pathList.push(path)
}
};
let number=pathList.length
console.log('==all',pathList)
var mapname={
provinceName:this.provinceName,
cityName:this.cityName,
district2Name:this.district2Name,
mapAreaCode:this.mapAreaCode
}
console.log("mapname",mapname)
if(this.newMap||this.isaddBtn){//新增
console.log('==2',[pathList[number-1]])
this.$emit("mapList",true,[pathList[number-1]],mapname);
}else{//編輯
console.log('==1',[pathList[number-2]])
this.$emit("mapList",true,[pathList[number-2]],mapname);
}
},
hideDialog() {
this.$emit("mapList", false);
},
getData(data, level,numbera) {
var that = this;
var bounds = data.boundaries;
console.log("bounds", bounds);
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
var polygon = new AMap.Polygon({
map: that.map,
strokeWeight: 1,
strokeColor: "#0091ea",
fillColor: "#80d8ff",
fillOpacity: 0.2,
path: bounds[i]
});
that.polygonArea.push(polygon);
}
that.map.setFitView(); //地圖自適應
}
console.log(numbera,'that.polygonArea',that.polygonArea)
let newList=that.polygonArea
let polygonAreaList=[]
var subList = data.districtList;
if (subList) {
if (level === "province") {
that.provinceList = subList;
} else if (level === "city") {
that.cityList = subList;
} else if (level === "district") {
that.districtList = subList;
console.log('that.districtList',that.districtList)
} else if (level === "street") {
for (var i = 0, l = subList.length; i < l; i++) {
subList[i].adcodeKey = i + "key" + subList[i].adcode;
}
that.streetList = subList;
console.log('that.streetList')
that.isDisabled=false
console.log('that.isDisabled',that.isDisabled)
}
console.log("curList", level, subList);
if(that.mapSeeA==0){
that.setCenter(that.center);
that.mapSeeA++
}
}
if(numbera==1){
that.searchNew("city","no",2); //默認城市
}else if(numbera==2){
that.district2=that.areaCode
that.searchNew("district","no",3); //默認城市
}
},
getName(type,data){
var that=this
if(type=='province'){
that.provinceName=data.name
}
if(type=='city'){
that.cityName=data.name
}
if(type=='district2'){
that.isaddBtnOne=true
that.newMap=true
that.district2Name=data.name
}
},
//選擇type no不清空加載默認數(shù)據(jù)
searchNew(type,clearType,numbera) {
var that = this;
that.polyEditor.close();
that.$forceUpdate();
//清除地圖上所有覆蓋物
for (var i = 0, l = that.polygonArea.length; i < l; i++) {
that.polygonArea[i].setMap(null);
}
var adcode = "";
var typeNext = "";
if (type == "province") {
adcode = that.province;
typeNext = "city";
//清空下一級別的下拉列表
if(clearType!='no'){
that.city = "";
that.cityList = [];
that.district2 = "";
that.districtList = [];
}
}
if (type == "city") {
adcode = that.city;
typeNext = "district";
//清空下一級別的下拉列表
if(clearType!='no'){
that.district2 = "";
that.districtList = [];
}
}
if (type == "district") {
adcode = that.district2;
typeNext = "street";
}
that.district.setLevel(type); //行政區(qū)級別
that.district.setExtensions("all");
//行政區(qū)查詢
//按照adcode進行查詢可以保證數(shù)據(jù)返回的唯一性
this.mapAreaCode=adcode
console.log('this.mapAreaCode',this.mapAreaCode)
that.district.search(adcode, function(status, result) {
if (status === "complete") {
that.getData(result.districtList[0], typeNext,numbera);
}
});
},
setCenter(obj) {
this.map.setCenter(obj);
console.log('obj',obj)
},
upPolygon(){
let that=this
let overlaysList = this.map.getAllOverlays('polygon'); //獲取所有的polygon
let pathList=[]
for(let i=0;i<overlaysList.length;i++){
let path=overlaysList[i]._opts.path
if(path&&path.length>0){
pathList.push(path)
}
};
let number=pathList.length
console.log('==all',pathList)
console.log('==ADD',[pathList[number-1]])
var pathLista=[pathList[number-1]]
//可編輯數(shù)據(jù)
that.updatePolygon = new AMap.Polygon({
path: pathLista,
strokeColor: "#0075FF",
strokeWeight: 1,
strokeOpacity: 0.2,
fillOpacity: 0.24,
fillColor: "#0075FF",
zIndex: 20,
extData:{
id:''
}
});
that.polygonList.push(that.updatePolygon);
that.map.add([that.updatePolygon]);
that.map.setFitView();
that.polyEditor = new AMap.PolygonEditor(that.map,that.updatePolygon);//編輯數(shù)據(jù)
that.polyEditor.open();
},
//編輯區(qū)域數(shù)據(jù)
upPolygon2(){
var that=this
let polygonAreaList=[]
let newList=that.polygonArea
console.log('this.polygonArea',that.polygonArea)
for (var j = 0; j < newList.length; j++){
//可編輯數(shù)據(jù)
let path=newList[j]._opts.path
let updatePolygon = new AMap.Polygon({
path:path,
strokeColor: "#0075FF",
strokeWeight: 1,
strokeOpacity: 0.2,
fillOpacity: 0.24,
fillColor: "#0075FF",
zIndex: 20,
});
polygonAreaList.push(updatePolygon)
that.map.add([updatePolygon]);
}
console.log('polygonAreaList',polygonAreaList)
//可編輯數(shù)據(jù)
// that.updatePolygon = new AMap.Polygon({
// path: that.updateCoordinates.list,
// strokeColor: "#0075FF",
// strokeWeight: 1,
// strokeOpacity: 0.2,
// fillOpacity: 0.24,
// fillColor: "#0075FF",
// zIndex: 20,
// extData:{
// id:that.updateCoordinates.id
// }
// });
// that.polygonList.push(that.updatePolygon);
// that.map.add([that.updatePolygon]);
that.polyEditorNew = new AMap.PolygonEditor(that.map,polygonAreaList);//編輯數(shù)據(jù)
that.polyEditorNew.open();
// that.polyEditorNew.close();
// this.polyEditorNew.setTarget();
// this.polyEditorNew.open();
}
},
};
</script>
<style lang="scss" scoped>
.input-card{
margin-top: 10px;
}
/deep/ .amap-marker-label{
border: 1px solid #D9EAFF;
padding: 0;
border-radius: 6px;
}
.cityListCss {
display: inline-block;
min-width: 50px;
color: #333;
cursor: pointer;
padding: 4px 10px;
}
.activeCss {
color: #1d6bff;
}
/* 行政查詢樣式 */
.mapNewCss{
margin-top: -40px !important;
margin-bottom: 10px;
}
.mapNewCss .input-item {
display: inline-block;
width: 30%;
text-align: right;
}
.mapNewCss .input-item .input-item-text{
display: inline-block;
text-align: right;
}
.mapNewCss .input-item .input-item-prepend {
display: inline-block;
width: 20%;
}
</style>到此這篇關(guān)于vue高德地圖繪制行政區(qū)邊界的文章就介紹到這了,更多相關(guān)vue高德地圖繪制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue路由傳參之使用query傳參頁面刷新數(shù)據(jù)丟失問題解析
這篇文章主要介紹了vue路由傳參使用query傳參頁面刷新數(shù)據(jù)丟失問題,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
本篇文章主要介紹了vue中的provide/inject的學習使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
如何封裝了一個vue移動端下拉加載下一頁數(shù)據(jù)的組件
這篇文章主要介紹了如何封裝了一個vue移動端下拉加載下一頁數(shù)據(jù)的組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要給大家介紹了關(guān)于Vue.js列表渲染的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-05-05
Vue3異步數(shù)據(jù)加載組件suspense的使用方法
前端開發(fā)中異步請求是非常常見的事情,比如遠程讀取圖片,調(diào)用后端接口等等,這篇文章主要給大家介紹了關(guān)于Vue3異步數(shù)據(jù)加載組件suspense的使用方法,suspense中文含義是懸念的意思,需要的朋友可以參考下2021-08-08
解決vue axios跨域 Request Method: OPTIONS問題(預檢請求)
這篇文章主要介紹了解決vue axios跨域 Request Method: OPTIONS問題(預檢請求)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
下面小編就為大家分享一篇解決Vue 通過下表修改數(shù)組,頁面不渲染的問題。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了深入了解Vue動態(tài)組件和異步組件的相關(guān)資料，幫助大家更好的理解和學習vue組件的相關(guān)知識，感興趣的朋友可以了解下2021-01-01
vue實現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)
今天小編就為大家分享一篇vue實現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在本文中我們給大家整理了一篇關(guān)于Vue表單控件綁定的相關(guān)知識點內(nèi)容，有需要的朋友們參考下。2019-02-02