//记录//记录//记录//记录//记录//记录//记录//记录//记录//记录//
官方demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Measurement in 2D - 4.15</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
100%;
}
#topbar {
background: #fff;
padding: 10px;
}
.action-button {
font-size: 16px;
background-color: transparent;
border: 1px solid #d3d3d3;
color: #6e6e6e;
height: 32px;
32px;
text-align: center;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
.action-button:hover,
.action-button:focus {
background: #0079c1;
color: #e4e4e4;
}
.active {
background: #0079c1;
color: #e4e4e4;
}
</style>
<link
rel="stylesheet"
href="http:///localhost/arcgis/API/4.15/esri/themes/light/main.css"
/>
<script src="http:///localhost/arcgis/API/4.15/dojo/dojo.js"></script>
<script>
require([
"esri/views/MapView",
"esri/WebMap",
"esri/widgets/DistanceMeasurement2D",
"esri/widgets/AreaMeasurement2D"
], function(MapView, WebMap, DistanceMeasurement2D, AreaMeasurement2D) {
var activeWidget = null;
// load a webmap
const webmap = new WebMap({
portalItem: {
id: "990d0191f2574db495c4304a01c3e65b"
}
});
// create the map view
const view = new MapView({
container: "viewDiv",
map: webmap
});
// add the toolbar for the measurement widgets
view.ui.add("topbar", "top-right");
document
.getElementById("distanceButton")
.addEventListener("click", function() {
setActiveWidget(null);
if (!this.classList.contains("active")) {
setActiveWidget("distance");
} else {
setActiveButton(null);
}
});
document
.getElementById("areaButton")
.addEventListener("click", function() {
setActiveWidget(null);
if (!this.classList.contains("active")) {
setActiveWidget("area");
} else {
setActiveButton(null);
}
});
function setActiveWidget(type) {
switch (type) {
case "distance":
activeWidget = new DistanceMeasurement2D({
view: view
});
// skip the initial 'new measurement' button
activeWidget.viewModel.newMeasurement();
view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("distanceButton"));
break;
case "area":
activeWidget = new AreaMeasurement2D({
view: view
});
// skip the initial 'new measurement' button
activeWidget.viewModel.newMeasurement();
view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("areaButton"));
break;
case null:
if (activeWidget) {
view.ui.remove(activeWidget);
activeWidget.destroy();
activeWidget = null;
}
break;
}
}
function setActiveButton(selectedButton) {
// focus the view to activate keyboard shortcuts for sketching
view.focus();
var elements = document.getElementsByClassName("active");
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove("active");
}
if (selectedButton) {
selectedButton.classList.add("active");
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="topbar">
<button
class="action-button esri-icon-measure-line"
id="distanceButton"
type="button"
title="Measure distance between two or more points"
></button>
<button
class="action-button esri-icon-measure-area"
id="areaButton"
type="button"
title="Measure area"
></button>
</div>
</body>
</html>
主要通过vuex解决
组件
/////////.components/test.vue
<template> <div> <div id="viewDiv"></div> <div id="topbar"> <button class="action-button esri-icon-measure-line" @click="distanceLine" id="distanceButton" type="button" title="测量两个或多个点之间的距离" ></button> <!-- @click="distanceMBtn" --> <!-- @click="areaMBtn" --> <button class="action-button esri-icon-measure-area" @click="areaM" id="areaButton" type="button" title="测量面积" ></button> </div> </div> </template> <script> import { loadModules } from "esri-loader"; import global from "../../utils/global.js"; export default { name: "Distance", data() { return { activeWidget: null }; }, mounted() { const options = { url: " http://localhost:80/arcgis/API/4.15/init.js", css: "http://localhost:80/arcgis/API/4.15/esri/themes/light/main.css", }; loadModules( [ "esri/Map", "esri/views/MapView", "esri/layers/WebTileLayer", "esri/widgets/DistanceMeasurement2D", "esri/widgets/AreaMeasurement2D", ], options ).then(this.init); }, methods: { //创建地图 init([ ArcGISMap, MapView, WebTileLayer, DistanceMeasurement2D, AreaMeasurement2D, ]) { // var activeWidget = null; var tiledLayer = new WebTileLayer({ urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=aeae35f8750027dc9790a7437c5ec3c0", subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], }); var tiledLayer_poi = new WebTileLayer({ urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=aeae35f8750027dc9790a7437c5ec3c0", subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], }); var map = new ArcGISMap({ basemap: { baseLayers: [tiledLayer, tiledLayer_poi], }, }); var view = new MapView({ container: "viewDiv", map: map, zoom: 12, center: [116.402544, 39.915599], }); //清除掉地图左上角默认的缩放图标 view.ui.components = []; //将小部件添加至右上角 view.ui.add("topbar", "top-right"); // zhuce this.register( ArcGISMap, MapView, WebTileLayer, DistanceMeasurement2D, AreaMeasurement2D ); this.$store.state.map = map; this.$store.state.view = view; // this.$store.state.activeWidget = activeWidget; // .catch((err) => { // this.$message("地图创建失败，" + err); // }); }, register() { global.ArcGISMap = arguments[0]; global.MapView = arguments[1]; global.FeatureLayer = arguments[2]; global.DistanceMeasurement2D = arguments[3]; global.AreaMeasurement2D = arguments[4]; }, distanceLine() { console.log("直线测量"); this.setActiveWidget(null); if ( !document.getElementById("distanceButton").classList.contains("active") ) { this.setActiveWidget("distance"); } else { this.setActiveButton(null); } }, areaM() { this.setActiveWidget(null); if ( !document.getElementById("distanceButton").classList.contains("active") ) { this.setActiveWidget("area"); } else { this.setActiveButton(null); } }, setActiveWidget(type) { switch (type) { case "distance": this.activeWidget = new global.DistanceMeasurement2D({ view: this.$store.state.view, }); // skip the initial 'new measurement' button this.activeWidget.viewModel.newMeasurement(); this.$store.state.view.ui.add(this.activeWidget, "top-right"); this.setActiveButton(document.getElementById("distanceButton")); break; case "area": this.activeWidget = new global.AreaMeasurement2D({ view: this.$store.state.view, }); // skip the initial 'new measurement' button this.activeWidget.viewModel.newMeasurement(); this.$store.state.view.ui.add(this.activeWidget, "top-right"); this.setActiveButton(document.getElementById("areaButton")); break; case null: if (this.activeWidget) { view.ui.remove(this.activeWidget); this.activeWidget.destroy(); this.activeWidget = null; } break; } }, setActiveButton(selectedButton) { // focus the view to activate keyboard shortcuts for sketching this.$store.state.view.focus(); var elements = document.getElementsByClassName("active"); for (var i = 0; i < elements.length; i++) { elements[i].classList.remove("active"); } if (selectedButton) { selectedButton.classList.add("active"); } }, }, }; </script> <style scoped> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; 100%; } #topbar { background: #fff; padding: 10px; } .action-button { font-size: 16px; background-color: transparent; border: 1px solid #d3d3d3; color: #6e6e6e; height: 32px; 32px; text-align: center; box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); } .action-button:hover, .action-button:focus { background: #0079c1; color: #e4e4e4; } .active { background: #0079c1; color: #e4e4e4; } </style>
vuex state储存全局数据,通过this.$store.state.view访问
/////store.index.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { map: '', view: '', }, mutations: { }, actions: { }, getters: { } })
global.js存放注册的全局变量，在组件中先导入global.js，通过global.
.utils/global.js
export default { ArcGISMap() { }, MapView() { }, WebTileLayer() { }, DistanceMeasurement2D() { }, AreaMeasurement2D() { } }