<template>
<div class="fx">
<div class="bts">
<el-button @click="ResetBz()">设置一个标注</el-button>
<el-button
class="cli"
@click="clearBz()"
>清除标注</el-button>
</div>
<!-- <dialogs>
</dialogs> -->
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
>
<span>经度:{{longitude}}</span>
<span>纬度:{{latitude}}</span>
<span
slot="footer"
class="dialog-footer"
>
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button
type="primary"
@click="dialogVisible = false"
>确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { loadModules } from "esri-loader";
import dialogs from "./dialogs";
export default {
data() {
return {
dialogVisible: false,
};
},
components: {
dialogs,
},
name: "web-map",
mounted() {
this.initMaps();
// this.resetBz();
},
//在地图跳转后销毁地图,减少访问资源
beforeDestroy() {
if (this.view) {
this.view.container = null;
}
},
methods: {
//初始化一个地图
initMaps() {
let _self = this;
//这里需要添加自己所需要功能的依赖,
loadModules(
[
"esri/Map",
"esri/views/MapView",
"esri/views/3d/externalRenderers",
"esri/layers/FeatureLayer",
"esri/widgets/BasemapToggle",
"esri/Graphic",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/Color",
"esri/geometry/support/webMercatorUtils",
// \'esri/widgets/Fullscreen\'
// \'esri/graphic\'
],
// {
// url:""
// },
{ css: true }
).then(
([
ArcGISMap,
MapView,
FeatureLayer,
BasemapToggle,
Fullscreen,
Graphic,
webMercatorUtils,
SimpleMarkerSymbol,
SimpleLineSymbol,
Color,
// webMercatorUtils
]) => {
const map = new ArcGISMap({
//地图的底层这里一共有17钟 具体的可以参考文档 https://www.cnblogs.com/myfgis/p/5709079.html
// basemap: "satellite", //各种地图显示的种类
// basemap:"dark-gray",
// basemap:"oceans",
// basemap:"national-geographic"
basemap: "topo-vector",
});
const view = new MapView({
container: this.$el, //这里是个容器,
map: map, //实例化一个地图
center: [113.276728, 23.140092], //地图呈现位置的经纬度
zoom: 10, //放大的比例
showLabels: true, //是否显示标注
});
const points = [[113.276728, 23.140092]];
const symbol = {
type: "text",
// url: "/assets/logo.png",
// width: "32px",
height: "32px",
text: "awdawdawd",
fontsize: "200px",
color: "red",
size: "32px",
};
let pointList = [];
console.log(FeatureLayer);
pointList.push(
new Graphic({
points: points,
// geometry: element,
symbol: symbol,
// attributes: element,
// popupTemplate: template,
})
);
console.log(view.graphics);
view.graphics.addMany(pointList);
// const mapView= new FeatureLayer({
// source: graphics,
// objectIdField: \'ObjectID\',
// renderer,
// });
// view.add(mapView);
view.ui.empty("top-left");
view.ui.add(
// 在右上角添加全屏组件
new Fullscreen({
view: view,
}),
"top-right"
);
let symbols = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
12,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_NULL
// new Color([247, 34, 101, 0.9]),
)
// new Color([207, 34, 171, 0.5])
);
//核心，绑定点击事件
view.on("click", function (e) {
console.log(_self);
_self.dialogVisible = true;
console.log(e);
console.log(webMercatorUtils);
console.log(e.mapPoint.longitude, e.mapPoint.latitude);
_self.longitude = e.mapPoint.longitude;
_self.latitude = e.mapPoint.latitude;
let geom = [];
});
console.log(view);
}
);
},
//修改地图上的标注
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fx {
padding: 0;
margin: 0;
width: 1920px;
height: 920px;
}
.bts {
position: absolute;
display: flex;
left: 70%;
top: 20px;
opacity: 0.7;
border-radius: 10%;
border: none;
width: 220px;
height: 50px;
color: white;
}
/* button .cli{
margin-left:5px;
background: red;
color:white;
} */
/* button {
width: 50%;
color: white;
background: red;
} */
</style>