wv-business-components-demo
Version:
572 lines (569 loc) • 19.1 kB
JavaScript
import Point from '@arcgis/core/geometry/Point';
import * as webMercatorUtils from '@arcgis/core/geometry/support/webMercatorUtils';
import '@arcgis/core/symbols/PictureMarkerSymbol';
import '@arcgis/core/Graphic';
import '@arcgis/core/widgets/Sketch';
import '@arcgis/core/widgets/Sketch/SketchViewModel';
import Map from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';
import * as watchUtils from '@arcgis/core/core/watchUtils';
import Extent from '@arcgis/core/geometry/Extent';
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';
import '@arcgis/core/geometry/Circle';
import '@arcgis/core/geometry/Polygon';
import '@arcgis/core/symbols/SimpleFillSymbol';
import '@arcgis/core/symbols/SimpleLineSymbol';
import '@arcgis/core/geometry/geometryEngine';
import * as urlUtils from '@arcgis/core/core/urlUtils';
import TileLayer from '@arcgis/core/layers/TileLayer';
import Basemap from '@arcgis/core/Basemap';
import '@arcgis/core/symbols/CIMSymbol';
import '@arcgis/core/geometry/Polyline';
import '@arcgis/core/symbols/Font';
import '@arcgis/core/config';
import '@arcgis/core/widgets/Editor';
import '@arcgis/core/widgets/Feature';
import '@arcgis/core/layers/support/LOD';
import WMTSLayer from '@arcgis/core/layers/WMTSLayer';
import '@arcgis/core/layers/WebTileLayer';
import '@arcgis/core/geometry/SpatialReference';
import TileInfo from '@arcgis/core/layers/support/TileInfo';
import '@arcgis/core/renderers/HeatmapRenderer';
import '@arcgis/core/layers/FeatureLayer';
import '@arcgis/core/Color';
import '@arcgis/core/symbols/SimpleMarkerSymbol';
import '@arcgis/core/PopupTemplate';
import '@arcgis/core/views/draw/Draw';
import '@arcgis/core/layers/MapImageLayer';
import '@arcgis/core/symbols/TextSymbol';
import '@arcgis/core/renderers/ClassBreaksRenderer';
import { WvMessage } from 'wiscomv';
import axios from 'axios';
function getPointData(map, getExtentData) {
let centerPoint = map.extent.center;
let point = {
type: "point",
longitude: map.extent.xmax,
latitude: map.extent.ymax
};
let point1 = {
type: "point",
longitude: map.extent.xmin,
latitude: map.extent.ymin
};
let minPoint = new Point(point1);
let maxPoint = new Point(point);
if (centerPoint.spatialReference.isWebMercator) {
centerPoint = webMercatorUtils.webMercatorToGeographic(centerPoint);
minPoint = webMercatorUtils.webMercatorToGeographic(minPoint);
maxPoint = webMercatorUtils.webMercatorToGeographic(maxPoint);
}
let minLongitude = minPoint.x;
let minLatitude = minPoint.y;
let maxLongitude = maxPoint.x;
let maxLatitude = maxPoint.y;
let level = Math.round(map.zoom);
let urlPrams = {
minLongitude,
minLatitude,
maxLongitude,
maxLatitude,
level
};
getExtentData && getExtentData(urlPrams);
}
let timer = null;
function debounce(fn, wait) {
return function() {
if (timer !== null) {
clearTimeout(timer);
}
timer = setTimeout(fn, wait);
};
}
class GisBase {
static initMap(mapContainer, mode, Id, callback, config, getExtentData, popCloseFn) {
window[Id + "mapObj"] = {};
window[Id + "mapObj"][Id + "mapconfig"] = config;
if (mode == "ARCGIS") {
if (Number(config.mapServerProxyEnable)) {
urlUtils.addProxyRule({
urlPrefix: config.urlPrefix,
proxyUrl: config.proxyUrl
});
}
let layer = new TileLayer({
url: config.mapServeUrl
});
let basemap = new Basemap({
baseLayers: [layer],
title: "basemap",
id: Id + "map"
});
window[Id + "mapObj"][Id + "Basemap"] = basemap;
let map = new Map({ basemap });
window[Id + "mapObj"][Id + "map"] = map;
let view = new MapView({
container: mapContainer,
map,
center: config.center,
zoom: config.level
});
window[Id + "mapObj"][Id + "view"] = view;
console.log(view);
view.ui.empty("top-left");
let graphicsLayer = new GraphicsLayer({ id: "DrawCircle" });
map.add(graphicsLayer, 1);
let graphicsLayer1 = new GraphicsLayer({ id: "DrawCircle1" });
map.add(graphicsLayer1, 2);
let graphicsLayer9 = new GraphicsLayer({ id: "TDrawCircle" });
map.add(graphicsLayer9, 4);
let graphicsLayer4 = new GraphicsLayer({ id: "EventLayer" });
map.add(graphicsLayer4, 5);
let PointLayer = map.findLayerById("EventLayer");
PointLayer.visible = false;
let graphicsLayer8 = new GraphicsLayer({
id: "EventResultLayer"
});
map.add(graphicsLayer8, 6);
let fixedBillboardLayer = new GraphicsLayer({
id: "fixedBillboardLayer"
});
map.add(fixedBillboardLayer, 100);
let fixedBillboardLayerP = new GraphicsLayer({
id: "fixedBillboardLayerP"
});
map.add(fixedBillboardLayerP, 108);
let graphicsLayer2 = new GraphicsLayer({ id: "MoveLayer1" });
map.add(graphicsLayer2, 102);
let graphicsLayer3 = new GraphicsLayer({ id: "MoveLayer" });
map.add(graphicsLayer3, 101);
let graphicsLayer5 = new GraphicsLayer({ id: "MoveLayerText" });
map.add(graphicsLayer5, 106);
let graphicsLayer6 = new GraphicsLayer({
id: "MoveLayerText1"
});
map.add(graphicsLayer6, 107);
let fixedBillboardLayerPC = new GraphicsLayer({
id: "fixedBillboardLayerPC"
});
map.add(fixedBillboardLayerPC, 110);
view.when(() => {
window[Id + "mapObj"][Id + "view"].popup = {
collapseEnabled: false,
dockOptions: {
buttonEnabled: false
},
highlightEnabled: false
};
watchUtils.whenTrue(view.popup, "visible", function() {
watchUtils.whenFalseOnce(view.popup, "visible", function() {
if (popCloseFn) {
popCloseFn();
}
});
});
callback();
});
watchUtils.watch(
view,
"extent",
debounce((extent) => {
if (view.stationary) ;
let level = Math.round(view.zoom);
if (level > window[Id + "mapObj"][Id + "mapconfig"].maxlevel) {
WvMessage({
message: "\u5DF2\u8FBE\u5230\u6700\u5927\u5C42\u7EA7!",
type: "error",
duration: "1000"
});
view.goTo({
center: view.center,
zoom: level - 1
});
}
if (level < window[Id + "mapObj"][Id + "mapconfig"].minlevel) {
WvMessage({
message: "\u5DF2\u8FBE\u5230\u6700\u5C0F\u5C42\u7EA7!",
type: "error",
duration: "1000"
});
view.goTo({
center: view.center,
zoom: level + 1
});
}
if (view.extent && getExtentData) {
getPointData(view, getExtentData);
}
if (config.mapExtentLimitEnable) {
return;
}
let getNumFloat = (num) => {
let x = String(num).indexOf(".") + 1;
let y = String(num).length - x;
if (y > 0) {
return y;
}
};
let XMin = config.XMin * 1;
let YMin = config.YMin * 1;
let XMax = config.XMax * 1;
let YMax = config.YMax * 1;
let viewE;
if (view.extent.spatialReference.isWebMercator) {
viewE = webMercatorUtils.webMercatorToGeographic(view.extent);
}
let mapXmin = Number(viewE.extent.xmin);
let mapXmax = Number(viewE.extent.xmax);
let mapYmin = Number(viewE.extent.ymin);
let mapYmax = Number(viewE.extent.ymax);
let xdifference = mapXmax - mapXmin;
let ydifference = mapYmax - mapYmin;
let cM = Number(mapXmax.toFixed(getNumFloat(XMax)));
if (cM > XMax) {
mapXmax = XMax;
mapXmin = XMax - xdifference;
if (mapYmax > YMax) {
mapYmax = YMax;
mapYmin = mapYmax - ydifference;
}
if (mapYmin < YMin) {
mapYmin = YMin;
mapYmax = mapYmin + ydifference;
}
let startExtent = new Extent(
{
xmin: mapXmin,
ymin: mapYmin,
xmax: mapXmax,
ymax: mapYmax
}
);
view.extent = startExtent;
}
let cX = Number(mapXmin.toFixed(getNumFloat(XMin)));
if (cX < XMin) {
mapXmin = XMin;
mapXmax = XMin + xdifference;
if (mapYmax > YMax) {
mapYmax = YMax;
mapYmin = mapYmax - ydifference;
}
if (mapYmin < YMin) {
mapYmin = YMin;
mapYmax = mapYmin + ydifference;
}
let startExtent = new Extent(
{
xmin: mapXmin,
ymin: mapYmin,
xmax: mapXmax,
ymax: mapYmax
}
);
view.extent = startExtent;
}
let cMY = Number(mapYmax.toFixed(getNumFloat(YMax)));
if (cMY > YMax) {
mapYmax = YMax;
mapYmin = YMax - ydifference;
if (mapXmax > XMax) {
mapXmax = XMax;
mapXmin = mapXmax - xdifference;
}
if (mapXmin < XMin) {
mapXmin = XMin;
mapXmax = mapXmin + xdifference;
}
let startExtent = new Extent(
{
xmin: mapXmin,
ymin: mapYmin,
xmax: mapXmax,
ymax: mapYmax
}
);
view.extent = startExtent;
}
let cMM = Number(mapYmin.toFixed(getNumFloat(YMin)));
if (cMM < YMin) {
mapYmin = YMin;
mapYmax = YMin + ydifference;
if (mapXmax > XMax) {
mapXmax = XMax;
mapXmin = mapXmax - xdifference;
}
if (mapXmin < XMin) {
mapXmin = XMin;
mapXmax = mapXmin + xdifference;
}
let startExtent = new Extent(
{
xmin: mapXmin,
ymin: mapYmin,
xmax: mapXmax,
ymax: mapYmax
}
);
view.extent = startExtent;
}
}, 500)
);
} else {
if (Number(config.mapServerProxyEnable)) {
urlUtils.addProxyRule({
urlPrefix: config.urlPrefix,
proxyUrl: config.proxyUrl
});
}
axios.get("/static/config/MapInfoParams2.json").then(function(res) {
let layer1 = new TileLayer({
url: config.mapServeUrl
});
let layer = new WMTSLayer({
url: config.mapServeUrl1
});
let basemap = new Basemap({
baseLayers: [layer1, layer],
title: "basemap",
id: Id + "map"
});
window[Id + "mapObj"][Id + "Basemap"] = basemap;
const map = new Map({
basemap
});
window[Id + "mapObj"][Id + "map"] = map;
let wmtsParam;
let param = res.data;
if (typeof param == "object") {
wmtsParam = param.WMTS;
} else if (typeof param == "string") {
wmtsParam = JSON.parse(param).WMTS;
}
if (!wmtsParam) {
alert("\u8BF7\u6B63\u786E\u914D\u7F6E\u53C2\u6570\uFF01");
return;
}
new TileInfo({
dpi: wmtsParam.dpi,
origin: wmtsParam.origin,
spatialReference: {
wkid: wmtsParam.wkid
},
lods: wmtsParam.lods
});
const view = new MapView({
container: mapContainer,
map,
center: config.center,
zoom: config.level
});
window[Id + "mapObj"][Id + "view"] = view;
console.log(view);
view.ui.empty("top-left");
let graphicsLayer = new GraphicsLayer({ id: "DrawCircle" });
map.add(graphicsLayer, 1);
let graphicsLayer1 = new GraphicsLayer({ id: "DrawCircle1" });
map.add(graphicsLayer1, 2);
let graphicsLayer9 = new GraphicsLayer({ id: "TDrawCircle" });
map.add(graphicsLayer9, 4);
let graphicsLayer4 = new GraphicsLayer({ id: "EventLayer" });
map.add(graphicsLayer4, 5);
let PointLayer = map.findLayerById("EventLayer");
PointLayer.visible = false;
let graphicsLayer8 = new GraphicsLayer({
id: "EventResultLayer"
});
map.add(graphicsLayer8, 6);
let fixedBillboardLayer = new GraphicsLayer({
id: "fixedBillboardLayer"
});
map.add(fixedBillboardLayer, 100);
let fixedBillboardLayerP = new GraphicsLayer({
id: "fixedBillboardLayerP"
});
map.add(fixedBillboardLayerP, 108);
let graphicsLayer2 = new GraphicsLayer({ id: "MoveLayer1" });
map.add(graphicsLayer2, 102);
let graphicsLayer3 = new GraphicsLayer({ id: "MoveLayer" });
map.add(graphicsLayer3, 101);
let graphicsLayer5 = new GraphicsLayer({
id: "MoveLayerText"
});
map.add(graphicsLayer5, 106);
let graphicsLayer6 = new GraphicsLayer({
id: "MoveLayerText1"
});
map.add(graphicsLayer6, 107);
let fixedBillboardLayerPC = new GraphicsLayer({
id: "fixedBillboardLayerPC"
});
map.add(fixedBillboardLayerPC, 110);
view.when(() => {
window[Id + "mapObj"][Id + "view"].popup = {
collapseEnabled: false,
dockOptions: {
buttonEnabled: false
},
highlightEnabled: false
};
watchUtils.whenTrue(view.popup, "visible", function() {
watchUtils.whenFalseOnce(view.popup, "visible", function() {
if (popCloseFn) {
popCloseFn();
}
});
});
callback();
});
watchUtils.watch(
view,
"extent",
debounce((extent) => {
if (view.stationary) ;
let level = Math.round(view.zoom);
if (level > window[Id + "mapObj"][Id + "mapconfig"].maxlevel) {
WvMessage({
message: "\u5DF2\u8FBE\u5230\u6700\u5927\u5C42\u7EA7!",
type: "error",
duration: "1000"
});
view.goTo({
center: view.center,
zoom: level - 1
});
}
if (level < window[Id + "mapObj"][Id + "mapconfig"].minlevel) {
WvMessage({
message: "\u5DF2\u8FBE\u5230\u6700\u5C0F\u5C42\u7EA7!",
type: "error",
duration: "1000"
});
view.goTo({
center: view.center,
zoom: level + 1
});
}
if (view.extent) {
getPointData(view, getExtentData);
}
if (config.mapExtentLimitEnable) {
return;
}
let getNumFloat = (num) => {
let x = String(num).indexOf(".") + 1;
let y = String(num).length - x;
if (y > 0) {
return y;
}
};
let XMin = config.XMin * 1;
let YMin = config.YMin * 1;
let XMax = config.XMax * 1;
let YMax = config.YMax * 1;
let viewE;
if (view.extent.spatialReference.isWebMercator) {
viewE = webMercatorUtils.webMercatorToGeographic(view.extent);
}
let mapXmin = Number(viewE.extent.xmin);
let mapXmax = Number(viewE.extent.xmax);
let mapYmin = Number(viewE.extent.ymin);
let mapYmax = Number(viewE.extent.ymax);
let xdifference = mapXmax - mapXmin;
let ydifference = mapYmax - mapYmin;
let cM = Number(mapXmax.toFixed(getNumFloat(XMax)));
if (cM > XMax) {
mapXmax = XMax;
mapXmin = XMax - xdifference;
if (mapYmax > YMax) {
mapYmax = YMax;
mapYmin = mapYmax - ydifference;
}
if (mapYmin < YMin) {
mapYmin = YMin;
mapYmax = mapYmin + ydifference;
}
let startExtent = new Extent(
{
xmin: mapXmin,
ymin: mapYmin,
xmax: mapXmax,
ymax: mapYmax
}
);
view.extent = startExtent;
}
let cX = Number(mapXmin.toFixed(getNumFloat(XMin)));
if (cX < XMin) {
mapXmin = XMin;
mapXmax = XMin + xdifference;
if (mapYmax > YMax) {
mapYmax = YMax;
mapYmin = mapYmax - ydifference;
}
if (mapYmin < YMin) {
mapYmin = YMin;
mapYmax = mapYmin + ydifference;
}
let startExtent = new Extent(
{
xmin: mapXmin,
ymin: mapYmin,
xmax: mapXmax,
ymax: mapYmax
}
);
view.extent = startExtent;
}
let cMY = Number(mapYmax.toFixed(getNumFloat(YMax)));
if (cMY > YMax) {
mapYmax = YMax;
mapYmin = YMax - ydifference;
if (mapXmax > XMax) {
mapXmax = XMax;
mapXmin = mapXmax - xdifference;
}
if (mapXmin < XMin) {
mapXmin = XMin;
mapXmax = mapXmin + xdifference;
}
let startExtent = new Extent(
{
xmin: mapXmin,
ymin: mapYmin,
xmax: mapXmax,
ymax: mapYmax
}
);
view.extent = startExtent;
}
let cMM = Number(mapYmin.toFixed(getNumFloat(YMin)));
if (cMM < YMin) {
mapYmin = YMin;
mapYmax = YMin + ydifference;
if (mapXmax > XMax) {
mapXmax = XMax;
mapXmin = mapXmax - xdifference;
}
if (mapXmin < XMin) {
mapXmin = XMin;
mapXmax = mapXmin + xdifference;
}
let startExtent = new Extent(
{
xmin: mapXmin,
ymin: mapYmin,
xmax: mapXmax,
ymax: mapYmax
}
);
view.extent = startExtent;
}
}, 500)
);
});
}
}
}
export { GisBase as default };