<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="http://localhost:90/4.11/esri/css/main.css">
<link
rel="stylesheet"
href="http://localhost:90/4.11/esri/themes/light/main.css"
/>
<!-- <script src="https://js.arcgis.com/4.11/"></script> -->
<script src="http://localhost:90/4.11/init.js"></script>
<script>
var map;
var mapview;
var dra;
require([
"esri/Map", //地图、通用属性
"esri/views/MapView",
"esri/Basemap",
"esri/layers/WebTileLayer",
"esri/layers/MapImageLayer",
"esri/layers/TileLayer",
"esri/layers/WMTSLayer",
"esri/geometry/SpatialReference",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"esri/geometry/Extent",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"esri/layers/support/TileInfo",
"esri/config",
"esri/widgets/AreaMeasurement2D",
"esri/widgets/DistanceMeasurement2D",
"esri/views/draw/Draw",
"esri/geometry/geometryEngine",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/geometry/Polygon",
"esri/symbols/TextSymbol",
"esri/symbols/Font",
"dojo/on",
"dojo/dom",
'4326.js',
'esri/widgets/Home',
'Measurement2D.js'
], function(
Map,
MapView,
Basemap,
WebTileLayer,
MapImageLayer,
TileLayer,
WMTSLayer,
SpatialReference,
GraphicsLayer,
Graphic,
Extent,
QueryTask,
Query,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
Color,
TileInfo,
esriConfig,
AreaMeasurement2D,
DistanceMeasurement2D,
Draw,
geometryEngine,
Point,
Polyline,
Polygon,
TextSymbol,
Font,
on,
dom,
epsg4326,
Home,
Measurement2D
) {
var tiledLayer = new WebTileLayer({
urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=6a92e00bdfafade25568c053a5ba6de4",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: epsg4326.tileInfo
//tileInfo: tileInfo
})
var tiledLayer_poi = new WebTileLayer({
urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_c&x={col}&y={row}&l={level}&tk=6a92e00bdfafade25568c053a5ba6de4",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: epsg4326.tileInfo
// tileInfo: tileInfo
});
// 注意：创建地图，不设置底图，如果设置底图会造成坐标系无法被转换成 ESPG:4326 (WGS1984)
map = new Map({
spatialReference: {
wkid: 4326
},
layers:[tiledLayer, tiledLayer_poi]
});
var drawlayer2 = new GraphicsLayer();
map.add(drawlayer2)
mapview = new MapView({
map: map, // 绘制的地图
spatialReference: {
wkid: 4326
},
container: 'viewDiv', // 绘制地图的ID
zoom: 7,
center: [113.23, 23.16],
scale: epsg4326.tileInfo.lods[9].scale,
});
//控件調用
var homeWidget = new Home({
view: mapview,
});
mapview.ui.add(homeWidget, "top-right");
var Measurement2Dwidget = new Measurement2D(mapview,"top-right");
var url = "https://tiles.arcgis.com/tiles/nzS0F0zdNLvs7nc8/arcgis/rest/services/US_Counties_basemap/MapServer"
// var tile = new ArcGISTiledMapServiceLayer(url)
// map.addLayer(tile)
mapview.on("click", function(evt) {
console.log(evt)
})
console.log(mapview)
dra = new Draw( {
showTooltips: true,
view:mapview
});
drawf = function() {
var action = dra.create("polygon", {
mode: "click"
});
mapview.focus();
action.on(
[
"vertex-add",
"vertex-remove",
"cursor-update",
"redo",
"undo",
"draw-complete"
],
createPolygon
);
}
createPolygon = function(event) {
var vertices = event.vertices;
var fillSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [3, 255, 240, 0.3],
outline: {
// autocasts as new SimpleLineSymbol()
color: [255, 116, 3],
width: '1px'
}
};
var polygon = new Polygon({
rings: vertices
});
drawlayer2.removeAll();
var graphics = new Graphic({
geometry: polygon,
symbol: fillSymbol
});
drawlayer2.add(graphics);
if (event.type == "draw-complete") {
mapview.container.style.cursor = "default";
//this.calArea(graphics.geometry, _this.gisMapView);
}
}
var activeWidget = null;
//测距
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: mapview
});
// skip the initial 'new measurement' button
activeWidget.viewModel.newMeasurement();
mapview.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("distanceButton"));
break;
case "area":
activeWidget = new AreaMeasurement2D({
view: mapview
});
// skip the initial 'new measurement' button
activeWidget.viewModel.newMeasurement();
mapview.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("areaButton"));
break;
case null:
if (activeWidget) {
mapview.ui.remove(activeWidget);
activeWidget.destroy();
activeWidget = null;
}
break;
}
}
function setActiveButton(selectedButton) {
// focus the view to activate keyboard shortcuts for sketching
mapview.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">
<button id="drawBtn" style="line-height:20px;position: absolute;left:50px;top:5px;z-index: 10;" onclick="drawf()">draw</button>
<button id="distanceButton" style="line-height:20px;position: absolute;left:100px;top:5px;z-index: 10;" >测距</button>
<button id="areaButton" style="line-height:20px;position: absolute;left:150px;top:5px;z-index: 10;" >测面</button>
</div>
</body>
</html>
