极客观点
项目管理
HarmonyOS
<template>
<div>
<div id="popup" class="ol-popup" ref="popup">
<a href="#" id="popup-closer" class="ol-popup-closer" ref="popup_closer">关闭</a>
<div id="popup-content" ref="popup_content">
<ul>
<template v-for="(v,k) in datas">
<li v-if="k != 'geometry' && k != 'ref'" :key="k">{{k}}:{{v}}</li>
</template>
</ul>
</div>
</div>
<div class="box1">
<div id="map" class="map"></div>
<div class="right">
<div>
<div style="margin-left: 20px">
<font size="6" color="#ff0000">瓦片层级:</font>
<font size="6" v-text="zoomshow" id="zoomshow" color="#00ff00"></font>
</div>
<!-- <br/> -->
<a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-model-item label="图层id">
<a-input type="text" v-model="lid_" id="lid_" />
</a-form-model-item>
<a-form-model-item label="取图url">
<a-input type="text" v-model="urlp_" id="urlp_" />
</a-form-model-item>
<a-form-model-item label="其他参数">
<a-input type="text" v-model="otp_" id="otp_" />
</a-form-model-item>
<font id="urls_" color="#00ff00" style="display: none"></font>
<a-form-model-item label="经度">
<a-input type="text" v-model="x_" id="x_" />
</a-form-model-item>
<a-form-model-item label="纬度">
<a-input type="text" v-model="y_" id="y_" />
</a-form-model-item>
</a-form-model>
<div style="margin-bottom: 10px; margin-left: 80px">
<div style="display: flex">
<div class="demo-box">
<div class="upload-btn">
<span style="color: white">上传geojson</span>
<input type="file" class="file-btn" ref="fileBtn" @change="upload" :disabled="name !== ''"/>
</div>
</div>
<span style="margin-left: 10px">
<a-button type="primary" @click="add_feature" v-show="add_feature_disabled" style="background: blue" >添加图层</a-button>
<a-button type="danger" @click="delete_feature" v-show="!add_feature_disabled" style="background: red">关闭图层</a-button>
</span>
</div>
<div style="display: flex; align-items: center">
<span>{{ name }}</span>
<a-button type="link" icon="delete" size="small" v-show="name" style="margin-left: 10px" @click="delete_click" :disabled="disabled"></a-button>
</div>
</div>
<a-space style="margin-left: 80px">
<a-button type="primary" v-show="newTle" @click="addNewtle" style="background: blue">打开叠加图层</a-button>
<a-button type="danger" v-show="!newTle" @click="delNewtle" style="background: red">关闭叠加图层</a-button>
<a-button type="primary" @click="setXY()" style="background: blue">GO</a-button>
</a-space>
</div>
<a-card class="card2" :bordered="false" style="width: 350px">
<table border style="border-collapse:collapse;">
<template v-for="(v,k) in datas">
<tr v-if="k != 'geometry'" :key="k" style="border-bottom:1px solid gray">
<td width="79.2">{{k}}</td>
<td width="237.8">{{v}}</td>
</tr>
</template>
</table>
</a-card>
</div>
</div>
</div>
</template>
<script src="OpenLayers/v5.2.0-dist/ol.js"></script>
<script>
import "./OpenLayers/v5.2.0-dist/ol.js";
var f = 1;
// var mre_layer;
var layers = [];
export default {
data() {
return {
fileList: [],
uploading: false,
labelCol: { span: 7 },
wrapperCol: { span: 16 },
newTle: true,
add_feature_disabled: true,
x_: "120.52869695648342",
y_: "36.55265941271544",
urlp_: "http://192.168.5.70:8003",
lid_: "",
otp_: "",
layers: [],
zoomshow: "",
layers,
to: [],
view: "",
mre_layer: "",
vLayer: null,
map: "",
gejson: {},
name: "",
disabled: false,
overlay:null,
datas:{},
selectTool:null,
};
},
mounted() {
this.initMap()
this.map_click()
},
computed: {},
methods: {
initMap() {
var that = this;
this.layers.push(
new ol.layer.Tile({
visible: true,
title: 0,
source: new ol.source.XYZ({
url: "http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
}),
})
);
this.to = ol.proj.fromLonLat([
Number(116.46915435791),
Number(39.9959283437361),
]);
that.map = new ol.Map({
layers: this.layers,
target: "map",
view: new ol.View({ center: [0, 0], zoom: 10 }),
});
this.view = that.map.getView();
this.view.setZoom(21);
this.view.animate({
center: this.to,
duration: 0,
});
this.zoomshow = that.map.getView().getZoom();
that.map.on("moveend", function () {
var zoom = that.map.getView().getZoom(); //获取当前地图的缩放级别
that.zoomshow = that.map.getView().getZoom();
});
this.overlay = new ol.Overlay({
element: this.$refs.popup,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
this.overlay.setPosition(undefined);
this.map.addOverlay(this.overlay);
this.map_click()
//弹窗的关闭
this.$refs.popup_closer.onclick = () => {
this.overlay.setPosition(undefined);
return false;
};
},
// 点击geojson里面的某一个点获取属性信息
map_click() {
this.map.on("click", (e) => {
var pixel = this.map.getEventPixel(e.originalEvent);
console.log(pixel)
var coordinate = e.coordinate;
var feature = this.map.forEachFeatureAtPixel(pixel, function(feature,layer) {return feature});
console.log(feature)
if(feature){
// var geometry = feature.getGeometry();
// var coord = geometry.getCoordinates();
// console.log(coord);
console.log("获取到点击的要素" + "jingdu:" + coordinate[0]); //其中lei是定义的属性
this.datas = feature.values_
// this.overlay.setPosition(coordinate);
}else {
this.overlay.setPosition(undefined); // 如果没有点击坐标点，就隐藏弹窗
}
});
},
delete_click() {
if (!this.add_feature_disabled) {
this.disabled = true;
} else {
this.name = "";
this.gejson = {};
this.disabled = false;
this.datas = {}
}
},
upload() {
// 获取上传的文件
let inputFile = this.$refs.fileBtn.files[0];
this.name = inputFile.name;
let reader = new FileReader();
reader.readAsText(inputFile, "UTF-8");
reader.onload = (e) => {
let content = e.target.result;
this.gejson = content;
};
this.$refs.fileBtn.value = "";
},
// 添加图层渲染geojson数据
add_feature() {
const gjson = JSON.parse(this.gejson);
this.vLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: new ol.format.GeoJSON().readFeatures(gjson, {
featureProjection: "EPSG:3857",
}),
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: "rgba(255, 255, 255, 0.1)",
}),
label: '${id}',
//边线颜色
stroke: new ol.style.Stroke({
color: "#10ea00",
width: 2,
}),
//形状
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: "rgba(255, 255, 255, 0.1)",
}),
stroke: new ol.style.Stroke({
color: "#10ea00",
width: 2,
}),
}),
}),
zIndex: 9999,
});
this.map.addLayer(this.vLayer);
this.add_feature_disabled = false;
},
// 关闭图层
delete_feature() {
this.map.removeLayer(this.vLayer);
this.add_feature_disabled = true;
this.disabled = false;
this.name = "";
this.gejson = {};
this.datas = {}
},
// 关闭叠加图层
setXY() {
this.to = new ol.proj.fromLonLat([Number(this.x_), Number(this.y_)]);
this.view.animate({
center: this.to,
duration: 0,
});
},
// 打开叠加的图层
addNewtle() {
if (f == 1) {
const urlp = document.getElementById("urlp_").value;
var urls = urlp + "/{z}/{x}/{y}.jpg";
document.getElementById("urls_").innerHTML = urls;
this.mre_layer = new ol.layer.Tile({
visible: true,
title: 1,
source: new ol.source.XYZ({
url: urls,
}),
});
this.map.addLayer(this.mre_layer);
this.newTle = false;
f = 0;
}
},
// 关闭叠加的图层
delNewtle() {
if (f == 0) {
this.map.removeLayer(this.mre_layer);
this.newTle = true;
f = 1;
}
},
},
};
</script>
<style scoped>
.card2 ::v-deep .ant-card-body{
padding:10px;
height:calc(100vh - 530px);
overflow: auto;
}
::v-deep .ant-form-item{
margin-bottom:2px;
display:flex;
}
.demo-box {
width: 100px;
height: 32px;
overflow: hidden;
}
.upload-btn {
width: 100px;
height: 32px;
overflow: hidden;
position: relative;
background: #0000ff;
border: 1px solid #f3f3f3;
border-radius: 5px;
line-height: 32px;
font-size: 14px;
text-align: center;
}
.file-btn {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.box1 {
display: flex;
height: calc(100vh - 120px);
}
.right {
width: 350px;
/* margin-left:15px; */
}
.map {
width: 100%;
position: relative;
}
.buttons {
position: absolute;
left: 0px;
top: 0px;
float: left;
margin: 0px;
padding: 0px;
}
.buttons > li {
background: #990033;
list-style-type: none;
height: 25px;
color: white;
padding: 5px;
}
body {
margin: 0px;
}
.container {
position: fixed;
display: -webkit-inline-box;
width: 100%;
height: 100%;
}
.ol-popup {
position: absolute;
background-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
}
.ol-popup:after,
.ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "";
}
</style>使用的openlayers是5.2的版本
这个是实现的渲染geojson数据的代码
这个是效果
点击geojson里面的某一个点获取对应的属性信息
点击多边形的实话可以获取到对应的feature，并获取到对应的属性信息
点击点的实话获取不到对应的feature
这个时候注释掉map_click这个事件里面的console.log保存代码以后，不刷新页面，从新渲染一次geojson，点击点的时候就可以获取到对应的属性信息
那位大佬给我看一下我代码哪里写错了?
有什么办法可以解决吗？
