UNPKG

wv-business-components-demo

Version:

1,424 lines (1,423 loc) 53.2 kB
import { CartographicLineSymbol, Units, ClusterLayer, OverviewMap, ScreenPoint } from './arcgisApi.js'; import config from '@arcgis/core/config'; import Map from '@arcgis/core/Map'; import MapView from '@arcgis/core/views/MapView'; import Point from '@arcgis/core/geometry/Point'; import Polyline from '@arcgis/core/geometry/Polyline'; import Polygon from '@arcgis/core/geometry/Polygon'; import Circle from '@arcgis/core/geometry/Circle'; import Graphic from '@arcgis/core/Graphic'; import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'; import PictureMarkerSymbol from '@arcgis/core/symbols/PictureMarkerSymbol'; import TextSymbol from '@arcgis/core/symbols/TextSymbol'; import SimpleFillSymbol from '@arcgis/core/symbols/SimpleFillSymbol'; import SimpleLineSymbol from '@arcgis/core/symbols/SimpleLineSymbol'; import MapImageLayer from '@arcgis/core/layers/MapImageLayer'; import TileInfo from '@arcgis/core/layers/support/TileInfo'; import * as webMercatorUtils from '@arcgis/core/geometry/support/webMercatorUtils'; import SpatialReference from '@arcgis/core/geometry/SpatialReference'; import Extent from '@arcgis/core/geometry/Extent'; import Draw from '@arcgis/core/views/draw/Draw'; import Font from '@arcgis/core/symbols/Font'; import Color from '@arcgis/core/Color'; import PopupTemplate from '@arcgis/core/PopupTemplate'; import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'; import ClassBreaksRenderer from '@arcgis/core/renderers/ClassBreaksRenderer'; import * as geometryEngine from '@arcgis/core/geometry/geometryEngine'; import TileLayer from '@arcgis/core/layers/TileLayer'; import * as urlUtils from '@arcgis/core/core/urlUtils'; import WebTileLayer from '@arcgis/core/layers/WebTileLayer'; const WMap = function(factory) { return factory(); }(function() { let ClassF = function() { let W = { v: "1.0.0" }; W.use = function(obj, callback) { W.mapType = obj.mapType || "ARCGIS"; W.version = obj.version || "4"; config.assetsPath = obj.url || "/static"; W.factory = ARCGIS_MAP_4; W.set(); W.factory.requireModules(callback); }; W.set = function() { W.Map = W.factory.Map; W.Point = W.factory.Point; W.TileLayer = W.factory.TileLayer; W.Marker = W.factory.Marker; W.Text = W.factory.Text; W.Polyline = W.factory.Polyline; W.Polygon = W.factory.Polygon; W.Circle = W.factory.Circle; W.GraphicsLayer = W.factory.GraphicsLayer; W.Draw = W.factory.Draw; W.ClusterLayer = W.factory.ClusterLayer; W.OverviewMap = W.factory.OverviewMap; W.GeometryEngine = W.factory.GeometryEngine; W.Color = W.factory.Color; }; return W; }(); const ARCGIS_MAP_4 = function() { }; ARCGIS_MAP_4.requireModules = function(callback) { ARCGIS_MAP_4.modules = { Map: Map, MapView: MapView, Point: Point, Polyline: Polyline, Polygon: Polygon, Circle: Circle, Graphic: Graphic, GraphicsLayer: GraphicsLayer, PictureMarkerSymbol: PictureMarkerSymbol, TextSymbol: TextSymbol, CartographicLineSymbol: CartographicLineSymbol, SimpleFillSymbol: SimpleFillSymbol, SimpleLineSymbol: SimpleLineSymbol, MapImageLayer: MapImageLayer, TintTiledLayer: {}, TileInfo: TileInfo, webMercatorUtils: webMercatorUtils, SpatialReference: SpatialReference, Extent: Extent, Draw: Draw, Units: Units, Font: Font, Color: Color, ClusterLayer: ClusterLayer, PopupTemplate: PopupTemplate, SimpleMarkerSymbol: SimpleMarkerSymbol, ClassBreaksRenderer: ClassBreaksRenderer, OverviewMap: OverviewMap, ScreenPoint: ScreenPoint, GeometryEngine: geometryEngine, TileLayer: TileLayer, urlUtils: urlUtils, WebTileLayer: WebTileLayer }; callback && callback(); }; ARCGIS_MAP_4.Map = function() { function Map(id, opt) { let self = this; this.config = opt; this.tileLayer = []; this.overlays = []; this.graphicsLayers = []; let map = new ARCGIS_MAP_4.modules.Map(); let view = new ARCGIS_MAP_4.modules.MapView({ container: id, map, constraints: { maxZoom: opt.maxZoom, minZoom: opt.minZoom }, center: opt.center, zoom: opt.zoom }); self._map = map; self._view = view; self._setInfoWindow(); if (opt.slider === false) view.ui.empty("top-left"); if (opt.proxyConfig) { ARCGIS_MAP_4.modules.urlUtils.addProxyRule({ urlPrefix: opt.proxyConfig.urlPrefix, proxyUrl: opt.proxyConfig.proxyUrl }); } } Map.prototype._setInfoWindow = function() { this._infoWindow = this._map.infoWindow; }; Map.prototype.setCenter = function(center) { this._view.goTo({ center }); }; Map.prototype.centerAndZoom = function(center, zoom) { this._view.goTo({ center, zoom }); }; Map.prototype.setZoom = function(zoom) { this._view.goTo({ zoom }); }; Map.prototype.getZoom = function() { return this._view.zoom; }; Map.prototype.getCenter = function() { let c = this._view.center; return [c.longitude, c.latitude]; }; Map.prototype.lnglatToPixel = function(lnglat) { let p; if (lnglat instanceof Array) { p = ARCGIS_MAP_4.modules.webMercatorUtils.lngLatToXY(lnglat[0], lnglat[1]); } else { p = ARCGIS_MAP_4.modules.webMercatorUtils.geographicToWebMercator(lnglat); } return p; }; Map.prototype.pixelToLngLat = function(pixel) { let p; if (pixel instanceof Array) { p = ARCGIS_MAP_4.modules.webMercatorUtils.xyToLngLat(pixel[0], pixel[1]); } else { p = ARCGIS_MAP_4.modules.webMercatorUtils.webMercatorToGeographic(pixel); } return p; }; Map.prototype.getExtend = function() { let flag = this._map.spatialReference.isWebMercator(); let extent; if (flag) { extent = this._map.geographicExtent; } else { extent = this._map.extent; } return extent; }; Map.prototype.setMapCursor = function(cursor) { this._map.setMapCursor(cursor); }; Map.prototype.on = function(eventName, handler) { if (!eventName || !handler) return; let self = this; return this._map.on(eventName, function(d) { handler && handler.call(self, d); }); }; Map.prototype.off = function(eventObj) { if (eventObj) eventObj.remove(); }; Map.prototype.clearMap = function() { this._map.graphics.clear(); this.overlays = []; this.graphicsLayers.forEach(function(g) { g.clear(); }); }; Map.prototype.getAllOverlays = function(type) { let CLASS_NAME = ""; switch (type) { case "marker": CLASS_NAME = "WMap.Marker"; break; case "polyline": CLASS_NAME = "WMap.Polyline"; break; case "polygon": CLASS_NAME = "WMap.Polygon"; break; case "circle": CLASS_NAME = "WMap.Circle"; break; case "text": CLASS_NAME = "WMap.Text"; break; default: CLASS_NAME = type; break; } let overlays = this.overlays.filter(function(item) { if (!CLASS_NAME) return true; return item.CLASS_NAME === CLASS_NAME; }); return overlays; }; Map.prototype.add = function(overlayers) { let self = this; if (!(overlayers instanceof Array)) { overlayers = [overlayers]; } overlayers.forEach(function(o) { if (o instanceof ARCGIS_MAP_4.TileLayer || o instanceof ARCGIS_MAP_4.Marker || o instanceof ARCGIS_MAP_4.Text || o instanceof ARCGIS_MAP_4.Polyline || o instanceof ARCGIS_MAP_4.Polygon || o instanceof ARCGIS_MAP_4.Circle || o instanceof ARCGIS_MAP_4.GraphicsLayer || o instanceof ARCGIS_MAP_4.ClusterLayer) { o.setMap(self); } }); }; Map.prototype.remove = function(overlayers) { if (!(overlayers instanceof Array)) { overlayers = [overlayers]; } overlayers.forEach(function(o) { if (o instanceof ARCGIS_MAP_4.TileLayer || o instanceof ARCGIS_MAP_4.Marker || o instanceof ARCGIS_MAP_4.Text || o instanceof ARCGIS_MAP_4.Polyline || o instanceof ARCGIS_MAP_4.Polygon || o instanceof ARCGIS_MAP_4.Circle || o instanceof ARCGIS_MAP_4.GraphicsLayer || o instanceof ARCGIS_MAP_4.ClusterLayer) { o.setMap(null); } }); }; Map.prototype.getGraphicsLayer = function(id) { let graphicsLayer = this.graphicsLayers.filter(function(g) { return g._graphicsLayer.id === id; }); return graphicsLayer[0]; }; Map.prototype.getAllGraphicsLayer = function() { return this.graphicsLayers; }; Map.prototype.disablePan = function() { this._map.disablePan(); }; Map.prototype.enablePan = function() { this._map.enablePan(); }; Map.prototype.destroy = function() { this._view.destroy(); }; Map.prototype.setVisibility = function(visible) { this._map.setVisibility(visible); }; Map.prototype.show = function() { this.setVisibility(true); }; Map.prototype.hide = function() { this.setVisibility(false); }; return Map; }(); ARCGIS_MAP_4.Point = function() { function Point(x, y, spatialReference) { if (spatialReference) return new ARCGIS_MAP_4.modules.Point(x, y, spatialReference); return new ARCGIS_MAP_4.modules.Point(x, y); } return Point; }(); ARCGIS_MAP_4.TileLayer = function() { function TileLayer(obj) { this.config = obj; this.wmap = null; obj.serviceType = obj.serviceType || "ArcGIS REST Tiled"; let fn; let opts = { id: obj.id, url: obj.tileUrl }; switch (obj.serviceType) { case "ArcGIS REST Tiled": fn = "TileLayer"; break; case "ArcGIS REST": fn = "MapImageLayer"; break; case "WMTS": { fn = "WebTileLayer"; let other = { id: obj.id, urlTemplate: obj.tileUrl + `?SERVICE=WMTS&request=GetTile&version=${obj.info.version}&LAYER=${obj.info.identifier}&tileMatrixSet=${obj.info.tileMatrixSet}&TileMatrix={level}&TileRow={row}&TileCol={col}&style=${obj.info.style}&format=image/${obj.info.format}`, spatialReference: new ARCGIS_MAP_4.modules.SpatialReference({ wkid: obj.info.wkid }), tileInfo: { rows: obj.info.rows, cols: obj.info.cols, compressionQuality: obj.info.compressionQuality, origin: obj.info.origin, spatialReference: new ARCGIS_MAP_4.modules.SpatialReference({ wkid: obj.info.wkid }), lods: obj.info.lods } }; opts = other; } break; case "Tint Tiled": fn = "TintTiledLayer"; Object.assign(opts, obj.info); break; case "ArcGISWebTiled": fn = "ArcGISWebTiledLayer"; if (obj.info) { let spRef = new ARCGIS_MAP_4.modules.SpatialReference({ wkid: obj.info.wkid }); let fullExtent = new ARCGIS_MAP_4.modules.Extent( obj.info.fullExtent.xmin, obj.info.fullExtent.ymin, obj.info.fullExtent.xmax, obj.info.fullExtent.ymax, spRef ); let initialExtent = new ARCGIS_MAP_4.modules.Extent( obj.info.initialExtent.xmin, obj.info.initialExtent.ymin, obj.info.initialExtent.xmax, obj.info.initialExtent.ymax, spRef ); let tileInfo = new ARCGIS_MAP_4.modules.TileInfo({ rows: obj.info.rows, cols: obj.info.cols, compressionQuality: obj.info.compressionQuality || 0, origin: obj.info.origin, spatialReference: spRef, lods: obj.info.lods }); let other = { fullExtent, initialExtent, tileInfo }; Object.assign(opts, other); } break; } console.log(222222); console.log(opts); this._tileLayer = new ARCGIS_MAP_4.modules[fn](opts); this._tileLayer.id = obj.id; this.visible = this._tileLayer.visible; if (obj.visible === false) this.hide(); delete obj.visible; } TileLayer.prototype.show = function() { this.visible = true; this._tileLayer.visible = true; }; TileLayer.prototype.hide = function() { this.visible = false; this._tileLayer.visible = false; }; TileLayer.prototype.setMap = function(wmap) { let self = this; if (wmap === null) { if (!this.wmap) return; if (this._tileLayer) this.wmap._map.removeLayer(this._tileLayer); this.wmap.tileLayer = this.wmap.tileLayer.filter(function(item) { if (item === self) return false; return true; }); this.wmap = null; return; } this.wmap = wmap; wmap.tileLayer.push(self); wmap._map.add(this._tileLayer); }; TileLayer.prototype.getMap = function() { return this.wmap; }; return TileLayer; }(); ARCGIS_MAP_4.Marker = function() { function Marker(opt) { this.CLASS_NAME = "WMap.Marker"; let obj = { attributes: null }; Object.assign(obj, opt); this.config = obj; this.wmap = null; obj.position[0] = Number(obj.position[0]); obj.position[1] = Number(obj.position[1]); let wkid = obj.wkid || 4326; let point = new ARCGIS_MAP_4.modules.Point( obj.position[0], obj.position[1], new ARCGIS_MAP_4.modules.SpatialReference({ wkid }) ); let url = obj.icon; let width = obj.width || 36; let height = obj.height || 36; let symbol = new ARCGIS_MAP_4.modules.PictureMarkerSymbol(url, width, height); if (obj.angle) symbol.angle = obj.angle; if (obj.offset) { symbol.xoffset = obj.offset.x; symbol.yoffset = obj.offset.y; } this._graphic = new ARCGIS_MAP_4.modules.Graphic(point, symbol); if (obj.label) this.setLabel(obj.label); this.visible = obj.visible; if (obj.visible === false) this._graphic.visible = obj.visible; delete obj.visible; } Marker.prototype.setLabel = function(labelOpt) { let wkid = this.config.wkid || 4326; let point = new ARCGIS_MAP_4.modules.Point( this.config.position[0], this.config.position[1], new ARCGIS_MAP_4.modules.SpatialReference({ wkid }) ); if (labelOpt && labelOpt.text) { let text = new ARCGIS_MAP_4.Text({ text: labelOpt.text, font: labelOpt.font, position: this.config.position, offset: labelOpt.offset, horizontalAlignment: labelOpt.horizontalAlignment, verticalAlignment: labelOpt.verticalAlignment }); if (this.labelGraphic && this.labelGraphic._graphic_text) { this.labelGraphic._graphic_text.setSymbol(text._graphic.symbol); } else { if (!this.labelGraphic) this.labelGraphic = {}; this.labelGraphic._graphic_text = text._graphic; if (this.visible === false) this.labelGraphic._graphic_text.visible = this.visible; } } if (labelOpt && labelOpt.icon) { labelOpt.width = labelOpt.width || 36; labelOpt.height = labelOpt.height || 36; let symboLabel = new ARCGIS_MAP_4.modules.PictureMarkerSymbol( labelOpt.icon, labelOpt.width, labelOpt.height ); if (labelOpt.offset) { symboLabel.xoffset = labelOpt.offset.x; symboLabel.yoffset = labelOpt.offset.y; } let graphicLabel = new ARCGIS_MAP_4.modules.Graphic(point, symboLabel); if (this.labelGraphic && this.labelGraphic._graphic_icon) { this.labelGraphic._graphic_icon.setSymbol(symboLabel); } else { if (!this.labelGraphic) this.labelGraphic = {}; this.labelGraphic._graphic_icon = graphicLabel; if (this.visible === false) this.labelGraphic._graphic_icon.visible = this.visible; } } this.config.label = labelOpt; }; Marker.prototype.getLabel = function() { return this.config.label; }; Marker.prototype.setIcon = function(url) { this._graphic.symbol.setUrl(url); this._graphic.setSymbol(this._graphic.symbol); }; Marker.prototype.setMap = function(wmap) { let self = this; if (wmap === null) { if (!this.wmap) return; if (this._graphic) this.wmap._map.graphics.remove(this._graphic); if (this.labelGraphic) { if (this.labelGraphic._graphic_icon) this.wmap._map.graphics.remove(this.labelGraphic._graphic_icon); if (this.labelGraphic._graphic_text) this.wmap._map.graphics.remove(this.labelGraphic._graphic_text); } this.wmap.overlays = this.wmap.overlays.filter(function(item) { if (item === self) return false; return true; }); this.wmap = null; return; } this.wmap = wmap; if (!this._graphic._graphicsLayer) wmap.overlays.push(this); wmap._map.graphics.add(this._graphic); if (this.labelGraphic) { if (this.labelGraphic._graphic_icon) wmap._map.graphics.add(this.labelGraphic._graphic_icon); if (this.labelGraphic._graphic_text) wmap._map.graphics.add(this.labelGraphic._graphic_text); } }; Marker.prototype.getMap = function() { return this.wmap; }; Marker.prototype.private_getGraphic = function() { let labelGraphic = this.labelGraphic; return { _graphic: this._graphic, _graphic_icon: labelGraphic ? this.labelGraphic._graphic_icon : null, _graphic_text: labelGraphic ? this.labelGraphic._graphic_text : null }; }; Marker.prototype.show = function() { this._graphic.show(); this.visible = this._graphic._visible; if (this.labelGraphic && this.labelGraphic._graphic_icon) this.labelGraphic._graphic_icon.show(); if (this.labelGraphic && this.labelGraphic._graphic_text) this.labelGraphic._graphic_text.show(); }; Marker.prototype.hide = function() { this._graphic.hide(); this.visible = this._graphic._visible; if (this.labelGraphic && this.labelGraphic._graphic_text) this.labelGraphic._graphic_text.hide(); if (this.labelGraphic && this.labelGraphic._graphic_icon) this.labelGraphic._graphic_icon.hide(); }; Marker.prototype.getAttributes = function() { return this.config.attributes; }; Marker.prototype.setAttributes = function(attributes) { let obj = this.config.attributes; Object.assign(obj, attributes); this.config.attributes = obj; }; Marker.prototype.setGeometry = function(geometry) { this._graphic.setGeometry(geometry); if (this.labelGraphic && this.labelGraphic._graphic_text) this.labelGraphic._graphic_text.setGeometry(geometry); if (this.labelGraphic && this.labelGraphic._graphic_icon) this.labelGraphic._graphic_icon.setGeometry(geometry); }; Marker.prototype.setPosition = function(pos) { let wkid = this.config.wkid || 4326; let point = new ARCGIS_MAP_4.modules.Point( pos[0], pos[1], new ARCGIS_MAP_4.modules.SpatialReference({ wkid }) ); this.setGeometry(point); }; Marker.prototype.getPosition = function() { let lng = this._graphic.geometry.getLongitude(); let lat = this._graphic.geometry.getLatitude(); return [lng, lat]; }; Marker.prototype.setAngle = function(angle) { this._graphic.symbol.setAngle(angle); }; Marker.prototype.setOffset = function(x, y) { this._graphic.symbol.setOffset(x, y); }; Marker.prototype.setWidth = function(width) { this._graphic.symbol.setWidth(width); }; Marker.prototype.setHeight = function(height) { this._graphic.symbol.setHeight(height); }; return Marker; }(); ARCGIS_MAP_4.Text = function() { function Text(opt) { this.CLASS_NAME = "WMap.Text"; let obj = { attributes: null }; Object.assign(obj, opt); this.config = obj; this.wmap = null; let wkid = obj.wkid || 4326; let point = new ARCGIS_MAP_4.modules.Point( obj.position[0], obj.position[1], new ARCGIS_MAP_4.modules.SpatialReference({ wkid }) ); let font = obj.font ? new ARCGIS_MAP_4.modules.Font( obj.font.size, obj.font.style, "", obj.font.weight, obj.font.family ) : null; let color = obj.font.color ? new ARCGIS_MAP_4.modules.Color(obj.font.color) : null; let symbol = new ARCGIS_MAP_4.modules.TextSymbol(obj.text, font, color); if (obj.angle) symbol.angle = obj.angle; if (obj.horizontalAlignment) symbol.horizontalAlignment = obj.horizontalAlignment; if (obj.verticalAlignment) symbol.verticalAlignment = obj.verticalAlignment; if (obj.offset) { symbol.xoffset = obj.offset.x; symbol.yoffset = obj.offset.y; } this._graphic = new ARCGIS_MAP_4.modules.Graphic(point, symbol); this.visible = obj.visible; if (obj.visible === false) this._graphic.visible = obj.visible; delete obj.visible; } Text.prototype.setAngle = function(angle) { this._graphic.symbol.setAngle(angle); }; Text.prototype.setOffset = function(x, y) { this._graphic.symbol.setOffset(x, y); }; Text.prototype.setMap = function(wmap) { let self = this; if (wmap === null) { if (!this.wmap) return; if (this._graphic) this.wmap._map.graphics.remove(this._graphic); this.wmap.overlays = this.wmap.overlays.filter(function(item) { if (item === self) return false; return true; }); this.wmap = null; return; } this.wmap = wmap; if (!this._graphic._graphicsLayer) wmap.overlays.push(this); wmap._map.graphics.add(this._graphic); }; Text.prototype.getMap = function() { return this.wmap; }; Text.prototype.private_getGraphic = function() { return { _graphic: this._graphic }; }; Text.prototype.show = function() { this._graphic.show(); this.visible = this._graphic._visible; }; Text.prototype.hide = function() { this._graphic.hide(); this.visible = this._graphic._visible; }; Text.prototype.getAttributes = function() { return this.config.attributes; }; Text.prototype.setAttributes = function(attributes) { let obj = this.config.attributes; Object.assign(obj, attributes); this.config.attributes = obj; }; Text.prototype.setGeometry = function(geometry) { this._graphic.setGeometry(geometry); }; Text.prototype.setPosition = function(pos) { let wkid = this.config.wkid || 4326; let point = new ARCGIS_MAP_4.modules.Point( pos[0], pos[1], new ARCGIS_MAP_4.modules.SpatialReference({ wkid }) ); this.setGeometry(point); }; Text.prototype.getPosition = function() { let lng = this._graphic.geometry.getLongitude(); let lat = this._graphic.geometry.getLatitude(); return [lng, lat]; }; Text.prototype.setText = function(text) { this._graphic.symbol.setText(text); }; return Text; }(); ARCGIS_MAP_4.Polyline = function() { function Polyline(opt) { this.CLASS_NAME = "WMap.Polyline"; let obj = { attributes: null }; Object.assign(obj, opt); this.config = obj; this.wmap = null; let wkid = obj.wkid || 4326; let polyline = new ARCGIS_MAP_4.modules.Polyline({ paths: [obj.paths], spatialReference: new ARCGIS_MAP_4.modules.SpatialReference({ wkid }) }); let style = ARCGIS_MAP_4.modules.CartographicLineSymbol[obj.style] || ARCGIS_MAP_4.modules.CartographicLineSymbol["STYLE_SOLID"]; let color = obj.color ? new ARCGIS_MAP_4.modules.Color(obj.color) : null; let width = obj.width || 1; let cap = ARCGIS_MAP_4.modules.CartographicLineSymbol[obj.cap] || ARCGIS_MAP_4.modules.CartographicLineSymbol["CAP_BUTT"]; let join = ARCGIS_MAP_4.modules.CartographicLineSymbol[obj.join] || ARCGIS_MAP_4.modules.CartographicLineSymbol["JOIN_MITER"]; let miterLimit = obj.miterLimit || 10; let symbol = new ARCGIS_MAP_4.modules.CartographicLineSymbol( style, color, width, cap, join, miterLimit ); this._graphic = new ARCGIS_MAP_4.modules.Graphic(polyline, symbol); this.visible = obj.visible; if (obj.visible === false) this._graphic.visible = obj.visible; delete obj.visible; } Polyline.prototype.setMap = function(wmap) { let self = this; if (wmap === null) { if (!this.wmap) return; if (this._graphic) this.wmap._map.graphics.remove(this._graphic); this.wmap.overlays = this.wmap.overlays.filter(function(item) { if (item === self) return false; return true; }); this.wmap = null; return; } this.wmap = wmap; if (!this._graphic._graphicsLayer) wmap.overlays.push(this); wmap._map.graphics.add(this._graphic); }; Polyline.prototype.getMap = function() { return this.wmap; }; Polyline.prototype.private_getGraphic = function() { return { _graphic: this._graphic }; }; Polyline.prototype.show = function() { this._graphic.show(); this.visible = this._graphic._visible; }; Polyline.prototype.hide = function() { this._graphic.hide(); this.visible = this._graphic._visible; }; Polyline.prototype.getAttributes = function() { return this.config.attributes; }; Polyline.prototype.setAttributes = function(attributes) { let obj = this.config.attributes; Object.assign(obj, attributes); this.config.attributes = obj; }; Polyline.prototype.setGeometry = function(geometry) { this._graphic.setGeometry(geometry); }; Polyline.prototype.setPath = function(paths) { let wkid = this.config.wkid || 4326; let geometry = new ARCGIS_MAP_4.modules.Polyline({ paths: [paths], spatialReference: new ARCGIS_MAP_4.modules.SpatialReference({ wkid }) }); this.setGeometry(geometry); }; Polyline.prototype.getPath = function() { let paths = this._graphic.geometry.paths; return paths[0]; }; return Polyline; }(); ARCGIS_MAP_4.Polygon = function() { function Polygon(opt) { this.CLASS_NAME = "WMap.Polygon"; let obj = { attributes: null }; Object.assign(obj, opt); this.config = obj; this.wmap = null; let wkid = obj.wkid || 4326; let polygon = new ARCGIS_MAP_4.modules.Polygon({ rings: [obj.paths], spatialReference: new ARCGIS_MAP_4.modules.SpatialReference({ wkid }) }); let style = ARCGIS_MAP_4.modules.CartographicLineSymbol["STYLE_SOLID"]; let color = obj.color ? obj.color._color ? obj.color._color : new ARCGIS_MAP_4.modules.Color(obj.color) : null; let outlineStyle = obj.outline && obj.outline.style ? ARCGIS_MAP_4.modules.CartographicLineSymbol[obj.outline.style] : ARCGIS_MAP_4.modules.CartographicLineSymbol["STYLE_SOLID"]; let outline = obj.outline ? new ARCGIS_MAP_4.modules.SimpleLineSymbol( outlineStyle, obj.outline.color, obj.outline.width ) : null; let symbol = new ARCGIS_MAP_4.modules.SimpleFillSymbol(style, outline, color); this._graphic = new ARCGIS_MAP_4.modules.Graphic(polygon, symbol); this.visible = obj.visible; if (obj.visible === false) this._graphic.visible = obj.visible; delete obj.visible; } Polygon.prototype.setMap = function(wmap) { let self = this; if (wmap === null) { if (!this.wmap) return; if (this._graphic) this.wmap._map.graphics.remove(this._graphic); this.wmap.overlays = this.wmap.overlays.filter(function(item) { if (item === self) return false; return true; }); this.wmap = null; return; } this.wmap = wmap; if (!this._graphic._graphicsLayer) wmap.overlays.push(this); wmap._map.graphics.add(this._graphic); }; Polygon.prototype.getMap = function() { return this.wmap; }; Polygon.prototype.private_getGraphic = function() { return { _graphic: this._graphic }; }; Polygon.prototype.show = function() { this._graphic.show(); this.visible = this._graphic._visible; }; Polygon.prototype.hide = function() { this._graphic.hide(); this.visible = this._graphic._visible; }; Polygon.prototype.getAttributes = function() { return this.config.attributes; }; Polygon.prototype.setAttributes = function(attributes) { let obj = this.config.attributes; Object.assign(obj, attributes); this.config.attributes = obj; }; Polygon.prototype.setGeometry = function(geometry) { this._graphic.setGeometry(geometry); }; Polygon.prototype.setPath = function(paths) { let wkid = this.config.wkid || 4326; let geometry = new ARCGIS_MAP_4.modules.Polygon({ rings: [paths], spatialReference: new ARCGIS_MAP_4.modules.SpatialReference({ wkid }) }); this.setGeometry(geometry); }; Polygon.prototype.getPath = function() { let rings = this._graphic.geometry.rings; return rings[0]; }; return Polygon; }(); ARCGIS_MAP_4.Circle = function() { function Circle(opt) { this.CLASS_NAME = "WMap.Circle"; let obj = { attributes: null }; Object.assign(obj, opt); this.config = obj; this.wmap = null; let circle = new ARCGIS_MAP_4.modules.Circle(obj.center, { radius: obj.radius, geodesic: obj.geodesic === true ? true : false }); let style = ARCGIS_MAP_4.modules.CartographicLineSymbol["STYLE_SOLID"]; let color = obj.color ? new ARCGIS_MAP_4.modules.Color(obj.color) : null; let outlineStyle = obj.outline && obj.outline.style ? ARCGIS_MAP_4.modules.CartographicLineSymbol[obj.outline.style] : ARCGIS_MAP_4.modules.CartographicLineSymbol["STYLE_SOLID"]; let outline = obj.outline ? new ARCGIS_MAP_4.modules.SimpleLineSymbol( outlineStyle, obj.outline.color, obj.outline.width ) : null; let symbol = new ARCGIS_MAP_4.modules.SimpleFillSymbol(style, outline, color); this._graphic = new ARCGIS_MAP_4.modules.Graphic(circle, symbol); this.visible = obj.visible; if (obj.visible === false) this._graphic.visible = obj.visible; delete obj.visible; } Circle.prototype.setMap = function(wmap) { let self = this; if (wmap === null) { if (!this.wmap) return; if (this._graphic) this.wmap._map.graphics.remove(this._graphic); this.wmap.overlays = this.wmap.overlays.filter(function(item) { if (item === self) return false; return true; }); this.wmap = null; return; } this.wmap = wmap; if (!this._graphic._graphicsLayer) wmap.overlays.push(this); wmap._map.graphics.add(this._graphic); }; Circle.prototype.getMap = function() { return this.wmap; }; Circle.prototype.private_getGraphic = function() { return { _graphic: this._graphic }; }; Circle.prototype.show = function() { this._graphic.show(); this.visible = this._graphic._visible; }; Circle.prototype.hide = function() { this._graphic.hide(); this.visible = this._graphic._visible; }; Circle.prototype.getAttributes = function() { return this.config.attributes; }; Circle.prototype.setAttributes = function(attributes) { let obj = this.config.attributes; Object.assign(obj, attributes); this.config.attributes = obj; }; Circle.prototype.setGeometry = function(geometry) { this._graphic.setGeometry(geometry); }; Circle.prototype.setCenter = function(center) { let geometry = new ARCGIS_MAP_4.modules.Circle(center, { radius: this.config.radius, geodesic: this.config.geodesic === false ? false : true }); this.setGeometry(geometry); }; Circle.prototype.setRadius = function(radius) { let geometry = new ARCGIS_MAP_4.modules.Circle(this.config.center, { radius, geodesic: this.config.geodesic === false ? false : true }); this.setGeometry(geometry); }; Circle.prototype.getCenter = function() { let center = this._graphic.geometry.center; let lng = center.getLongitude(); let lat = center.getLatitude(); return [lng, lat]; }; Circle.prototype.getRadius = function() { let radius = this._graphic.geometry.radius; return radius; }; return Circle; }(); ARCGIS_MAP_4.GraphicsLayer = function() { function GraphicsLayer(opt) { let obj = { attributes: null }; Object.assign(obj, opt); this.overlays = []; this.config = obj; this.wmap = null; let graphicsLayer = new ARCGIS_MAP_4.modules.GraphicsLayer({ id: opt.id, dataAttributes: opt.dataAttributes, className: opt.className }); this._graphicsLayer = graphicsLayer; this.visible = obj.visible; if (obj.visible === false) this._graphicsLayer.visible = obj.visible; delete obj.visible; } GraphicsLayer.prototype.add = function(overlayers) { let self = this; if (!(overlayers instanceof Array)) { overlayers = [overlayers]; } overlayers.forEach(function(o) { if (!o._graphic._graphicsLayer) self.overlays.push(o); let graphicObj = o.private_getGraphic(); if (graphicObj._graphic) self._graphicsLayer.add(graphicObj._graphic); if (graphicObj._graphic_icon) self._graphicsLayer.add(graphicObj._graphic_icon); if (graphicObj._graphic_text) self._graphicsLayer.add(graphicObj._graphic_text); }); }; GraphicsLayer.prototype.remove = function(overlayers) { let self = this; if (!(overlayers instanceof Array)) { overlayers = [overlayers]; } overlayers.forEach(function(o) { self.overlays = self.overlays.filter(function(item) { if (item === o) return false; return true; }); let graphicObj = o.private_getGraphic(); if (graphicObj._graphic) self._graphicsLayer.remove(graphicObj._graphic); if (graphicObj._graphic_icon) self._graphicsLayer.remove(graphicObj._graphic_icon); if (graphicObj._graphic_text) self._graphicsLayer.remove(graphicObj._graphic_text); }); }; GraphicsLayer.prototype.getAllOverlays = function(type) { let CLASS_NAME = ""; switch (type) { case "marker": CLASS_NAME = "WMap.Marker"; break; case "polyline": CLASS_NAME = "WMap.Polyline"; break; case "polygon": CLASS_NAME = "WMap.Polygon"; break; case "circle": CLASS_NAME = "WMap.Circle"; break; case "text": CLASS_NAME = "WMap.Text"; break; default: CLASS_NAME = type; break; } let overlays = this.overlays.filter(function(item) { if (!CLASS_NAME) return true; return item.CLASS_NAME === CLASS_NAME; }); return overlays; }; GraphicsLayer.prototype.clear = function() { this._graphicsLayer.clear(); this.overlays = []; }; GraphicsLayer.prototype.setMap = function(wmap) { let self = this; if (wmap === null) { if (!this.wmap) return; this.wmap._map.removeLayer(self._graphicsLayer); this.wmap.graphicsLayers = this.wmap.graphicsLayers.filter(function(item) { if (item === self) return false; return true; }); this.wmap = null; return; } this.wmap = wmap; if (!this._graphicsLayer._map) wmap.graphicsLayers.push(this); this.wmap._map.addLayer(self._graphicsLayer); }; GraphicsLayer.prototype.getMap = function() { return this.wmap; }; GraphicsLayer.prototype.show = function() { this._graphicsLayer.show(); this.visible = this._graphicsLayer.visible; }; GraphicsLayer.prototype.hide = function() { this._graphicsLayer.hide(); this.visible = this._graphicsLayer.visible; }; GraphicsLayer.prototype.getAttributes = function() { return this.config.attributes; }; GraphicsLayer.prototype.setAttributes = function(attributes) { let obj = this.config.attributes; Object.assign(obj, attributes); this.config.attributes = obj; }; GraphicsLayer.prototype.on = function(eventName, handler) { if (!eventName || !handler) return; let self = this; return this._graphicsLayer.on(eventName, function(d) { let overlays = self.overlays.filter(function(o) { return o._graphic === d.graphic; }); d.overlay = overlays[0]; handler && handler.call(self, d); }); }; GraphicsLayer.prototype.off = function(eventObj) { if (eventObj) eventObj.remove(); }; GraphicsLayer.prototype.setVisibility = function(visible) { this.visible = visible; this._graphicsLayer.setVisibility(visible); }; return GraphicsLayer; }(); ARCGIS_MAP_4.Draw = function() { function Draw(wmap, opt) { let obj = {}; Object.assign(obj, opt); this.config = obj; this._draw = new ARCGIS_MAP_4.modules.Draw(wmap._map); if (obj.fillSymbol) { let style = ARCGIS_MAP_4.modules.CartographicLineSymbol["STYLE_SOLID"]; let color = obj.fillSymbol.color ? new ARCGIS_MAP_4.modules.Color(obj.fillSymbol.color) : null; let outlineStyle = obj.fillSymbol.outline && obj.fillSymbol.outline.style ? ARCGIS_MAP_4.modules.CartographicLineSymbol[obj.fillSymbol.outline.style] : ARCGIS_MAP_4.modules.CartographicLineSymbol["STYLE_SOLID"]; let outline = obj.fillSymbol.outline ? new ARCGIS_MAP_4.modules.SimpleLineSymbol( outlineStyle, obj.fillSymbol.outline.color, obj.fillSymbol.outline.width ) : null; let symbol = new ARCGIS_MAP_4.modules.SimpleFillSymbol(style, outline, color); this._draw.setFillSymbol(symbol); } this.wmap = wmap; } Draw.prototype.on = function(eventName, handler) { if (!eventName || !handler) return; let self = this; return this._draw.on(eventName, function(d) { handler && handler.call(self, d); }); }; Draw.prototype.activate = function(type) { this._draw.activate(type); }; Draw.prototype.deactivate = function() { this._draw.deactivate(); }; return Draw; }(); ARCGIS_MAP_4.Color = function() { function Color(color) { this.config = color; this._color = new ARCGIS_MAP_4.modules.Color(color); } return Color; }(); console.log(ARCGIS_MAP_4.Color); ARCGIS_MAP_4.ClusterLayer = function() { function ClusterLayer(opt) { let obj = { attributes: null }; Object.assign(obj, opt); this.config = obj; this.wmap = null; let data = this._getData(obj.markers); delete this.config.data; this._clusterLayer = new ARCGIS_MAP_4.modules.ClusterLayer({ data, distance: obj.distance, id: obj.id, labelColor: obj.styles.labelColor, labelOffset: obj.styles.labelOffset, spatialReference: obj.map._map.spatialReference, fontSize: obj.styles.fontSize }); this.overlays = obj.markers; delete this.config.markers; let defaultSym = new ARCGIS_MAP_4.modules.SimpleMarkerSymbol().setSize(1); let renderer = this.renderer = new ARCGIS_MAP_4.modules.ClassBreaksRenderer( defaultSym, "clusterCount" ); let pictureMarkerSymbol = this._pictureMarkerSymbol = new ARCGIS_MAP_4.modules.PictureMarkerSymbol( obj.styles.icon, obj.styles.size.width, obj.styles.size.height ); if (obj.styles && obj.styles.offset) pictureMarkerSymbol.setOffset(obj.styles.offset.x, obj.styles.offset.y); renderer.addBreak(2, data.length, pictureMarkerSymbol); renderer.addBreak(0, 1, this.overlays[0]._graphic.symbol); this._clusterLayer.setRenderer(renderer); if (obj.map) { this.setMap(obj.map); } this.visible = obj.visible; if (this.visible === false) this.setVisibility(false); delete obj.visible; } ClusterLayer.prototype.setMap = function(wmap) { let self = this; if (wmap === null) { if (!this.wmap) return; this.wmap._map.removeLayer(self._clusterLayer); this.wmap = null; return; } this.wmap = wmap; this.wmap._map.addLayer(self._clusterLayer); }; ClusterLayer.prototype._getData = function(markers) { let self = this; return markers.map(function(marker) { let position = marker.getPosition(); let x = position[0]; let y = position[1]; if (x != 0 && y != 0) { if (self.config.map._map.spatialReference.isWebMercator()) { let p = ARCGIS_MAP_4.modules.webMercatorUtils.geographicToWebMercator( new ARCGIS_MAP_4.modules.Point(x, y, self.config.map._map.spatialReference) ); x = p.x; y = p.y; } } let attributes = marker.getAttributes(); return { x, y, attributes }; }); }; ClusterLayer.prototype.getAttributes = function() { return this.config.attributes; }; ClusterLayer.prototype.setAttributes = function(attributes) { let obj = this.config.attributes; Object.assign(obj, attributes); this.config.attributes = obj; }; ClusterLayer.prototype.setVisibility = function(visible) { visible === false ? this.hide() : this.show(); }; ClusterLayer.prototype.show = function() { this.visible = true; this._clusterLayer.show(); }; ClusterLayer.prototype.hide = function() { this.visible = false; this._clusterLayer.hide(); }; ClusterLayer.prototype.addMarker = function(markers) { if (!(markers instanceof Array)) { markers = [markers]; } this.overlays = this.overlays.concat(markers); let data1 = this._getData(markers); let renderer = this._clusterLayer.renderer; renderer.removeBreak(2, this._clusterLayer._clusterData.length); renderer.addBreak(2, this._clusterLayer._clusterData.length + 1, this._pictureMarkerSymbol); this._clusterLayer._addData(data1); }; ClusterLayer.prototype.removeMarker = function(index) { let overlay = this.overlays.splice(index, 1); let renderer = this._clusterLayer.renderer; renderer.removeBreak(2, this._clusterLayer._clusterData.length); renderer.addBreak(2, this._clusterLayer._clusterData.length - 1, this._pictureMarkerSymbol); this._clusterLayer._removeData(index); return overlay; }; ClusterLayer.prototype.getAllMarkers = function() { return this.overlays; }; ClusterLayer.prototype.on = function(eventName, handler) { if (!eventName || !handler) return; let self = this; return this._clusterLayer.on(eventName, function(d) { handler && handler.call(self, d); }); }; ClusterLayer.prototype.showInfowindow = function(opt) { this.wmap._infoWindow.setTitle(opt.title); this.wmap._infoWindow.setContent(opt.content); this.wmap._infoWindow.show(opt.point); }; return ClusterLayer; }(); ARCGIS_MAP_4.OverviewMap = function() { function OverviewMap(opt, srcNodeRef) { this.config = opt; this.wmap = opt.map; opt.map = opt.map._map; this.visible = opt.visible && opt.visible === true ? opt.visible : false; if (opt.type && opt.type == "custom") { this.config.attachTo = this.config.attachTo ? this.config.attachTo : "top-right"; this.config.expandFactor = this.config.expandFactor ? this.config.expandFactor : 2; } else { this._overviewMap = new ARCGIS_MAP_4.modules.OverviewMap(opt, srcNodeRef); } delete opt.visible; } OverviewMap.prototype.startup = function() { if (this.config.type && this.config.type == "custom") { let display1 = "block"; if (this.visible === false) display1 = "none"; let el = document.createElement("div"); let classN = function(attachTo) { let c = "esriOverviewMap ovwTR"; switch (attachTo) { case "bottom-right": c = "esriOverviewMap ovwBR"; break; case "bottom-left": c = "esriOverviewMap ovwBL"; break; case "top-left": c = "esriOverviewMap ovwTL"; break; } return c; }(this.config.attachTo); el.className = classN; el.id = this.config.id; el.style.userSelect = "none"; this.config.map.container.append(el); let ovwContainer_w = this.config.map.width / 4; let ovwContainer_h = this.config.map.height / 4; let ovwHighlight_w = ovwContainer_w / this.config.expandFactor; let ovwHighlight_h = ovwContainer_h / this.config.expandFactor; let ovwHighlight_l = (ovwContainer_w - ovwHighlight_w) / 2; let ovwHighlight_t = (ovwContainer_h - ovwHighlight_h) / 2; let opacity = this.config.opacity || 0.5; let color = this.config.color || "#000000"; let html = '<div class="ovwContainer" style="display:' + display1 + "; width: " + ovwContainer_w + "px; height: " + ovwContainer_h + 'px; "> <div id="' + this.config.id + '-map" style="width: 100%; height: 100%;" class="map"> <div class="ovwHighlight" title="\u62D6\u52A8\u4EE5\u66F4\u6539\u5730\u56FE\u8303\u56F4" style="border: 1px solid rgb(255, 255, 255); background-color: ' + color + "; opacity: " + opacity + "; display: block; left: " + ovwHighlight_l + "px; top: " + ovwHighlight_t + "px; width: " + ovwHighlight_w + "px; height: " + ovwHighlight_h + 'px;"></div> </div> </div>'; el.innerHTML = html; let obj = {}; obj = Object.assign({}, this.wmap.config); delete obj.maxZoom; delete obj.minZoom; obj.zoom = Math.ceil(obj.zoom * 0.75); let wmap = new ARCGIS_MAP_4.Map(this.config.id + "-map", obj); wmap.on("load", function() { wmap._map.disableDoubleClickZoom(); wmap._map.disableKeyboardNavigation(); wmap._map.disablePan(); wmap._map.disableScrollWheelZoom(); }); this.overviewMap = wmap; let t_obj = this.config.tileLayer.config, tileLayer_obj; tileLayer_obj = Object.assign({}, t_obj); tileLayer_obj.id = tileLayer_obj.id + "_tileLayer"; let tileLayer = new ARCGIS_MAP_4.TileLayer(tileLayer_obj); let layers = []; layers.push(tileLayer); wmap.add(layers); this.wmap.on("extent-change", function(evt) { try { let zoom = this.getZoom(); let center = this.getCenter(); wmap.centerAndZoom(center, Math.ceil(zoom * 0.75)); } catch (e) { } }); let ovwHighlight = this.config.map.container.querySelector(".ovwHighlight"); let self = this; drawImg(this.config.map.container.querySelector(".ovwHighlight"), function() { let top = parseInt(ovwHighlight.style.top); let left = parseInt(ovwHighlight.style.left); let width = ovwHighlight.offsetWidth; let height = ovwHighlight.offsetHeight; let point = wmap._map.toMap( ARCGIS_MAP_4.modules.ScreenPoint(left + width / 2, top + height / 2) ); let lngLatPoint = wmap.pixelToLngLat(point); let lngLat = [lngLatPoint.x, lngLatPoint.y]; wmap.setCenter(lngLat); s