文章介绍了如何在网页中集成高德地图API，通过JavaScript进行地图的初始化、中心点的编辑（包括地点搜索和拖动标记点）以及网格边界的绘制和编辑。用户可以输入地址，双击鼠标设定中心点，同时支持地图上点击设置新中心点。此外，还展示了如何实现网格区域的绘制和修改功能。
需要引入高德地图绘制相关的css与js文件哦
<script src="https://webapi.amap.com/maps?v='版本号'&key='高德地图key'&plugin=AMap.PolygonEditor"></script>
<script src="https://webapi.amap.com/loader.js"></script>
一、编辑网格中心点坐标
进行地点搜索，双击鼠标标点，拖动标记点进行中心点切换
采用高德地图添加点覆盖物实现
<vxe-modal destroy-on-close resize title="编辑网格中心坐标"v-model="gridmapModal" width="60%">
<el-form label-width="100">
<el-form-item label="请输入地址">
<input id="inputAddress" type="text" v-model="mapAddress"></input>
</el-form-item>
</el-form>
<div id="mapContent"></div>
<div style="text-align: end;padding: 10px">
<el-button @click="gridConfirm" icon="el-icon-folder" type="primary" size="mini" v-cloak>确认</el-button>
<el-button @click="closeModel" icon="el-icon-switch-button" type="warning" size="mini" v-cloak>退出</el-button>
</div>
</vxe-modal>
initMap(){
let obj = this
let marker=[]
let centerMarke=[]
let temp=''
let tem1=''
let markers,map
//已有网格中心点标记
if(obj.formData.gridCenterNode != '' && obj.formData.gridCenterNode != null){
temp = obj.formData.gridCenterNode.replace("\"","").replace("\"","")
tem1=temp.substring(1,temp.length-1)
centerMarke= [tem1.split(',')[0],tem1.split(',')[1]]
markers,map = new AMap.Map("mapContent",{ //设置地图容器id
// viewMode:"2D", //是否为3D地图模式
zoom:15, //初始化地图级别
center:centerMarke, //初始化地图中心点位置
resizeEnable: true
});
marker = new AMap.Marker({
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
osition: [tem1.split(',')[0],tem1.split(',')[1]],
offset: new AMap.Pixel(-13, -30),
// 设置是否可以拖拽
draggable: true,
cursor: 'move',
});
//获取标记点移动后的坐标
marker.on('dragend', function(e) {
obj.centerMarker = e.target._position
});
marker.setMap(map);
}else{
centerMarke=[102.615158,24.790374]
markers,map = new AMap.Map("mapContent",{ //设置地图容器id
// viewMode:"2D", //是否为3D地图模式
zoom:13, //初始化地图级别
center:centerMarke, //初始化地图中心点位置
resizeEnable: true
});
//输入提示
var autoOptions = {
input: "inputAddress"//提示框样式根据个人喜好编写
};
AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
var auto = new AMap.AutoComplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
map: map
}); //构造地点查询类
auto.on("select", select);//注册监听，当选中某条记录时会触发
function select(e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name,function (stats,res){
markers = new AMap.Marker({
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
position: marker,
offset: new AMap.Pixel(-13, -30)
});
}); //关键字查询查询
//地图点击事件
map.on('click', function(e) {
var marker = new AMap.Marker({
map: map,
position: e.lnglat, //基点位置
// 设置是否可以拖拽
draggable: true,
cursor: 'move',
});
let arr = [e.lnglat.lng + ',' + e.lnglat.lat]
obj.centerMarker = arr
});
}
});
}
},
效果图如下：
一、编辑网格边界
使用方法：单击鼠标描点，每单击一次描一个点；拖动鼠标绘制折线；双击结束网格绘制
ps：拖动网格边界节点，可进行网格区域修改
采用高德地图添加折线覆盖物实现
<vxe-modal destroy-on-close resize title="网格GIS地图边界"v-model="gridmapGisModal" width="60%" height="100%">
<el-button @click="changMap" type="primary" size="mini" style="margin-bottom: 10px">卫星地图模式</el-button>
<el-button @click="changPtMap" type="primary" size="mini">普通地图模式</el-button>
<div id="container"></div>
<div style="text-align: end;padding: 10px">
<el-button @click="gisConfirm" icon="el-icon-folder"type="primary" v-cloak size="mini">确认</el-button>
<el-button @click="gridmapGisModal=!gridmapGisModal" icon="el-icon-switch-button" type="warning"v-cloak size="mini"> 退出</el-button>
</div>
</vxe-modal>
//将地图切换到卫星地图模式
changMap(){
this.mapType=[new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()]
this.editFlag = false
this.initGisMap()
},
changPtMap(){
this.mapType=[]
this.editFlag = false
this.initGisMap()
},
//编辑网格gis
initGisMap(){
let obj = this
let temp=''
let tem1=''
let centrMarkers=''
let arr = []
//已有网格边界绘制
if(obj.formData.gridCenterNode != '' && obj.formData.gridCenterNode != null) {
temp = obj.formData.gridCenterNode.replace("\"", "").replace("\"", "")
tem1 = temp.substring(1, temp.length - 1)
centrMarkers = [tem1.split(',')[0], tem1.split(',')[1]]
map = new AMap.Map("container",{ //设置地图容器id
// viewMode:"2D", //是否为3D地图模式
zoom:12, //初始化地图级别
center:[tem1.split(',')[0],tem1.split(',')[1]], //初始化地图中心点位置
resizeEnable: true,
layers: obj.mapType
});
marker = new AMap.Marker({
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
position: [tem1.split(',')[0],tem1.split(',')[1]],
offset: new AMap.Pixel(-13, -30),
// 设置是否可以拖拽
draggable: true,
cursor: 'move',
});
marker.setMap(map);
}else{
centrMarkers = [102.615158,24.790374]
arr= [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()]
map = new AMap.Map("container",{ //设置地图容器id
// viewMode:"2D", //是否为3D地图模式
zoom:12, //初始化地图级别
center:centrMarkers, //初始化地图中心点位置
resizeEnable: true,
layers: obj.mapType,
});
}
let JsonMap = []
let polName=[]
let mapPathArr = []
obj.gridMapList.forEach((item,index)=>{
JsonMap.push({
name:'poly'+index,
pathArr:obj.getGridMap(item.gridNode)
})
})
let arrName = []
let poly
JsonMap.forEach((item,index)=>{
item.name = new AMap.Polygon({
path:item.pathArr
})
arrName.push(item.name)
})
map.add(arrName)
map.setFitView();
polyEditor = new AMap.PolygonEditor(map);
polyEditor.addAdsorbPolygons(arrName);
if(this.editFlag == true){
return
}
if(obj.formData.gridNode != '' && obj.formData.gridNode != null){
obj.gridMapType = 'update'
let path =obj.getGridMap(obj.formData.gridNode)
polygonA = new AMap.Polygon({
path: path
})
map.add([polygonA])
map.setFitView();
polyEditor.setTarget(polygonA);
polyEditor.open();
this.lookOtherMap()
}else{
obj.gridMapType = 'add'
polyEditor.on('add', function (data) {
var polygon = data.target;
obj.gisMarker=polygon._opts.path
polyEditor.addAdsorbPolygons(polygon);
})
polyEditor.open();
}
},
效果图如下：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
