# arcgis
分别用两个对象来描述“数据”和“视图”，
用Map类实例出来的【map对象】以描述数据；用MapView类、SceneView类实例出来的【view对象】以描述视图。
通俗说，Map就是一张地图，它属于数据部分，需要用视图展示它。视图，在jsAPI中，就是View，它负责把Map描绘出来，用WebGL的手段。Map类如何组织数据呢？用图层。Layer！所以很多Map类的方法，都是控制图层的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Intro to SceneView - Create a 3D map - 4.7</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<script src="https://js.arcgis.com/4.7/"></script>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"dojo/domReady!"
], function(Map, SceneView) {
var map = new Map({
basemap: "streets",
ground: "world-elevation"
});
var view = new SceneView({
container: "viewDiv",
map: map,
scale: 50000000,
center: [-101.17, 21.78]
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
- Map 选择地图管理图层，底图容器
- Mapview 绑定节点 位置 加入map对象
# map
- 属性
- ground：高程，Ground类型
- basemap：底图，Basemap类型
- allLayers：全部平面图层，Collection类型
- layers：全部可操作图层，Coolection类型
- 方法
- add()：添加一个图层，可指定图层位置
- addMany()：添加多个图层，可指定位置
- findLayerById()：根据ID寻找图层
- remove()：移除指定图层
- removeAll()：移除全部图层
- removeMany()：移除多个图层
- reorder()：对某个图层进行重排序（id变换）
Map有WebMap和WebScene两个子类，由于继承和多态的特征，说明视图中map属性也可以设为WebMap和WebScene。 Map图层分位三组
- Ground layers 地形图层 Map.ground
- Basemap layers 底图图层 Map.basemap
- Operational layers 业务图层 Map.layers
设置Map.ground
var map =new Map({
ground:"world-elevation"
})
自定义Ground实例
var customElevation = new ElevationLayer({
url:"xxxx"
})
var customGround = new Ground({
layers:[customElevation]
})
var map =new Map({
ground:customGround
})
map.ground一些属性
- map.ground.surfaceColor=""//设置背景色
- map.ground.opacity//透明度
- map.ground.navigationConstraint={type:"none"}//穿透地表，为stay-above则不能穿透地表
设置Map.Basemap
- 使用默认Basemap实例
var map=new Map({
//street,topo,dark-gray
basemap:"topo"
})
- 使用自定义
basemap:{
baseLayers:[
new TileLayer({url:baseUrl})
],
referenceLayers:[
new TileLayer({url:refUrl})
]
}
Map.layers
var f1 = new Feature Layer({
"https://xxxxx"
})
var g1 = new GraphicsLayer()
var map =new Map({
layers:[f1,g1]
})
# view
MapView 二维视图
- viewpoint
- extent
- center
- scale
- zoom
- extent 定义视图的显示范围
- center
- scale
- zoom
- scale
- zoom
- viewpoint
SceneView 三维视图
- camera
- viewpoint
- extent
- center
- scale
- zoom
- viewpoint
- extent
- center
- scale
- zoom
- extent
- center
- scale
- zoom
- scale
- zoom
- viewingMode
- camera
mapview.constraints 限制lods scale zoom rotation
view.constraints = {
minScale:50000,
maxScale:0,
rotationEnabled:false
}
sceneView.constraints 限制alititude carmera tilt
view.constraints = {
alititude:{
min:500,
max:20000
}
}
view.environment 指定环境可视化方面的属性
- background
- lighting
- atmosphere
- atmosphereEnabled
- starsEnabled
view - 方法
- goTo() 导航 换位置
- toMap() 把屏幕坐标转为地理坐标（屏幕坐标像素值 地理坐标经纬度）
- toScreen() 把地理坐标转为屏幕坐标
- hitTest() 返回与指定屏幕坐标相交的每个图层的最顶层要素
- when() load语法糖
- on() 事件
- Watch() 属性变化进行监听
# layers层
- TileLayer 用来加载缓存服务；缓存服务从缓存中直接获取切片，不需要动态渲染
var tileLyr =new TileLayer({
url:"https://xxx/xxx/MapServer"//切片缓存服务URL
})
- MapImageLayer 用来动态地图服务
var layer =new MapImageLayer({
url:"https://xxx/xxx/MapServer",
sublayers:[
{id:1,visible:false},
{id:2,visble:true,definitionExpression:"pop2000>100000"}
]
})
- GraphicsLayer 包含一个活多个客户端要去，没有renderer。
# 添加editor view.ui.add(editor, "top-right");
require([
"esri/WebMap",
"esri/views/MapView",
"esri/widgets/Editor"
], function(WebMap, MapView, Editor) {
// Create a map from the referenced webmap item id
let webmap = new WebMap({
portalItem: {
id: "6c5d657f1cb04a5eb78a450e3c699c2a"
}
});
let view = new MapView({
container: "viewDiv",
map: webmap
});
view.when(function() {
view.popup.autoOpenEnabled = false; //disable popups
// Create the Editor
let editor = new Editor({
view: view
});
// Add widget to top-right of the view
view.ui.add(editor, "top-right");
});
});
# arcgis应用
- 回显
- 选择范围
- 搜索
- 定位
- 热力图
# mapserver-token
var map;
var lng;
var lat;
//中心点
$.ajax({
url: getRootPath_web() + 'YqTarck/selectmaplatlong ',
type: "post",
dataType: "json",
success: function (data) {
lng = data.longitude;
lat = data.latitude;
console.log(lng,lat)
}
});
require([
"esri/Map",
"esri/views/MapView",
"esri/Basemap", //加载底图
"esri/symbols/PictureMarkerSymbol",
"esri/geometry/Polyline",
"esri/geometry/Point",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/SpatialReference",
"esri/geometry/Extent",
"esri/layers/TileLayer",
"esri/identity/IdentityManager",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/TextSymbol",
"dojo",
"dojo/ready",
"dojo/domReady!"], function (Map, MapView, Basemap,
PictureMarkerSymbol, Polyline, Point, Graphic, GraphicsLayer, SpatialReference, Extent, TileLayer, esriId, SimpleMarkerSymbol, SimpleLineSymbol, TextSymbol, dojo, ready) {
var server = "http://172.28.19.29/server82/rest/services";
var requestTokenurl = "xxx"
var xmlhttp = new XMLHttpRequest();
var token;
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
token = (JSON.parse(xmlhttp.responseText)).access_token;
esriId.registerToken({server: server, token: token});
}
};
xmlhttp.open("GET", requestTokenurl, true);
xmlhttp.send();
ready(function () {
var layer = new TileLayer({
url: "http://172.28.19.29/server82/rest/services/basemap/nxgxksldzdt/MapServer",
});
var customBasemap = new Basemap({
baseLayers: [layer],
title: "Custom Basemap",
id: "myBasemap"
});
map = new Map({
basemap: customBasemap
});
view = new MapView({
center: new Point(lng, lat, new SpatialReference({wkid: 4490})),
container: 'map',
map: map,
zoom: 6,
constraints: {minZoom: 0, rotationEnabled: false}
});
});
//放大地图并定位到点
window.setCenter = function (lng, lat, zoom) {
view.center = new Point(lng, lat, new SpatialReference({wkid: 4490}))
view.zoom = 3;
}
});
# 地图高亮
var verticesValue = []; //回显区域的经纬度
var canDisplayArea = false;
var anHmlbType = '2';
var iconClick = false; //判断点击的是否为tree左侧箭头
sendLacCiNum = '';
sendLacCi = '';
issueLongLat = '';
require([
"esri/Map",
"esri/views/MapView",
"esri/views/2d/draw/Draw",
"esri/Basemap", //加载底图
"esri/layers/FeatureLayer",
"esri/geometry/Polygon",
"esri/geometry/geometryEngine",
"esri/symbols/PictureMarkerSymbol",
"esri/geometry/Polyline",
"esri/geometry/Point",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/SpatialReference",
"esri/geometry/Extent",
"esri/layers/TileLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/TextSymbol",
"dojo",
"dojo/ready",
"dojo/domReady!"
], function (Map, MapView, Draw, Basemap, FeatureLayer, Polygon, geometryEngine,
PictureMarkerSymbol, Polyline, Point, Graphic, GraphicsLayer, SpatialReference, Extent, TileLayer, SimpleMarkerSymbol, SimpleLineSymbol, TextSymbol, dojo, ready) {
window.setCenter22 = function (lng, lat, zoom) {
view.center = new Point(lng, lat, new SpatialReference({wkid: 4490}));
view.zoom = zoom;
}
ready(function () {//添加图层标注
//行政区域高亮 start
var graphics1;
var graphics2;
var lView;
var lView2;
var highlightSelect;
var highlightSelect2;
var featureLayer2;
var featureLayer3;
//市区
featureLayer2 = new FeatureLayer({
url:"http://172.28.19.29/server/rest/services/Hosted/xzjx/FeatureServer/0",
outFields: ["*"]
});
map.add(featureLayer2, 1);
featureLayer2.opacity = 0;
//市区
featureLayer2.queryFeatures().then(function (results) {
graphics1 = results.features;
});
//市区
view.whenLayerView(featureLayer2).then(function (layerView) {
layerView.watch("updating", function (value) {
if (!value) {
lView = layerView;
layerView
.queryFeatures()
.then(function (results) {
})
.catch(function (error) {
console.error("query failed: ", error);
});
}
});
});
//区县
featureLayer3 = new FeatureLayer({
url:"http://172.28.19.29/server/rest/services/Hosted/xzjx/FeatureServer/1",
outFields: ["*"]
});
map.add(featureLayer3, 2);
featureLayer3.opacity = 0;
//区县
featureLayer3.queryFeatures().then(function (results) {
graphics2 = results.features;
});
//区县
view.whenLayerView(featureLayer3).then(function (layerView) {
layerView.watch("updating", function (value) {
if (!value) {
lView2 = layerView;
layerView
.queryFeatures()
.then(function (results) {
})
.catch(function (error) {
});
}
});
});
//行政区域高亮 end
var image = {
type: 'picture-marker',
url: 'http://localhost:65022/images/电子地图图标/炼化（故障）.png',
width: '32px',
height: '32px',
};
//设置点的位置
var position = {
type: 'point',
longitude: 98.01,
latitude: 33.80,
};
//将点的样式和位置放在Graphic里面
var Graphic1 = new Graphic({
geometry: position,
symbol: image,
});
//先清空回显的区域模板
view.graphics.removeAll();//清楚之前的绘制
//显示图标
view.graphics.add(Graphic1);
//添加工具(点面线等)
var highlight;
view.on("click", function (event) {
if (highlight) {
highlight.remove();
}
view.hitTest(event).then(function (response) {
if (response.results[0]) {
var graphic = response.results[0].graphic;
console.log(graphic);
view.whenLayerView(graphic.layer).then(function (lyrView) {
highlight = lyrView.highlight(graphic);
})
}
})
});
view.ui.add("area-button", "top-left");//添加绘制面按钮，自定义UI
view.ui.add("rectangle-button", "top-left");//添加绘制面按钮，自定义UI
var polySym = {
type: "simple-fill",
color: [140, 140, 222, 0.5],
outline: {
color: [0, 0, 0, 0.5],
width: 2
}
};
view.when(function () {
var draw = new Draw({
view: view
});
//监听区域模板切换事件，在地图上回显区域
layui.use(['form'], function () {
var form = layui.form;
form.on('select(qymb)', function (data) {
//清空高亮的行政区域
featureLayer2.opacity = 0;
featureLayer3.opacity = 0;
//可回显地图上的区域
canDisplayArea = true; //可以回显地图上的区域
$.ajax({
url: getRootPath_web() + 'MessageIssue/getList',
data: {id: data.value},
type: "post",
dataType: "json",
success: function (data) {
verticesValue = data.data.longLat;
view.center = new Point( data.data.longLat[0][0], data.data.longLat[0][1], new SpatialReference({wkid: 4490})); //让区域模板范围居中
view.zoom = 6;
}
})
var aa = setInterval(function () {
if (canDisplayArea === true) {
view.graphics.removeAll();//清楚之前的绘制
if (verticesValue.length === 2) {
enableCreateRectangle(draw, view); //可回显矩形
clearInterval(aa);
} else {
enableCreateArea(draw, view); //可回显多边形
clearInterval(aa);
}
}
});
});
});
//绑定面按钮绘制事件
var drawAreaButton = document.getElementById("area-button");
drawAreaButton.onclick = function () {
view.graphics.removeAll();//清楚之前的绘制
canDisplayArea = false;
enableCreateArea(draw, view);
};
//绑定矩形按钮绘制事件
var drawRectangleButton = document.getElementById("rectangle-button");
drawRectangleButton.onclick = function () {
canDisplayArea = false;
enableCreateRectangle(draw, view);
};
});
//开始监听画面
function enableCreateArea(draw, view) {
var action = draw.create("polygon", {
mode: "click"//点击方式加点
});
// 获取焦点
view.focus();
// 顶点添加事件
action.on("vertex-add", createPolygon);
//顶点移除事件
action.on("vertex-remove", createPolygon);
// 鼠标移动事件
action.on("cursor-update", createPolygon);
// 绘制完成事件
action.on("draw-complete", createPolygon);
}
function enableCreateRectangle(draw, view) {
var action = draw.create("rectangle", {
mode: "click"//点击方式加点
});
// 获取焦点
view.focus();
//顶点移除事件
action.on("vertex-remove", createRectangle);
// 鼠标移动事件
action.on("cursor-update", createRectangle);
// 绘制完成事件
action.on("draw-complete", createRectangle);
}
//根据点坐标生成新的线
function createPolygon(event) {
var createPolygonData = [];
//获取所有顶点
if (canDisplayArea === true) {
vertices = verticesValue;
} else {
vertices = event.vertices;
}
//清除之前绘制
view.graphics.removeAll();
var polygon = new Polygon({
hasZ: false,
hasM: false,
rings: [vertices],
spatialReference: view.spatialReference
});
// 生成绘制的图形
var graphic = new Graphic({
geometry: polygon,
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [51, 51, 204, 0.4],
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "white",
width: 1
}
}
});
// 将绘制的图形添加到view
view.graphics.add(graphic);
if (event.type == "draw-complete") {
datalLine(vertices);
function datalLine(data) {
for (var i = 0; i < data.length; i++) {
var createPolygonDataLength = {};
createPolygonDataLength.lng = data[i][0];
createPolygonDataLength.lat = data[i][1];
createPolygonData.push(createPolygonDataLength)
}
issueLongLat = JSON.stringify(createPolygonData);
console.log(issueLongLat);
return createPolygonData;
}
}
}
//根据点坐标生成新的矩形
function createRectangle(event) {
//获取所有顶点
if (canDisplayArea === true) {
vertices = verticesValue;
canDisplayArea = false;
} else {
vertices = event.vertices;
}
//两点画矩形
if (vertices.length < 2) {
return
}
var rings = [vertices[0], [vertices[0][0], vertices[1][1]], vertices[1], [vertices[1][0], vertices[0][1]]];
//清除之前绘制
view.graphics.removeAll();
var polygon = new Polygon({
hasZ: false,
hasM: false,
rings: [rings],
spatialReference: view.spatialReference
});
// 生成绘制的图形
var graphic = new Graphic({
geometry: polygon,
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [51, 51, 204, 0.4],
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "white",
width: 1
}
}
});
// 将绘制的图形添加到view
view.graphics.add(graphic);
if (event.type == "draw-complete") {
// createBuffer(polygon);
//最北纬度
var lat_n = vertices[0][0];
//最西经度
var lng_w = vertices[0][1];
//最南纬度
var lat_s = vertices[1][0];
//最东纬度
var lng_e = vertices[1][1];
var j_max = lat_n > lat_s ? lat_n : lat_s;
var j_min = lat_n < lat_s ? lat_n : lat_s;
var w_max = lng_w > lng_e ? lng_w : lng_e;
var w_min = lng_w < lng_e ? lng_w : lng_e;
var issueLongLat1 = [
{
lng: j_min,
lat: w_max
}, {
lng: j_max,
lat: w_min
}]
issueLongLat = JSON.stringify(issueLongLat1)
//接口
$.ajax({
url: getRootPath_web() + 'MessageIssue/getLacCi.shtml',
data: {
w_max: w_max,
j_min: j_min,
w_min: w_min,
j_max: j_max
},
type: "post",
dataType: "json",
beforeSend: function () {
var index = layer.load(1, { // 此处1没有意义，随便写个东西
icon: 2, // 0~2 ,0比较好看
shade: [0.5, 'black'], // 黑色透明度0.5背景
});
},
success: function (data) {
//获取人数
sendLacCiNum = data.data;
}
});
}
}
//行政区域高亮 start
layui.use(["tree"], function () {
var tree = layui.tree;
function intiTree() {
$.ajax({
//url: '../../data/tree1.json',
url: '../../data/treeCountry.json',
type: "get",
data: {},
dataType: "json",
success: function (data) {
tree.render({
elem: '#tree_container'
, data: data
, showLine: false //是否开启连接线
,onlyIconControl: true
, click: function (obj) {
var data = obj.data; //获取当前点击的节点数据
$('#tree_container').hide();
$('#xzqy').val(data.title);
let longitude=data.longitude;
let latitude=data.latitude;
//setCenter22(longitude, latitude, 6);
// initChartOption11(region);
$(obj.elem).css({
'background': '#84b4e5'
});
view.graphics.removeAll();//清楚之前的绘制
//画行政区域 start
let titlename = data.title;
console.log(titlename);
if (titlename == '宁夏回族自治区') {
featureLayer2.opacity = 0;
featureLayer3.opacity = 0;
} else {
var country = '';
if (titlename.indexOf("市") > -1 || titlename.indexOf("区") > -1||titlename.indexOf("县") > -1 ){
country = titlename.substring(0, titlename.length-1);
}
console.log(data.index);
if (data.index) { //市级
console.log('市级');
featureLayer2.opacity = 0.5;
featureLayer3.opacity = 0;
var result;
console.log(graphics1)
if (graphics1.length > 0) {
for (let i = 0; i < graphics1.length; i++) {
if (titlename == graphics1[i].attributes.xzqmc) {
result = graphics1[i];
}
}
if (result) {
view.goTo(result.geometry.extent.expand(2))
.then(function () {
if (highlightSelect) {
highlightSelect.remove();
}
highlightSelect = lView.highlight(result);
})
.catch(function (error) {
if (error.name != "AbortError") {
console.error(error);
}
});
}
}
} else {
featureLayer2.opacity = 0;
featureLayer3.opacity = 0.5;
var result2;
if (graphics2.length > 0) {
for (let i = 0; i < graphics2.length; i++) {
if (titlename == graphics2[i].attributes.xjxzqmc) {
result2 = graphics2[i];
}
}
if (result2) {
view.goTo(result2.geometry.extent.expand(2))
.then(function () {
if (highlightSelect2) {
highlightSelect2.remove();
}
highlightSelect2 = lView2.highlight(result2);
})
.catch(function (error) {
if (error.name != "AbortError") {
console.error(error);
}
});
}
}
}
}
//画行政区域 end
}
});
}
});
}
});
//行政区域高亮 end,点击地区行政区域名称
layui.use(["tree"], function () {
var tree = layui.tree;
function intiTree() {
$.ajax({
url: '../../data/tree1.json',
type: "get",
data: {},
dataType: "json",
success: function (data) {
tree.render({
elem: '#tree_container1'
, data: data
, showLine: false //是否开启连接线
,onlyIconControl: true
, click: function (obj) {
var data = obj.data; //获取当前点击的节点数据
$('#newxzqy').val(data.title);
let longitude=data.longitude;
let latitude=data.latitude;
$(obj.elem).css({
'background': '#84b4e5'
});
view.graphics.removeAll();//清楚之前的绘制
var country = '';
if (data.title.indexOf("市") > -1 || data.title.indexOf("区") > -1|| data.title.indexOf("县") > -1){
country = data.title.substring(0, data.title.length-1);
}
$.ajax({
type: "post",
async: true,
url: getRootPath_web() + '/population/getAreaCount',
data: {county: country},
dataType: "json",
beforeSend: function () {
},
success: function success(data1) {
}
});
//画行政区域 start
let titlename = data.title;
console.log(titlename);
if (titlename == '宁夏回族自治区') {
featureLayer2.opacity = 0;
featureLayer3.opacity = 0;
} else {
var country = '';
if (titlename.indexOf("市") > -1 || titlename.indexOf("区") > -1||titlename.indexOf("县") > -1 ){
country = titlename.substring(0, titlename.length-1);
}
console.log(data.index);
if (data.index) { //市级
console.log('市级');
featureLayer2.opacity = 0.5;
featureLayer3.opacity = 0;
var result;
if (graphics1.length > 0) {
for (let i = 0; i < graphics1.length; i++) {
if (titlename == graphics1[i].attributes.xzqmc) {
result = graphics1[i];
}
}
if (result) {
view.goTo(result.geometry.extent.expand(2))
.then(function () {
if (highlightSelect) {
highlightSelect.remove();
}
highlightSelect = lView.highlight(result);
})
.catch(function (error) {
});
}
}
}
}
}
});
}
});
}
、
});
//上传号码列表
var uploadInst = upload.render({
elem: '#uploadFilehmlb', //绑定元素
url: getRootPath_web() + 'YjMessageIssue/import?statue=' + 1, //上传接口
// auto: false,
accept: 'file',
// bindAction: '#submit',
// size: 10240,//限制文件大小10M
multiple: false,
before: function (obj) {
layer.load();
},
done: function (data, index, upload) {//上传完毕回调
layer.closeAll('loading');
}
, error: function () {//请求异常回调
layer.closeAll('loading');
layer.msg('网络异常，请稍后重试！');
}
});
})
});
# 地图切换和热力图
var map;
var lng;
var lat;
//中心点
$.ajax({
url: getRootPath_web() + 'YqTarck/selectmaplatlong ',
type: "post",
dataType: "json",
success: function (data) {
lng = data.longitude;
lat = data.latitude;
}
});
layui.config({
base: '../js/',
version: new Date().getTime()
}).use(['table', 'jquery', "form", "laydate", "upload", "tree"], function () {
var table = layui.table
, $ = layui.jquery
, form = layui.form
, laydate = layui.laydate
, layer = layui.layer
, upload = layui.upload
, tree = layui.tree;
var h = $(window).height();
var w = $(window).width();
var region = 1; //区域，点击树，更新地图渲染
function setHistoryHotmapLayData(){
//时间选择器
laydate.render({
elem: '#switchbtns-history-hotmap-time'
,type: 'time'
});
}
setHistoryHotmapLayData();
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/CSVLayer",
"esri/widgets/Legend",
"esri/layers/FeatureLayer",
"esri/layers/TileLayer"
], function (Map, MapView, CSVLayer, Legend, FeatureLayer,TileLayer) {
var TileLayer1;
var TileLayer2;
//卫星图
var TileLayer1 = new TileLayer({
url: "http://172.28.19.29/server82/rest/services/basemap/nxgxk21myx/MapServer"
});
map.add(TileLayer1, 1);
//卫星图上的建筑标识
var TileLayer2 = new TileLayer({
url: "http://172.28.19.29/server82/rest/services/basemap/nxgxkyxdzdt/MapServer"
});
map.add(TileLayer2, 2);
TileLayer1.opacity = 0;
TileLayer2.opacity = 0;
//地图矢量和影像图切换点击事件
$(".Mapswitchbox").on("click", "div", function (e) {
e.stopPropagation();
let that = $(this);
$(".Mapswitchbox-img").removeClass('Mapswitchbox-activeimg');
$(".Mapswitchbox-p").removeClass('Mapswitchbox-activep');
that.find('.Mapswitchbox-img').addClass('Mapswitchbox-activeimg');
that.find('.Mapswitchbox-p').addClass('Mapswitchbox-activep');
if (that.attr('data-index') == 1) { //矢量
TileLayer1.opacity = 0;
TileLayer2.opacity = 0;
} else { //影像
TileLayer1.opacity = 1;
TileLayer2.opacity = 1;
}
});
//地图切换滑入滑出事件
$('.Mapswitchbox').on({
mouseenter: function () {
console.log('滑入');
$(this).find('div').eq(1).css({'right': '98px'});
},
mouseleave: function () {
console.log('滑出');
$(this).find('div').eq(1).css('right', '10px');
}
});
window.setCenter22 = function (lng, lat, zoom) {
view.center = new Point(lng, lat, new SpatialReference({wkid: 4490}));
view.zoom = zoom;
};
var graphics;
var graphics2;
var lView;
var lView2;
var highlightSelect;
var highlightSelect2;
var featureLayer2;
var featureLayer3;
var loadindex = null;
var hotlayer;
//热力图ajax
function hotmapajax(county, operation) {
if (!county || county == "宁夏回族自治区") {
county = "";
}
if(county&&county != "宁夏回族自治区"){
county=county.substring(0,county.length-1)
}
hour = $('#switchbtns-history-hotmap-time').val();
if (hour != null && hour.length > 0 && "" != hour){
hour = hour.substring(0,2);
if ("0" == hour.substring(0,1)){
hour = hour.substring(1);
}
}
$.ajax({
url: getRootPath_web() + 'population/getNewDatas?county=' + county +'&hour='+ hour,
type: "get",
success: function (data) {
console.log(data);
var datas = data.data;
var renderer = {
type: "heatmap",
colorStops: [
{ratio: 0, color: "rgba(255,255,255,0)"},
// {ratio: 0.1, color: "#97a7d3"},
{ratio: 0.2, color: "#7f96d9"},
{ratio: 0.4, color: "#65ee2f"},
{ratio: 0.7, color: "#e6f536"},
// {ratio: 0.7, color: "orange"},
{ratio: 1, color: "#fe0000"}
],
maxPixelIntensity: 270,
minPixelIntensity: 1
};
hotlayer = new CSVLayer({
url: "../../data/csvFile.csv",
longitudeField: "longitude",
latitudeField: "latitude",
renderer: renderer
});
map.add(hotlayer);
// 市区
featureLayer2 = new FeatureLayer({
url:"http://172.28.19.29/server/rest/services/Hosted/xzjx/FeatureServer/0",
outFields: ["*"]
});
map.add(featureLayer2, 1);
featureLayer2.opacity = 0;
//市区
featureLayer2.queryFeatures().then(function (results) {
graphics = results.features;
});
//市区
view.whenLayerView(featureLayer2).then(function (layerView) {
layerView.watch("updating", function (value) {
if (!value) {
lView = layerView;
layerView
.queryFeatures()
.then(function (results) {
console.log(results)
})
.catch(function (error) {
console.error("query failed: ", error);
});
}
});
});
//区县
featureLayer3 = new FeatureLayer({
url:"http://172.28.19.29/server/rest/services/Hosted/xzjx/FeatureServer/1",
outFields: ["*"]
});
map.add(featureLayer3, 2);
featureLayer3.opacity = 0;
featureLayer3.queryFeatures().then(function (results) {
graphics2 = results.features;
});
//区县
view.whenLayerView(featureLayer3).then(function (layerView) {
layerView.watch("updating", function (value) {
if (!value) {
lView2 = layerView;
layerView
.queryFeatures()
.then(function (results) {
})
.catch(function (error) {
console.error("query failed: ", error);
});
}
});
});
layer.close(loadindex);
}
});
}
hotmapajax();
});
})
;
# 回显和绘制图标、搜索
var listTableDs;
var listTable;
var listTable1;
var listTable2;
var tjTk; //新增弹框
var tempArr = {};
var temObj = {};
var lng;
var lat;
var alarmN = 1;
var loadindex=null;
//1 区域模板 2白名单
var shezhistatus=1;
var bjbmdid;
var addresslng,addresslat;
//中心点
$.ajax({
url: getRootPath_web() + 'YqTarck/selectmaplatlong ',
type: "post",
dataType: "json",
success: function (data) {
lng = data.longitude;
lat = data.latitude;
}
});
layui.config({
base: '../js/',
version: new Date().getTime()
}).use(['table', 'jquery', "form", "laydate", "upload", "tree"], function () {
var table = layui.table
, $ = layui.jquery
, form = layui.form
, laydate = layui.laydate
, layer = layui.layer
, upload = layui.upload
, tree = layui.tree;
var h = $(window).height();
var w = $(window).width();
var networkN = "5G";
var dominN = "0,1,2";
var alarmN = "0,1";
require(["esri/Map",
"esri/views/MapView",
"esri/Basemap", //加载底图
"esri/views/2d/draw/Draw",
"esri/geometry/Polygon",
"esri/symbols/PictureMarkerSymbol",
"esri/geometry/Point",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/SpatialReference",
"esri/layers/FeatureLayer",
"esri/geometry/Extent",
"esri/layers/TileLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/TextSymbol",
"esri/symbols/Font",
'esri/tasks/FindTask',
'esri/tasks/support/FindParameters',
"dojo",
"dojo/ready",
"dojo/domReady!"], function (
Map,MapView,Basemap,Draw,Polygon,PictureMarkerSymbol,
Point,Graphic,GraphicsLayer,SpatialReference,FeatureLayer,Extent,
TileLayer,SimpleMarkerSymbol, SimpleLineSymbol, TextSymbol, Font,FindTask,FindParameters,dojo, ready){
//创建搜索的地图服务和指定图层
var find = new FindTask({
url: "http://172.28.19.29/server82/rest/services/NXSTSJ/nxPOI/MapServer" });
document.getElementById("inputcontent").onkeydown=function(e){
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
let val =document.getElementById("inputcontent").value;
doFind(val)
}
}
var params = new FindParameters({
layerIds: [0],
});
var addressdiv=document.getElementById("displayAddress");
addressdiv.addEventListener("click",function(e){
console.log()
if(e.target.className="children"){
document.getElementById("inputcontent").value=e.target.innerHTML;
var arr1 =e.target.id.split("-")
console.log(arr1)
addresslng=arr1[0]
addresslat=arr1[1]
arr1=null;
console.log(addresslng)
if(addresslng&&addresslat){
view.goTo({
center: new Point(addresslng,addresslat, new SpatialReference({wkid: 4490}))
}).catch(e=>{
console.log(e)
})
var newPoint =new Point(addresslng,addresslat, new SpatialReference({wkid: 4490}))
view.popup.open({
title: "查询位置",
content:`经度${addresslng},纬度${addresslat}`,
location: newPoint
});
view.zoom=10;
addressdiv.innerHTML="";
addresslng="";
addresslat=""
}else{
layer.alert("缺少经纬度，无法定位")
}
}
})
function doFind(val) {
//设定搜索为文本搜索并获取搜索关键字
loadindex = layer.load(1, { // 此处1没有意义，随便写个东西
icon: 2, // 0~2 ,0比较好看
shade: [0.5, 'black'], // 黑色透明度0.5背景
});
params.searchText =val.trim();
//按参数设定执行查找
find.execute(params)
.then(showResults)//正确返回执行函数
.catch(rejectedPromise);//错误返回执行函数
}
//获取表格要显示的地方
// var resultsTable = document.getElementById("tbl");
//正确请求，处理返回结果
function showResults(response) {
console.log(response)
addressdiv.innerHTML="";
var arr=[]
if(response&&response.results){
var fragment=document.createDocumentFragment()
if(response.results.length>10){
arr=response.results.slice(0,20)
}else{
arr=response.results
}
for(let i=0;i<arr.length;i++){
var divs =document.createElement("div");
divs.className="children";
divs.id=`${arr[i].feature.attributes.LON}-${arr[i].feature.attributes.LAT}`
divs.innerHTML=`${arr[i].value}`
divs.title=`${arr[i].value}`
fragment.appendChild(divs)
}
addressdiv.appendChild(fragment)
}
layer.close(loadindex);
}
//请求失败，打印错误信息
function rejectedPromise(error) {
layer.close(loadindex);
console.error("msg: ", error);
}
function all(){
var resdata={};
var hxid;
var txxxid;
var gLayer = new GraphicsLayer();
map.add(gLayer);
//填写数据接口
$.ajax({
url: getRootPath_web() + 'FenceUser/select' ,
type: "post",
success: function (data) {
console.log(data)
var right =document.querySelector("#right")
right.innerHTML="";
var fragment1=document.createDocumentFragment()
var len =data.data.length;
resdata=data.data;
hxid=data.data[0].id;
table1();
huixian()
for(let i=0;i<len;i++){
var div1=document.createElement("div")
div1.setAttribute("datanum", data.data[i].id);
div1.innerHTML=`<span>${data.data[i].tempName}</span><i>${data.data[i].usercount}</i>`
fragment1.appendChild(div1)
}
right.appendChild(fragment1)
}
});
//画图标
window.drawPoint = function(lng,lat,count,pointFileid,icon){
var popupTemplate = {
title: "信息",
content:`xxx1`
};
var symbol = {
type: "picture-marker",
url: icon,
width: "36px",
height: "36px",
};
var point = new Point(lng,lat);
var gp = new Graphic({
geometry: point,
symbol,
popupTemplate
})
gLayer.graphics.add(gp);//添加到图层中显示
};
function huixian(){
let i;
resdata.forEach((el,index)=>{
if(el.id==hxid){
i=index;
}
})
console.log(resdata[i])
$("#inmunspan").html(resdata[i].usercount)
$("#addressname").html(resdata[i].tempName)
let centerlng = resdata[i].longLat[0];
view.center = new Point(centerlng[0], centerlng[1], new SpatialReference({wkid: 4490}));
view.zoom = 6;
var draw = new Draw({
view: view
});
// 一个for循环
let len1 =resdata[i].longlatcount.length;
let vdata = resdata[i].longlatcount;
for(let j=0;j<len1;j++){
var iconUrl = "../../img/crz1.png";
drawPoint(vdata[j].longitude,vdata[j].latitude,vdata[j].usercount, `k${hxid}_${j}`,iconUrl)
}
if (resdata[i].longLat.length == 2) {//可回显矩形
enableCreateRectangle(draw, view, resdata[i].longLat);//可回显矩形
} else {//可回显多边形
enableCreateArea(draw, view, resdata[i].longLat); //可回显多边形
}
function enableCreateArea(draw, view, lonlatdata) {
createPolygon(lonlatdata, view)
}
function enableCreateRectangle(draw, view, lonlatdata) {
createRectangle(lonlatdata, view)
}
//根据点坐标生成新的矩形
function createRectangle(verticesValue, view) {
var vertices = verticesValue;
//两点画矩形
if (vertices.length < 2) {
return
}
var rings = [vertices[0], [vertices[0][0], vertices[1][1]], vertices[1], [vertices[1][0], vertices[0][1]]];
//清除之前绘制
view.graphics.removeAll();
var polygon = new Polygon({
hasZ: false,
hasM: false,
rings: [rings],
spatialReference: view.spatialReference
});
// 生成绘制的图形
var graphic = new Graphic({
geometry: polygon,
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [51, 51, 204, 0.4],
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "white",
width: 1
}
}
});
// 将绘制的图形添加到view
view.graphics.add(graphic);
}
//根据点坐标生成新的线
function createPolygon(verticesValue, view) {
var vertices = verticesValue;
//清除之前绘制
view.graphics.removeAll();
var polygon = new Polygon({
hasZ: false,
hasM: false,
rings: [vertices],
spatialReference: view.spatialReference
});
// 生成绘制的图形
var graphic = new Graphic({
geometry: polygon,
symbol: {
type: "simple-fill",
color: [51, 51, 204, 0.4],
style: "solid",
outline: {
color: "white",
width: 1
}
}
});
// 将绘制的图形添加到view
view.graphics.add(graphic);
}
}
}
//区域模板表格渲染
function table3(val=""){
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#table2'
,url:getRootPath_web() +`FenceArea/select?keyword=${val}`
,cols: [[
{field:'xuhao', width:80, title: '序号', sort: true,type:'numbers'},
{field:'tempName', title: '电子围栏名称'},
{field: '', title: '操作', toolbar: '#qyglsz', width: 150}
]]
,page: true
});
//点击详情按钮
table.on('tool(table2)', function (obj) {
console.log(obj.data)
let ids=obj.data.id;
if(obj.event==="bj"){
localStorage.setItem("vvid",ids)
layer.open({
type: 2,
title: "编辑",
area: [w*90/100 + 'px', h*90/100 + 'px'],
btn: 0,
id: 'qymbxgtk',
content: 'areaTemplate.html',
end:function () {
}
})
}else if(obj.event==="sc"){
layer.confirm("是否删除本条信息",{
btn: ['确定', '取消']
}, function () {
$.ajax({
url: getRootPath_web() + `FenceArea/delete?id=${ids}`,
type: "post",
success: function (data) {
console.log(data)
table3()
layer.alert("删除成功")
}
});
layer.closeAll('dialog');
}, function(){
})
}
});
});
}
//查询按钮
$("#szchaxunbtn").click(function(){
let val = $("#szchaxun").val()
if(shezhistatus===1){
table3(val)
}else if(shezhistatus===2){
table2(val)
}
})
//新增按钮
$("#szxz").click(function(){
if(shezhistatus===1){
localStorage.setItem("vvid","")
layer.open({
type: 2,
title: "新增",
area: [w*90/100 + 'px', h*90/100 + 'px'],
btn: 0,
id: 'qymbxztk',
content: 'areaTemplate.html',
end:function () {
}
})
}else if(shezhistatus===2){
$("#addbmd").css("display","block")
}
})
});
});
# 选择范围
var canDisplayArea = false;
var operateType = localStorage.getItem('operateType'); //'0'新增时不回显区域，'1'编辑时回显区域
//修改区域模板需要传的Id
var areaupdateid = localStorage.getItem('areaupdateid');
var districtList;
var sendEci;
var filestate=1;
sendLacCiNum = '';
sendLacCi = '';
issueLongLat = '';
layui.config({
base: '../js/',
version: new Date().getTime()
}).use(['table', 'jquery', "form", "laydate", "upload", "tree"], function () {
var table = layui.table
, $ = layui.jquery
, form = layui.form
, laydate = layui.laydate
, layer = layui.layer
, upload = layui.upload
, tree = layui.tree;
var h = $(window).height();
var w = $(window).width();
require([
"esri/Map",
"esri/views/MapView",
"esri/views/2d/draw/Draw",
"esri/Basemap", //加载底图
"esri/geometry/Polygon",
"esri/geometry/geometryEngine",
"esri/symbols/PictureMarkerSymbol",
"esri/geometry/Polyline",
"esri/geometry/Point",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/SpatialReference",
"esri/geometry/Extent",
"esri/layers/TileLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/TextSymbol",
"dojo",
"dojo/ready",
"dojo/domReady!"
], function (Map, MapView, Draw, Basemap, Polygon, geometryEngine,
PictureMarkerSymbol, Polyline, Point, Graphic, GraphicsLayer, SpatialReference, Extent, TileLayer, SimpleMarkerSymbol, SimpleLineSymbol, TextSymbol, dojo, ready) {
ready(function () {//添加图层标注
var vvstatus;
var vvid =localStorage.getItem("vvid");
console.log(vvid)
if(vvid){
//更新
vvstatus=1;
$("#pull1").css("display","block")
$("#pull").css("display","none")
}else{
//新增
vvstatus=0;
$("#pull1").css("display","none")
$("#pull").css("display","block")
}
var image = {
type: 'picture-marker',
url: 'http://localhost:65022/images/电子地图图标/炼化（故障）.png',
width: '32px',
height: '32px',
};
//设置点的位置
var position = {
type: 'point',
longitude: 98.01,
latitude: 33.80
};
//将点的样式和位置放在Graphic里面
var Graphic1 = new Graphic({
geometry: position,
symbol: image
});
//先清空回显的区域模板
view.graphics.removeAll();//清楚之前的绘制
//显示图标
view.graphics.add(Graphic1);
//添加工具(点面线等)
var highlight;
view.on("click", function (event) {
if (highlight) {
highlight.remove();
}
view.hitTest(event).then(function (response) {
if (response.results[0]) {
var graphic = response.results[0].graphic;
view.whenLayerView(graphic.layer).then(function (lyrView) {
highlight = lyrView.highlight(graphic);
})
}
})
});
view.ui.add("area-button", "top-left");//添加绘制面按钮，自定义UI
view.ui.add("rectangle-button", "top-left");//添加绘制面按钮，自定义UI
var polySym = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [140, 140, 222, 0.5],
outline: {
color: [0, 0, 0, 0.5],
width: 2
}
};
view.when(function () {
var draw = new Draw({
view: view
});
//编辑时，可回显地图区域
canDisplayArea = true;
verticesValue = window.parent.verticesValue;
console.log(verticesValue);
if (verticesValue) {
var aa = setInterval(function () {
if (canDisplayArea === true && operateType === '1') {
view.graphics.removeAll();//清楚之前的绘制
if (verticesValue.length === 2) {
enableCreateRectangle(draw, view); //可回显矩形
clearInterval(aa);
} else {
enableCreateArea(draw, view); //可回显多边形
clearInterval(aa);
}
}
});
}
//绑定面按钮绘制事件
var drawAreaButton = document.getElementById("area-button");
drawAreaButton.onclick = function () {
view.graphics.removeAll();//清楚之前的绘制
canDisplayArea = false;
enableCreateArea(draw, view);
};
//绑定矩形按钮绘制事件
var drawRectangleButton = document.getElementById("rectangle-button");
drawRectangleButton.onclick = function () {
canDisplayArea = false;
enableCreateRectangle(draw, view);
};
//点击取消
$("#cancel_btn").click(function () {
view.graphics.removeAll();//清楚之前的绘制
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
$('#tamplate_form')[0].reset();
});
});
//开始监听画面
function enableCreateArea(draw, view) {
var action = draw.create("polygon", {
mode: "click"//点击方式加点
});
// 获取焦点
view.focus();
// 顶点添加事件
action.on("vertex-add", createPolygon);
//顶点移除事件
action.on("vertex-remove", createPolygon);
// 鼠标移动事件
action.on("cursor-update", createPolygon);
// 绘制完成事件
action.on("draw-complete", createPolygon);
}
function enableCreateRectangle(draw, view) {
var action = draw.create("rectangle", {
mode: "click"//点击方式加点
});
// 获取焦点
view.focus();
//顶点移除事件
action.on("vertex-remove", createRectangle);
// 鼠标移动事件
action.on("cursor-update", createRectangle);
// 绘制完成事件
action.on("draw-complete", createRectangle);
}
//根据点坐标生成新的线
function createPolygon(event) {
var createPolygonData = [];
//获取所有顶点
if (canDisplayArea === true) {
vertices = verticesValue;
} else {
vertices = event.vertices;
}
//清除之前绘制
view.graphics.removeAll();
var polygon = new Polygon({
hasZ: false,
hasM: false,
rings: [vertices],
spatialReference: view.spatialReference
});
// 生成绘制的图形
var graphic = new Graphic({
geometry: polygon,
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [51, 51, 204, 0.4],
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "white",
width: 1
}
}
});
// 将绘制的图形添加到view
view.graphics.add(graphic);
if (event.type == "draw-complete") {
// createBuffer(polygon);
datalLine(vertices);
function datalLine(data) {
for (var i = 0; i < data.length; i++) {
var createPolygonDataLength = {};
createPolygonDataLength.lng = data[i][0];
createPolygonDataLength.lat = data[i][1];
createPolygonData.push(createPolygonDataLength)
}
issueLongLat = JSON.stringify(createPolygonData);
districtList=createPolygonData;
console.log(createPolygonData)
//接口
$.ajax({
url: getRootPath_web() + 'MessageIssue/getLacCi.shtml',
data: {"data": JSON.stringify(createPolygonData)},
type: "post",
dataType: "json",
success: function (data) {
sendEci = data.data;
sendEci=JSON.stringify(sendEci);
sendEci=sendEci.substring(2,sendEci.length-2)
console.log(sendEci)
}
});
// return createPolygonData;
}
}
}
//根据点坐标生成新的矩形
function createRectangle(event) {
//获取所有顶点
if (canDisplayArea === true) {
vertices = verticesValue;
} else {
vertices = event.vertices;
}
//两点画矩形
if (vertices.length < 2) {
return
}
var rings = [vertices[0], [vertices[0][0], vertices[1][1]], vertices[1], [vertices[1][0], vertices[0][1]]];
//清除之前绘制
view.graphics.removeAll();
var polygon = new Polygon({
hasZ: false,
hasM: false,
rings: [rings],
spatialReference: view.spatialReference
});
// 生成绘制的图形
var graphic = new Graphic({
geometry: polygon,
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [51, 51, 204, 0.4],
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "white",
width: 1
}
}
});
// 将绘制的图形添加到view
view.graphics.add(graphic);
if (event.type == "draw-complete") {
// createBuffer(polygon);
//最北纬度
var lat_n = vertices[0][0];
//最西经度
var lng_w = vertices[0][1];
//最南纬度
var lat_s = vertices[1][0];
//最东纬度
var lng_e = vertices[1][1];
var j_max = lat_n > lat_s ? lat_n : lat_s;
var j_min = lat_n < lat_s ? lat_n : lat_s;
var w_max = lng_w > lng_e ? lng_w : lng_e;
var w_min = lng_w < lng_e ? lng_w : lng_e;
var issueLongLat1 = [
{
lng: j_min,
lat: w_max
}, {
lng: j_max,
lat: w_min
}]
issueLongLat = JSON.stringify(issueLongLat1)
districtList=issueLongLat1;
//接口
$.ajax({
url: getRootPath_web() + 'MessageIssue/getLacCi.shtml',
data: {
w_max: w_max,
j_min: j_min,
w_min: w_min,
j_max: j_max
},
type: "post",
dataType: "json",
success: function (data) {
sendEci = data.data;
sendEci=JSON.stringify(sendEci);
sendEci=sendEci.substring(2,sendEci.length-2)
console.log(sendEci)
}
});
}
}
if(!vvstatus){
var uploadInst = upload.render({
elem: '#glybtn', //绑定元素
url: getRootPath_web() + 'FenceArea/add', //上传接口
auto: false,
accept: 'file',
bindAction: '#xzqymb_btn',
size: 52428800,//限制文件大小50M
multiple: false,
before: function (obj) {
layer.load();
console.log(obj)
console.log("开始上传了")
if($("#templateName").val()){
let arr=[]
if($("#tzgly").is(':checked')){
arr.push("1")
}
if($("#tzcrz").is(':checked')){
arr.push("2")
}
console.log(JSON.stringify(sendEci))
filestate=1;
this.data={
tempName:$("#templateName").val(),
smsNotice:arr.join(","),
adminSms:$("#glytext").val(),
intruderSms :$("#crztext").val(),
districtList:JSON.stringify(districtList),
sendEci
}
console.log(this.data)
// this.data.params=JSON.stringify(formobj)
}else{
layer.alert("请填写完所有信息后再确认！")
}
},
done: function (data, index, upload) {//上传完毕回调
console.log(data)
layer.closeAll('loading');
layer.alert("提交成功");
localStorage.setItem("vvid","")
setTimeout(function(){
layer.closeAll();
window.parent.location.reload(); //刷新父页面
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index); // 关闭layer
},2000)
}
, error: function (err) {
layer.closeAll('loading');
}
});
}else{
$.ajax({
url: getRootPath_web() + `FenceArea/queryById?id=${vvid}` ,
type: "post",
success: function (data) {
console.log(data)
var data=data.data;
$("#templateName").val(data.tempName)
sendEci=data.sendEci;
districtList=data.districtList;
$("#glytext").val(data.adminSms)
$("#crztext").val(data.intruderSms)
let centerlng = data.longLat[0];
view.center = new Point(centerlng[0], centerlng[1], new SpatialReference({wkid: 4490}));
view.zoom = 6;
var draw = new Draw({
view: view
});
if (data.longLat.length == 2) {//可回显矩形
enableCreateRectangle(draw, view, data.longLat);//可回显矩形
} else {//可回显多边形
enableCreateArea(draw, view, data.longLat); //可回显多边形
}
function enableCreateArea(draw, view, lonlatdata) {
createPolygon(lonlatdata, view)
}
//根据点坐标生成新的线
function createPolygon(verticesValue, view) {
var vertices = verticesValue;
//清除之前绘制
view.graphics.removeAll();
var polygon = new Polygon({
hasZ: false,
hasM: false,
rings: [vertices],
spatialReference: view.spatialReference
});
// 生成绘制的图形
var graphic = new Graphic({
geometry: polygon,
symbol: {
type: "simple-fill",
color: [51, 51, 204, 0.4],
style: "solid",
outline: {
color: "white",
width: 1
}
}
});
// 将绘制的图形添加到view
view.graphics.add(graphic);
}
function enableCreateRectangle(draw, view, lonlatdata) {
createRectangle(lonlatdata, view)
}
//根据点坐标生成新的矩形
function createRectangle(verticesValue, view) {
var vertices = verticesValue;
//两点画矩形
if (vertices.length < 2) {
return
}
var rings = [vertices[0], [vertices[0][0], vertices[1][1]], vertices[1], [vertices[1][0], vertices[0][1]]];
//清除之前绘制
view.graphics.removeAll();
var polygon = new Polygon({
hasZ: false,
hasM: false,
rings: [rings],
spatialReference: view.spatialReference
});
// 生成绘制的图形
var graphic = new Graphic({
geometry: polygon,
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [51, 51, 204, 0.4],
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "white",
width: 1
}
}
});
// 将绘制的图形添加到view
view.graphics.add(graphic);
}
var checkboxstatus =data.smsNotice;
console.log(checkboxstatus)
if(checkboxstatus.includes(1)){
$("#tzgly").prop("checked", true);
}
if(checkboxstatus.includes(2)){
$("#tzcrz").prop("checked", true);
}
}
});
}
})
})
})