地图交互展示
在此我分享一下重点代码以及交互，有不足支出请多多指教
在此我仅仅展示色块地图下段，全路线地图下段暂不做展示了
前面的代码就是各种附着物的绘制，将他们互相之间的业务串联起来的点击事件放在最后
第一步在main.js里放入
window._AMapSecurityConfig = {
securityJsCode: "自己申请的Code",
};创建业务页面
<div class="map-container" id="container"></div>
<!-- 创建容器 -->定好要添加哪些内容用后期控制显隐清理旧的附着物绘制想要的
let layer, ScutcheonNumberLocal, ScutcheonNumber, zMarker, infoWindow
// layer: 地图层 绘制的路线
// ScutcheonNumberLocal: 数字牌基础层
// ScutcheonNumber: 数字牌层
// zMarker: 文字主体层
// infoWindow :路线详情弹窗实例 //此方法统一写不同情况下的地图附着物清理
mapRemove() {
//清除数字路牌
ScutcheonNumberLocal.remove(zMarker)
//清除兴趣点
if (this.markerList.length > 0) {
this.markerList.forEach(e => {
this.map.remove(e);
})
//清理结束，路线实例储存置空
this.markerList = []
}
//清除路线
if (this.layerList.length > 0) {
this.layerList.forEach(e => {
this.map.removeOverlay(e)
})
//清理结束，路线实例储存置空
this.layerList = []
}
},初始化地图
//初始化地图只执行一次
initMap() {
let that = this;
AMapLoader.load({
key: '自己的key',
version: '2.0',
plugins: ['AMap.Scale', 'AMap.ToolBar'],
AMapUI: {
version: '1.1',
plugins: [
'geo/DistrictExplorer',//行政区域搜索
'overlay/SimpleMarker', //SimpleMarker
'overlay/SimpleInfoWindow',//SimpleInfoWindow
'control/BasicControl'
]
},
Loca: {
version: '2.0.0',
},
})
.then((AMap) => {
that.getDis(AMap);
})
.catch((e) => { });
},初始化地图中心点，图层，风格样式等配置项
//初始化地图部分 只执行一次
getDis(AMap) {
var that = this
that.map = new AMap.Map('container', {
zoom: 8.7,
center: [112.33479, 32.98615],
// resizeEnable: true,
showLabel: true,
viewMode: '3D',
pitch: 40,
rotation: 3,
// skyColor: 'rgba(0, 0, 0,0.58)',
// mapStyle: 'amap://styles/grey',
mapStyle: "用自己的具体参考官网注释掉用原始风格也没影响",
layers: [
//只显示默认图层的时候，layers可以缺省
AMap.createDefaultLayer() //高德默认标准图层
]
});
AMapUI.loadUI(['control/BasicControl'], function (BasicControl) {
//缩放控件
that.map.addControl(new BasicControl.Zoom({
position: {
top: '100px',
right: '500px',
}, //left top，左上角
showZoomNum: true //显示zoom值
}));
});
this.addArea()
},添3D路牌，以及行政区色块
//初始化数字牌
initMapScutcheon() {
//featuresList 是从自己接口拿的路牌数据
this.featuresList = [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
111.849392,
33.044865
]
},
"properties": {
"key": "内乡县",
"value": 7
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
112.948245,
33.056109
]
},
"properties": {
"key": "社旗县",
"value": 0
}
}
]
var scutcheonNumberData = {
"type": "FeatureCollection",
"features": this.featuresList
}
this.drawScutcheonNumber(scutcheonNumberData)
},
//绘制数字牌
drawScutcheonNumber(scutcheonNumberData) {
var that = this
ScutcheonNumberLocal = new Loca.Container({
map: that.map,
});
ScutcheonNumber = new Loca.GeoJSONSource({
data: scutcheonNumberData
});
// 文字主体图层
zMarker = new Loca.ZMarkerLayer({
zIndex: 120,
depth: false,
});
zMarker.setSource(ScutcheonNumber);
zMarker.setStyle({
content: (i, feat) => {
return (
'<div style="width: 200px; height: 228px; padding: 0 0;">' +
'<p style="display: block; height:80px; line-height:80px;font-size:40px; border:4px solid rgba(1, 95, 217,0.6);background-color:rgba(1, 95, 217,0.6); color:#FFF; border-radius: 15px; text-align:center; margin:0; padding:5px;">' +
feat.properties.key + ':'
+ feat.properties.value
+
'</p><span style="width: 10px; height: 130px; margin: 0 auto; display: block; background-color:rgba(1, 95, 217,0.6);"></span></div>'
);
},
unit: 'meter',
rotation: 0,
alwaysFront: true,
size: [40000, 70000 / 2],
altitude: 0,
});
ScutcheonNumberLocal.add(zMarker);
},绘制不同行政区色块
//添加行政区域区分
administrativeRegion() {
var that = this
AMapUI.loadUI(
['geo/DistrictExplorer'],
function (DistrictExplorer) {
initPage(DistrictExplorer)
}
)
let initPage = (DistrictExplorer) => {
let that = this
//创建一个实例
var districtExplorer = (this.districtExplorer =
new DistrictExplorer({
eventSupport: true,
map: that.map
}))
// 内部区域被点击
this.districtExplorer.on('featureClick', (e, feature) => {
this.interiorClice(feature)
})
// 外部区域被点击
this.districtExplorer.on('outsideClick', (e) => {
this.externalClice()
})
//鼠标移入
this.districtExplorer.on('featureMouseover', (e, feature) => {
this.toggleHoverFeature(feature, e.type === 'featureMouseover',
e.originalEvent ? e.originalEvent.lnglat : null);
})
//鼠标移出
this.districtExplorer.on('featureMouseout', (e, feature) => {
this.toggleHoverfeatureMouseout(feature)
})
// // 绘制多区域
this.loadMultiAreaNodes()
}
},
///渲染最大色块
loadMultiAreaNodes() {
var that = this
let adcodes = [this.dyeMapAdcode]
this.districtExplorer.loadMultiAreaNodes(
adcodes,
(error, areaNodes) => {
//设置定位节点，支持鼠标位置识别
//注意节点的顺序，前面的高优先级
this.districtExplorer.setAreaNodesForLocating(areaNodes)
//清除已有的绘制内容
this.districtExplorer.clearFeaturePolygons()
for (let i = 0, len = areaNodes.length; i < len; i++) {
this.renderAreaNode(areaNodes[i])
}
}
)
},
// 根据各行政区划的PQI之去绘制各区域的颜色
renderAreaNode(areaNode) {
var that = this
// 绘制父区域
that.districtExplorer.renderParentFeature(areaNode, {
cursor: 'default',
bubble: true,
// strokeColor: "#00a4ce", //线颜色
strokeColor: '#FFF000', //线颜色
strokeOpacity: 1, // 线透明度,
strokeWeight: 1.5, // 线宽
fillColor: 'rgba(65,115,153,0.1)', //填充色
// fillColor: '#fillColor',
fillOpacity: 0 // 填充透明度
})
//绘制子级区域
that.districtExplorer.renderSubFeatures(
areaNode,
function (feature, i) {
var fillOpacity = 0.5
if (that.boardType.typeOne || that.boardType.typeTwo) {
//如或是路网图 填充透明
fillOpacity = 0
}
//getDistrictColor就是返回个色值根据自己业务不同写自己的判断即可
var fillColor = that.getDistrictColor(feature)
return {
cursor: 'default',
bubble: true,
strokeColor: '#FFF000',
// strokeColor,
strokeOpacity: 1, // 线透明度
strokeWeight: 0.4, // 线宽
fillColor,
// fillColor: '#fff',
fillOpacity: fillOpacity// 填充透明度
}
}
)
that.map.setFitView(that.districtExplorer.getAllFeaturePolygons())
},//鼠标移入路线后显示路线详情弹窗
//初始化路线信息弹窗
addSimpleInfoWindow(linData) {
//linData为路线描述信息
var content = [
"<div class='linInfoWindow'>"
+ "<div class='linInfoWindow-head'>路线详情</div>"
+ "<div class='linInfoWindow-name'>" + linData.projectName + "</div>"
+ `<div class='linInfoWindow-body'> ${linData.briefIntroduction ? linData.briefIntroduction : '暂无详情数据'} </div>`
+ "</div>"
];
infoWindow = new AMap.InfoWindow({
content: content,//传入 dom 对象，或者 html 字符串
isCustom: true,
offset: new AMap.Pixel(0, -20) //防止鼠标触碰窗体频闪
});
},兴趣点添加
//初始化标记点
initMark(linData) {
//linData.projectPointList=替换为自己项目里的点位信息
if (linData.projectPointList.length > 0) {
linData.projectPointList.forEach(el => {
if (el.position) {
this.markerList.push(this.addMark(el))
}
})
}
},
//添加点位信息
addMark(projectPoint) {
// projectPoint:点位信息
var xy = projectPoint.position.split(',')
var that = this
var content = `<div class='mapMark'>
<div class='MarkName'>${that.markTypList[projectPoint.type].name}</div>
<img img : src = "${that.getImg(projectPoint.type)}" ></img >
</div>`;
var marker = new AMap.Marker({
content: content, // 自定义点标记覆盖物内容
position: [xy[0], xy[1]], // 基点位置
offset: new AMap.Pixel(-40, -110) // 相对于基点的偏移位置 根据 mapWindow.less定
});
var markerContent = [
"<div class='linInfoWindow'>"
+ "<div class='linInfoWindow-head'>点位详情</div>"
+ "<div class='linInfoWindow-name'>" + projectPoint.pointName + "</div>"
+ `<div class='linInfoWindow-body'>${projectPoint.baseInfo ? projectPoint.baseInfo : '暂无点位描述详情'} </div>`
+ "</div>"
];
var markerInfoWindow = new AMap.InfoWindow({
content: markerContent,//传入 dom 对象，或者 html 字符串
isCustom: true,
offset: new AMap.Pixel(0, -20) //防止鼠标触碰窗体频闪
});
// 给兴趣点增加鼠标移入事件
marker.on('mouseover', (e) => {
markerInfoWindow.open(that.map, [e.lnglat.lng, e.lnglat.lat]);
});
// 给兴趣点增加 鼠标移出事件
marker.on('mouseout', (e) => {
markerInfoWindow.close();
});
// 给兴趣点增加 点击事件
marker.on('click', function (e) {
that.markerClick(e, projectPoint)
})
that.map.add(marker);
return marker
},
//统一获取兴趣点图标
getImg(type) {
return require(`@/assets/image/map/mapIcon/${this.markTypList[type].iconName}.png`)
},// 下方为覆盖物的各种事件
//内部点击
interiorClice(feature) {
if (this.currentArea.adcode != feature.properties.adcode) {
this.dyeMapAdcode = feature.properties.adcode
this.loadMultiAreaNodes()
this.mapRemove()
} else {
console.log('不可下段');
}
},
//外部点击
externalClice() {
if (this.currentArea.adcode != 411300) {
this.dyeMapAdcode = 411300
this.loadMultiAreaNodes()
this.mapRemove()
} else {
console.log('不可升段');
}
},
//色块鼠标移入高光
toggleHoverFeature(feature, isHover, position) {
var that = this
if (!feature) {
//自己写的判断在路网图不染色根据自己业务改
return;
}
var props = feature.properties;
var polys = this.districtExplorer.findFeaturePolygonsByAdcode(props.adcode);
for (var i = 0, len = polys.length; i < len; i++) {
polys[i].setOptions({
fillOpacity: 0.8
});
}
},
//色块鼠标移出
toggleHoverfeatureMouseout(feature) {
var that = this
if (!feature) {
return;
}
if (this.singleProject || this.currentArea.adcode != 411300 || that.boardType.typeOne || that.boardType.typeTwo) {
//如或是路网图不加颜色
return;
}
var props = feature.properties;
var polys = this.districtExplorer.findFeaturePolygonsByAdcode(props.adcode);
for (var i = 0, len = polys.length; i < len; i++) {
polys[i].setOptions({
fillOpacity: 0.5
});
}
},
//路线点击
linClick(e, linData) {
var that = this
var index = Math.floor(linData.projectLineLists.length / 2)
var xy = linData.projectLineLists[index]
that.map.setZoomAndCenter(13, [xy.longitude, xy.latitude])
//地图放大定位中心点
},
//路线鼠标移入
linMouseover(e, linData) {
//写自己业务 打开弹窗
var that = this
infoWindow.open(that.map, [e.lnglat.lng, e.lnglat.lat]);
},
//路线鼠标移出
linMouseout(e, linData) {
//关闭弹窗
infoWindow.close();
},
//兴趣点点击
markerClick(e, projectPoint) {
//写自己业务
//打开弹窗
this.dialogTermvisible = true
},
//返回县级
backCountyClick() {
//写自己业务
}
538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
