鉴于部分项目特殊性,项目使用内网,在线地图无法显示,改离线地图
离线地图相关文件(public目录下)
index.html引入
实现效果如下:
offlineDraw.vue组件代码片段
<template>
<div class="map-wrap">
<div class="flex">
<div class="button-wrap">
<el-button
size="small"
type="primary"
icon="el-icon-edit"
@click="handleDraw('polygon')"
>编辑</el-button
>
<el-button size="small" icon="el-icon-check" @click="handelFinishDraw"
>完成</el-button
>
<el-button
size="small"
icon="el-icon-refresh-left"
@click="handleClearDraw"
>重置</el-button
>
</div>
<div class="picker-color">
<div class="text">选择颜色</div>
<span
@click="handleChangeColor(item)"
v-for="item in colors"
:key="item.code"
:class="[
'color' + item.code,
drawColor == item.value ? 'active' : '',
]"
>
<i v-if="drawColor == item.value" class="el-icon-check"></i>
<i v-else> </i>
</span>
</div>
</div>
<div :id="mapId" class="allmap" />
</div>
</template>
<script>
export default {
props: ["defaultArea","defaultColor"],
components: {},
data() {
return {
map: null,
mapId: null,
actNav: null,
drawColor: "#2A8DFF",
drawingManagers: null,
colors: [
{ code: 1, value: "#FF6B36" },
{ code: 2, value: "#FFAD29" },
{ code: 3, value: "#FFDA21" },
{ code: 4, value: "#29E98F" },
{ code: 5, value: "#1EEDE6" },
{ code: 6, value: "#2A8DFF" },
{ code: 7, value: "#CC16EF" },
{ code: 8, value: "#F53ABD" },
],
};
},
created() {},
mounted() {
this.mapId = "map" + new Date().getTime();
const point = new BMap.Point(114.97731018066408, 25.8246784210205);
this.$nextTick(()=>{
this.initMap(point);
})
},
watch:{
"defaultArea":{
handler(val){
if(val){
this.drawColor=this.defaultColor||"#2A8DFF";
setTimeout(()=>{
this.drawDefault(val);
},1000)
}
},
immediate:true,
deep:true
}
},
destroyed() {
/* this.map.destroy(); */
},
methods: {
drawDefault(points){
if(points){
let newPonits = [];
let arr=points.split(";");
arr.forEach(item=>{
let itemArr=item.split(",");
newPonits.push(new BMap.Point(itemArr[0],itemArr[1]))
})
const polygon= new BMap.Polygon(newPonits, {strokeColor:this.drawColor, strokeWeight:4, strokeOpacity:1,fillColor:this.drawColor,fillOpacity: 0.2});
this.map.addOverlay(polygon);
this.map.setCenter(newPonits[0]);
}
},
initMap(point) {
const _this = this;
_this.map = new BMap.Map(this.mapId, { enableMapClick: false }); // 创建Map实例,GL版命名空间为BMap(鼠标右键控制倾斜角度)
_this.map.centerAndZoom(new BMap.Point(114.97731018066408, 25.8246784210205), 15); // 初始化地图,设置中心点坐标和地图级别
_this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
_this.cerateMarker(point);
},
cerateMarker(point) {
const marker = new BMap.Marker(point);
// 将标记点添加到地图上
this.map.addOverlay(marker);
},
handleChangeColor(item){
this.drawColor = item.value;
/* this.drawingManagers.setStrokeColor(item.value); */
},
//编辑
handleDraw() {
const _this=this;
const styleOptions = {
strokeColor: this.drawColor || "#2A8DFF", // 边线颜色
fillColor: this.drawColor || "#2A8DFF", // 填充颜色。当参数为空时,圆形没有填充颜色
strokeWeight: 4, // 边线宽度,以像素为单位
strokeOpacity: 1, // 边线透明度,取值范围0-1
fillOpacity: 0.2, // 填充透明度,取值范围0-1
};
const labelOptions = {
borderRadius: '2px',
background: '#FFFBCC',
border: '1px solid #E1E1E1',
color: '#703A04',
fontSize: '12px',
letterSpacing: '0',
padding: '5px'
};
this.drawingManagers = new BMapGLLib.DrawingManager(this.map, {
isOpen: false, // 是否开启绘制模式
enableCalculate: true, // 绘制是否进行测距测面
enableSorption: true, // 是否开启边界吸附功能
sorptiondistance: 20, // 边界吸附距离
polygonOptions: styleOptions, // 多边形的样式
labelOptions:labelOptions,
});
this.drawingManagers.setDrawingMode('polygon');
this.drawingManagers.open();
this.drawingManagers.addEventListener("overlaycomplete", function (e) {
_this.points=e.overlay.points;
_this.$emit("getMapPointsData",e.overlay.points,_this.drawColor)
});
},
//重置
handleClearDraw() {
/* */
this.map.clearOverlays();
this.$emit("getMapPointsData",[],"")
/* document.getElementById('cancelOperate').click(); */
},
//完成
handelFinishDraw() {
if( document.getElementById('confirmOperate')){
document.getElementById('confirmOperate').click();
}
},
},
};
</script>
<style lang="scss" scoped>
.map-wrap {
position: relative;
width: 100%;
height: 100%;
.flex {
display: flex;
flex-shrink: 0;
white-space: nowrap;
justify-content: space-between;
align-items: center;
height: 50px;
line-height: 50px;
}
}
.allmap {
width: 100%;
height: calc(100% - 50px);
position: absolute;
}
ul {
list-style: none;
}
.picker-color {
text-align: right;
padding-right: 30px;
.text {
display: inline-block;
padding: 0 10px;
float: left;
}
span {
display: inline-block;
width: 24px;
height: 24px;
line-height: 20px;
border-radius: 4px;
border-width: 2px;
border-style: solid;
margin-left: 8px;
overflow: hidden;
text-align: center;
margin-top: 10px;
float: left;
i {
font-weight: 600;
}
}
.color1 {
border-color: #ff6b36;
background: rgba(255, 107, 54, 0.3);
color: #ff6b36;
}
.color2 {
border-color: #ffad29;
background: rgba(255, 173, 41, 0.3);
color: #ffad29;
}
.color3 {
border-color: #ffda21;
background: rgba(255, 218, 33, 0.3);
color: #ffda21;
}
.color4 {
border-color: #29e98f;
background: rgba(41, 233, 143, 0.3);
color: #29e98f;
}
.color5 {
border-color: #1eede6;
background: rgba(30, 237, 230, 0.3);
color: #1eede6;
}
.color6 {
border-color: #2a8dff;
background: rgba(42, 141, 255, 0.3);
color: #2a8dff;
}
.color7 {
border-color: #cc16ef;
background: rgba(204, 22, 239, 0.3);
color: #cc16ef;
}
.color8 {
border-color: #f53abd;
background: rgba(245, 58, 189, 0.3);
color: #f53abd;
}
}
</style>
页面引用
<template>
<div class="maps">
<offlineDraw :defaultColor="defaultColor" :defaultArea="this.defaultPonits" @getMapPointsData="getMapPointsData">
</offlineDraw>
</div>
</template>
<script>
import offlineDraw from "@/components/Map/offlineDraw";
export default {
props: [],
components: {offlineDraw},
data() {
return {
defaultPonits: "114.92823026067752,25.847650021588933;114.92600512212549,25.848323919288035;114.92407702000297,25.846762733388502;114.92300787077777,25.84652291159597;114.92185336930342,25.846201793519086;114.92105375349648,25.846039201755275;114.91772286058358,25.845837912045738;114.91889083872856,25.842911217098504;114.91923325032637,25.84246890883574;114.92025198248993,25.84137873822148;114.92057101937894,25.840621874689475;114.91990367247762,25.83543267890485;114.9200025013976,25.83448955771958;114.92517754302577,25.835847324633406;114.92554590536388,25.833513907204548;114.92189821977185,25.832473204456164;114.92135915293557,25.832367507571377;114.92629161448744,25.82696057947598;114.91354268380992,25.817138039228638;114.91515089987152,25.816658275085175;114.91687591374757,25.814682276855933;114.91807982968191,25.81317789396165;114.91995757916156,25.80885167019649;114.92392870485547,25.803606318603514;114.92615684777867,25.801329194472004;114.92827717733464,25.799930367954687;114.93126001382863,25.79976771263702;114.93589598862046,25.80145931702964;114.93948976752887,25.80402920826758;114.93953141347649,25.80412817087722;114.93953141347649,25.80412817087722;114.93948976752887,25.80402920826758;114.93948976752887,25.80402920826758;114.93953141347649,25.80412817087722;114.93953141347649,25.80412817087722;114.93953141347649,25.80412817087722;114.93953141347649,25.80412817087722;114.93906799602371,25.804714864544835;114.93827736466388,25.80569075236299;114.93648047520966,25.807707561717777;114.94762118982572,25.816164775470398;114.93985862738357,25.82410099603871;114.94194301915044,25.826117491923867;114.94172739241593,25.839321438580683;114.93834924024202,25.839256398119232;114.92785540582945,25.83652466645269;114.92823026067752,25.847650021588933",
defaultColor:"#FFDA21",
}
},
created() {},
mounted() {},
methods: {
getMapPointsData(){},
},
}
</script>
<style lang="scss" scoped>
.maps{
width: 800px;
height: 500px;
}
</style>
参考: