由于做大屏，公司想简单的做一个地图显示只想显示湖北省的地图
于是就有了下面的骚操作
个人记录
html
我要评论<!-- 地图显示容器-->
<div id="map" class="amap-page-container"></div>
<!-- maker点击显示坐标信息-->
<div id="makerAlert" class="makerAlert">
<div class="maker-t">
<ul>
<li class="maker-close"><i class="el-icon-close" @click="maptypeTab.makerflag=false"></i></li>
<li><strong>姓名：</strong><span>{{maptypeTab.makerObj.name}}</span></li>
<li><strong>机构名称：</strong><span>{{maptypeTab.makerObj.orgaName}}</span></li>
<li><strong>地理位置：</strong><span>{{maptypeTab.makerObj.loc}}</span></li>
</ul>
</div>
<div class="maker-j"></div>
</div>
js
import 'ol/ol.css';
//初始化加载ol
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import WKT from 'ol/format/WKT';
//样式使用
//import Circle from 'ol/style/Circle';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import Fill from 'ol/style/Fill';
import sourceVector from 'ol/source/Vector';
import layerVector from 'ol/layer/Vector';
import GeoJSON from 'ol/format/GeoJSON';
//加载maker需要模块
import Feature from 'ol/Feature';
import geomPoint from 'ol/geom/Point';
import Icon from 'ol/style/Icon';
import makeUrl from './assets/image/location.png'; //定位显示makerIMG
import Overlay from 'ol/Overlay';
import axios from 'axios'
//初始化地图模块
initMap() {
let _this=this;
let map=new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
})
})
],
view: new View({
center: [112.21, 31.197646],
projection: 'EPSG:4326',
zoom: 7
})
});
//实时定位接口
_this.$http.get('获取定位接口list（返回地点信息，经纬度）').then(res=>{
let addmakerArr=[]
if(res.data){
res.data.forEach(e=>{
addmakerArr.push({id:e.location.id,location:[Number(e.location.longitude),Number(e.location.latitude)],loc:e.location.address,name:e.location.operateName,orgaName:e.user.orgaName})
})
_this.addmaker(map,addmakerArr);
}
})
//console.log(map);
map.on('click',(evt)=>{
let pixel = map.getEventPixel(evt.originalEvent);
let feature = map.forEachFeatureAtPixel(pixel,(feature)=>{
return feature;
});
if(!feature){
return;
}
//显示maker弹框
if (feature.obj) {
_this.maptypeTab.makerflag=true
let popup_element=document.getElementById('makerAlert');
let coordinate = feature.getGeometry().getCoordinates();
let info_popup = new Overlay(({
element: popup_element,
positioning:'bottom-left',
//autoPan: true,
autoPanAnimation: {
duration: 250
}
}));
map.addOverlay(info_popup);
if (coordinate.length !== 2) {
coordinate = evt.coordinate;
}
_this.maptypeTab.makerObj=Object.assign(_this.maptypeTab.makerObj,JSON.parse(feature.obj));
info_popup.setPosition(coordinate);
}
})
//裁剪地图+边框(根据地图边框裁剪地图)
const geoJson = `${process.env.BASE_URL}static/420000.json`;
return axios
.create()
.get(geoJson)
.then(res => {
let result=res.data;
//加边框
let styles = new Style({
stroke: new Stroke({
color: 'blue',
width: 2
}),
fill: new Fill({
color: 'rgba(0, 0, 255, 0)'
})
});
let vectorSource = new sourceVector({
features: (new GeoJSON).readFeatures(result)
});
let vector = new layerVector({
source: vectorSource,
style: styles
});
map.addLayer(vector);
//裁剪
let wktOLReaderALL = new WKT();
let boundWKTarr=result.features[0].geometry.coordinates[0],boundWKT='POLYGON ((';
for(let i=0;i<boundWKTarr.length;i++){
boundWKT+=boundWKTarr[i][0]+' '+boundWKTarr[i][1]+','
}
boundWKT+=boundWKTarr[0][0]+' '+boundWKTarr[0][1]+'))'
let boundPolygon = wktOLReaderALL.readFeature(boundWKT).getGeometry();
map.on('postcompose',(evt)=>{
_this.createclip(evt.context,boundPolygon,map)
})
})
},
createclip(context,boundPolygon,map){//裁剪
context.save();
let coors = boundPolygon.getCoordinates();
let pointArr = [];
for (let i = 0; i < coors.length; i++) {
let coorTmp = coors[i];
let pointTmp = [];
for (let j = 0; j < coorTmp.length; j++) {
pointTmp.push(map.getPixelFromCoordinate(coorTmp[j]));
}
pointArr.push(pointTmp);
}
context.globalCompositeOperation = "destination-in";
context.beginPath();
for (let i = 0; i < pointArr.length; i++) {
let pointTmp = pointArr[i];
for (let j=0; j < pointTmp.length; j++) {
if (j == 0) {
context.moveTo(pointTmp[j][0], pointTmp[j][1]);
} else {
context.lineTo(pointTmp[j][0], pointTmp[j][1]);
}
}
}
context.closePath();
context.fillStyle = "#ff0000ff";
context.fill();
context.restore();
},
addmaker(map,addmakerArr){//数据格式[{id:'123',location:[lat,lon],loc:'湖北武汉',name:''},.....]
if(addmakerArr.length==0)
return;
let makerfeatures = [];
addmakerArr.forEach((data,index) => {
let feature = new Feature({
geometry: new geomPoint(data.location),
id: index++
});
let style = new Style({
image: new Icon({
src: makeUrl
})
});
//var html = `<div class="ol-popup none" id="popup"><a href="#" id="popup-closer" class="ol-popup-closer"></a><div id="popup-content">123131231321313131</div></div>`;
feature.obj = JSON.stringify(data);
//设置样式在样式中既可以设置图标
feature.setStyle(style);
//添加到之前创建的layer中
makerfeatures.push(feature);
});
//第二步source添加到layer
let makerSource = new sourceVector({
features: makerfeatures
});
let markerLayer = new layerVector({
source: makerSource
})
markerLayer.setZIndex(10000);
map.addLayer(markerLayer);
}
本文地址：https://blog.csdn.net/qq_35371821/article/details/107562206
如对本文有疑问， 点击进行留言回复！！
VUE怎么解决路由跳转时及跳转到外部链接,再返回的页面缓存问题
vue 调用后端接口导出excel无效果，直接访问后端url可以
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
解决vue动态路由异步加载import组件,加载不到module的问题
网友评论