Modules that make it easier to use openlayers with sync naver, kakao, vworld Map
Module based on openlayers 8.2
- npm i uitgis-map-library
UitMap
import UitMap from "uitgis-map-library/uitMap";
const map = new UitMap({
target: "map",
layers: initLayers(),
view: new View({ center, zoom }),
});
map.init();
//Method to create a map
init()
//Methods to move to the previous or next view
setMove(type: "prev" | "next")
//Method to get the openlayer map of UitMap
getMap()
//Method to get the view of UitMap
getView()
//Method to change the view of UitMap, changes the map's view to the given view
setView(view : View)
Explanation for addLayer is in the layer section
/**
Method to add a listener for managing the map's on method
type is the first parameter of map.on, such as 'change','click','postrender', etc., a collection of map object events,
Refer to Fires in [openlayers docs](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html)
key is a unique value, fn is the callback function registered with map.on('type',fn)
*/
addListener(type, evt: { key: string; fn: any })
//Method to clear all listeners in UitMap, and to stop them from working on the map
removeAllListeners()
//Method to delete all listeners of a certain type
removeListenerByType(type)
//Method to delete a specific value with a certain key of a certain type
removeListenerByKey(type, key)
//Method to add an overlay, this overlay is not managed by UitMap
addOverlayer(overlayer:Overlay)
//Method to delete a specific overlay
removeOverlay(overlay: Overlay)
//Method to return all overlays
getOverlays()
//Method to return an overlay with a specific id
getOverLayById(id)
/**
Method to delete all custom added interactions
If you wish to add an interaction that you do not want to delete, execute interaction.set("necessary", true) to add
*/
removeAllInteractions()
/**
Method to delete all custom added controls
If you wish to add a control that you do not want to delete, execute control.set("necessary", true); to add
*/
removeAllControls()
UitMiniMap(overview)
import UitMiniMap from "uitgis-map-library/map/uitMiniMap";
/**
opt: {target: miniBaseMap, the id of the DOM where the minimap will be drawn}
referenceBaseMap: Refers to UitBaseMap
referenceMap: Refers to UitMap
view: Refers to the current map's view
*/
new UitMiniMap({
baseMapOpt: {
target: "overview-baseMap",
},
mapOpt: {
target: "overview-map",
},
referenceBaseMap: state.value.baseMap,
view: map.getMap().getView(),
referenceMap: map,
});
UitBaseMap
import UitBaseMap from "uitgis-map-library/baseMap/uitBaseMap";
/**
target: The current DOM id to refer to
Operates with vWorld, kakao, naver keys.
If not using naver, you can put naver: ''.
ex) baseMapKey: "vWorld_[normal | satellite | hybrid | midnight | white]",
"kakao_[normal | satellite | hybrid]",
"naver_[normal | satellite | hybrid | terrain]"
uitMap: The UitMap to refer to
*/
const baseMap = new UitBaseMap({
target: "baseMap",
baseMapApiKey: {
vWorld: vWorldKey,
kakao: kakaoKey,
naver: naverKey,
},
uitMap: map,
});
/**
when you first init basemap
callBaseMapType(parameter) parameter is the same as baseMapKey
*/
baseMap.firstInit()
UitVworldBaseMap / UitKakaoBaseMap / UitNaverBaseMap
/**
key: vWorld, kakao, naver key
target: The DOM id where the map will be drawn
initMap(code) the value excluding vWorld, kakao, naver from what was entered in baseMapApiKey
*/
const uitVWorldBaseMap = new UitVworldBaseMap({
key: vworldKey,
target: "baseMap",
});
uitVWorldBaseMap.initMap("normal")
const uitKakaoBaseMap = new UitKakaoBaseMap({
key: kakaoKey,
target: "baseMap",
});
uitKakaoBaseMap.initMap("normal");
const uitNaverBaseMap = new UitNaverBaseMap({
key: naverKey,
target: "baseMap",
});
uitNaverBaseMap.initMap("normal");
Draw & Measure Interaction
UitDrawInteraction
import UitDrawInteraction from "uitgis-map-library/interaction/uitDraw";
/**
drawStyle: Style for the Draw object - StyleLike object
featureStyle: Style for the vectorLayer object - StyleLike object
map: The openlayers Map object that the interaction will refer to
drawType: "Polygon" | "LineString" | "Box" | "Circle" | "Point";
layerId: The id value among the properties of VectorLayer (used for unique management)
useFreehand: If used, freehand drawing mode
useSnap: Whether to use Snap
*/
const drawInteraction = new UitDrawInteraction({
drawStyle: drawStyle(DrawType.Point),
featureStyle: drawStyle(DrawType.Point),
map: map.getMap(),
layerId: "drawPoint",
drawType: DrawType.Point,
useFreehand: false,
useSnap: false,
});
UitMeasureInteraction
import UitMeasureInteraction from "uitgis-map-library/interaction/uitMeasure";
/**
geometryStyle: Style for the feature
lineLabelStyle: Style for the label between measured lines
lineBreakPointStyle: Style for the bending point
measureLabelStyle: Style for the measured result value
*/
const style = {
geometryStyle: new Style({
stroke: new Stroke({
}),
image: new CircleStyle({
}),
}),
lineLabelStyle: new Style({
text: new Text({
}),
image: new RegularShape({
}),
}),
lineBreakPointStyle: new Style({
image: new CircleStyle({
}),
}),
measureLabelStyle: new Style({
text: new Text({
}),
}),
}
/**
measureStyle: Style for the Draw object - the above style object
featureStyle: Style for the vectorLayer object - the above style object
map: The openlayers Map object that the interaction will refer to
measureType: "Polygon" | "LineString";
layerId: The id value among the properties of VectorLayer (used for unique management)
useFreehand: If used, freehand drawing mode
useSnap: Whether to use Snap
*/
new UitMeasureInteraction({
measureStyle: style,
featureStyle: style,
map: map.getMap(),
layerId: "measurePolygon",
measureType: "Polygon",
useFreehand: false,
useSnap: false,
});
UitCircleMeasureInteraction
import UitSelectInteraction from "uitgis-map-library/interaction/uitSelect";
/**
map: openlayers Map
condition: ol/events/condition
style: Style object
useMulti: true -> all features corresponding to that pixel are selected at once
*/
const select = new UitSelectInteraction({
map: map.getMap(),
condition: singleClick,
style: new Style({
stroke: new Stroke({
color: "rgba(255, 255, 255, 1.0)",
width: 2,
}),
}),
useMulti: false,
});
/**
type: 'change' | 'select' etc., 0th parameter value of the Select object's on function
Has the format {type: [{key, fn}]} so it is distinguished by key. fn is the execution function.
*/
select.addEvent(type evt: { key, fn })
ex) Example of clicking a feature and removing it from the vector layer
function selectHandler(e) {
const select = uitInteractionManager.getInteraction("select");
e.target.getFeatures().forEach((feature) => {
const layer = select.getInteraction().getLayer(feature);
layer.getSource().removeFeature(feature);
});
}
removeFeatureStartButton.addEventListener("click", () => {
const select = uitInteractionManager.getInteraction("select");
select.setActive(true);
select.addEvent(["select"], { key: "selectHandler", fn: selectHandler });
});
UitCircleMeasureInteraction
import UitCircleMeasureInteraction from "uitgis-map-library/interaction/uitCircleMeasure";
/**
geometryStyle: Style for the feature
lineLabelStyle: Style for the label between measured lines
*/
const circleStyle = {
geometryStyle: new Style({
fill: new Fill({
}),
stroke: new Stroke({
}),
image: new CircleStyle({
}),
}),
lineLabelStyle: new Style({
text: new Text({
}),
image: new RegularShape({
}),
}),
};
/**
measureStyle: Style for the Draw object - above style object
featureStyle: Style for the vectorLayer object - above style object
map: The openlayers Map object that the interaction will refer to
measureType: "Circle"
layerId: The id value among the properties of VectorLayer (used for unique management)
useFreehand: If used, freehand drawing mode
useSnap: Whether to use Snap
*/
new UitCircleMeasureInteraction({
circleStyle: circleStyle,
featureStyle: circleStyle,
map: map.getMap(),
layerId: "measureCircle",
type: "Circle",
useFreehand: false,
useSnap: false,
});
Common Usage for Measure & Draw
import UitMeasureInteraction from "uitgis-map-library/interaction/uitMeasureInteraction";
const measurePolygon = new UitMeasureInteraction({
measureStyle: style,
featureStyle: style,
map: map.getMap(),
layerId: "measurePolygon",
measureType: "Polygon",
useFreehand: false,
useSnap: false,
});
measurePolygon.setActive(isActive) isActive: boolean
For measure, use .modifyMeasure
For draw, use .modifyDraw
Change through the return value of {setActive, setEvents}
setActive(true) to activate Select, Modify objects & deactivate (Measure | Draw) objects, vice versa when opposite
setEvents(true) -> add select event (false) => delete event
destroy(isRemoveLayer: boolean = true) delete the corresponding layer from the Map object if isRemoveLayer is true
clear() clears the vector layer where this interaction is drawn
getFeatures() features in the vector layer where this interaction is drawn
removeFeature(feature) delete a specific feature
getLayer() the vector layer where this interaction is drawn
UitDragPanInteraction / UitFullScreenInteraction / UitOverviewMapInteraction / UitDragRotateZoomInteraction / UitDbClickDragZoomInteraction / UitZoomToExtentInteraction / UitDragZoomInteraction
import from "uitgis-map-library/interaction/";
/**
map: openlayers Map object
dragPanOptions: options for openlayers DragPan
(Kinetic is an object that indicates the level of inertia during movement)
*/
const dragPan = new UitDragPanInteraction({
map: map.getMap(),
dragPanOptions: {
kinetic: new Kinetic(-0.005, 0.05, 100),
},
});
/**
map: openlayers Map object
*/
const fullScreen = new UitFullScreenInteraction({
map: map.getMap(),
});
/**
map: openlayers Map object
overviewOptions: options for openlayers OverviewMap
(Use UitMinimap recommended when using BaseMap)
*/
const overviewMap = new UitOverviewMapInteraction({
map: map.getMap(),
overviewOptions: {
target: "miniMap",
className: "ol-overviewmap ol-custom-overviewmap",
layers: [
new TileLayer({
source: new OSM(),
}),
],
collapsed: false,
},
});
/**
map: openlayers Map object
*/
const dragRotateZoom = new UitDragRotateZoomInteraction({
map: map.getMap(),
});
/**
map: openlayers Map object
*/
const dbClickDragZoom = new UitDbClickDragZoomInteraction({
map: map.getMap()
});
/**
map: openlayers Map object
zoomToExtentOptions: options for openlayers zoomToExtent (when extent is set, moves to that extent)
*/
const zoomToExtent = new UitZoomToExtentInteraction({
map: map.getMap(),
zoomToExtentOptions: {
extent: [
config.center[0] - 100,
config.center[1] - 100,
config.center[0] + 100,
config.center[1] + 100,
],
},
});
/**
map: openlayers Map object
dragZoomOptions: options for openlayers dragZoom (out: true -> zoom out,
condition: function () {
return click;
}) //click is click from ol/events/condition,
*/
const dragZoom = new UitDragZoomInteraction({
map: map.getMap(),
dragZoomOptions: {
out: true,
condition: function () {
return click;
},
},
})
How to Use Control Interaction
const dragPan = new UitDragPanInteraction({
map: map.getMap(),
dragPanOptions: {
kinetic: new Kinetic(-0.005, 0.05, 100),
},
});
Use it by checking for the presence of dragPan.setActive
Almost similar to using openlayers' control
Draw & Measure, Control Management Manager
UitInteractionManager
import UitInteractionManager from "uitgis-map-library/interaction/interaction";
//props are an array of {key,value}, assigning a UitInteraction for the value corresponding to the key.
const uitInteractionManager = new UitInteractionManager(props);
/**
addInteraction(key, value) assigns a UitInteraction to the key with value.
Setting [interaction].setActive(false) as a default and using it as an example.
*/
measurePolygon.setActive(false);
drawPolygon.setActive(false);
drawCircle.setActive(false);
drawLine.setActive(false);
select.setActive(false);
uitInteractionManager.addInteraction("measurePolygon", measurePolygon);
uitInteractionManager.addInteraction("drawPolygon", drawPolygon);
uitInteractionManager.addInteraction("drawCircle", drawCircle);
uitInteractionManager.addInteraction("drawLine", drawLine);
uitInteractionManager.addInteraction("select", select);
This is how you register it.
//(key) -> get the UitInteraction added with addInteraction
uitInteractionManager.getInteraction("drawPolygon")
/**
([key],isActive) only changes the isActive value for the UitInteraction corresponding to the key
(Beware, all other UitInteractions are set to false)
*/
uitInteractionManager.setActiveInteracionList(["drawPolygon"], true)
//(key) -> destroy the Interaction corresponding to the key
uitInteractionManager.destroy(key : string)
//Set all uitInteraction active in the Manager to false
uitInteractionManager.clearInteractionList()
ex) toggle interaction
if (uitInteractionManager.getInteraction("drawPolygon").getActive()) {
uitInteractionManager.setActiveInteracionList(["drawPolygon"], false);
return;
}
uitInteractionManager.setActiveInteracionList(["drawPolygon"], true);
ex) modify Interaction
const { setEvents, setActive } = uitInteractionManager
.getInteraction("measurePolygon")
.modifyMeasure();
UitWMSLayer
import UitWMSLayer from "uitgis-map-library/layer/uitWMSLayer.js";
/**
interface SourceParamsProps {
KEY: string;
LAYERS: Array;
CRS?: string;
STYLES?: string;
FORMAT?: string;
BGCOLOR?: string;
EXCEPTIONS?: string;
LABEL?: string;
GRAPHIC_BUFFER?: string;
ANTI?: string;
TEXT_ANTI?: string;
VERSION?: string;
_CQL_FILTER?: { target: string; value: string }[];
}
baseUrl: Map call URL
sourceParams: SourceParamsProps
crossOrigin: "Anonymous" recommended, otherwise need to check cors issues
[crossOrigin](https://developer.mozilla.org/ko/docs/Web/HTML/CORS_enabled_image)
properties: inject properties with key, value -> recommended to include an id for management
isSingleTile: If true, uses ImageLayer layer with ImageWMS source type, if false, uses TileLayer layer with TileWMS source type
opacity: transparency
visible: boolean to display the layer
zIndex: zIndex
*/
const tileWMSLayer = new UitWMSLayer({
baseUrl: "",
sourceParams: sourceParams,
crossOrigin: "Anonymous",
properties: {
id: "wmsLayer",
type: "wms",
},
isSingleTile: false,
visible: true,
opacity: 1,
zIndex: 100,
});
//Returns unique layerKey
tileWMSLayer.getLayerKey()
//When adding a layer, add uitWMSLayer
(map as UitMap).addWMSLayer(tileWMSLayer);
//When deleting, manage through the key of UitWMSLayer
(map as UitMap).removeLayer(layerKey);
//Method to create ImageWMS Source
createImageWMS({ baseUrl, sourceParams }: { baseUrl: string; sourceParams: SourceParamsProps })
//Method to create TileWMS Source
createTileWMS({ baseUrl, sourceParams }: { baseUrl: string; sourceParams: SourceParamsProps })
//Method to return source of UitWMSLayer
getSource()
//Method to change the source assigned to the layer and UitWMSLayer
setSource(source: TileWMS | ImageWMS)
//Method to return parameters of the Source
getSourceParams()
/**
Method to change parameters of the Source, params are objects composed of parts of SourceParamsProps
Note, update acts as a patch
*/
updateParams(params: Partial)
/**
Method to change UitWMSLayer's sourceParams
Note, does not change layer's parameters
*/
updateSourceParams(params: Partial)
//Method to change sourceParams' KEY and source's Key
setLayerParamKey(KEY:string)
//Method to change sourceParams' LAYERS and source's LAYERS
setLAYERS(LAYERS: Array)
//Method to return sourceParams
getSourceParams()
//Method to return KEY of sourceParam
getParamKEY()
//Method to return LAYERS of sourceParam
getParamLayers()
ex) When adding a callback,
loadCallback (Map loading)
endCallback (End of map loading)
errorCallback (Error during map loading)
Use specific callback functions for certain intervals
(map as UitMap).addWMSLayer(tileWMSLayer, {
callback: {
loadCallback: () => {
mapContainer.style.opacity = "0.3";
},
endCallback: () => {
mapContainer.style.opacity = "1";
},
errorCallback: () => console.log(1),
},
});
UitWMTSLayer
import UitWMTSLayer from "uitgis-map-library/layer/uitWMTSLayer.js";
/**
url: URL to call
key: Key for the URL to call
layerType: Type of the layer
*/
const wmtsCapability = await UitWMTSLayer.getWMTSCapabilities({
key,
layerType: "wmts",
url,
});
/**
layers: Array of Layer names to call
url: URL to call
wmtsCapability: Injecting the wmtsCapability created above
*/
const source = UitWMTSLayer.createWMTSByCapability({
layers: ["D$GMPSS_P1_USE"],
url,
wmtsCapability,
});
/**
baseUrl: URL to call
source: Source created above
properties: Inject properties as key, value -> It is recommended to include an id for management
visible: Boolean for layer visibility
wmtsCapability: Injecting the wmtsCapability created above
*/
tileWMTSLayer = new UitWMTSLayer({
baseUrl: url,
source,
properties: {
id: "wmtsLayer",
type: "wmts",
},
visible: true,
wmtsCapability,
});
//Method to call the option values used when creating UitWMTSLayer
tileWMTSLayer.getOption()
//Method to return the unique layerKey
tileWMTSLayer.getLayerKey()
// Method to add a layer when adding uitWMSLayer
(map as UitMap).addWMTSLayer(tileWMTSLayer);
// Method to manage by the key of UitWMSLayer when deleting
(map as UitMap).removeLayer(layerKey);
ex) When adding a callback,
loadCallback (when the map is loading)
endCallback (when the map loading is finished)
errorCallback (when an error occurs during map loading)
Using specific callback functions for certain intervals
(map as UitMap).addWMTSLayer(tileWMTSLayer, {
callback: {
loadCallback: () => {
mapContainer.style.opacity = "0.3";
},
endCallback: () => {
mapContainer.style.opacity = "1";
},
errorCallback: () => console.log(1),
},
});
uitWCSLayer
import UitWFSLayer from "uitgis-map-library/layer/uitWFSLayer";
const wcsLayer = new UitWCSLayer({
baseUrl: "http://194.66.252.155/cgi-bin/BGS_EMODnet_bathymetry/ows",
identifier: "BGS_EMODNET_AegeanLevantineSeas-MCol",
version: "2.0.1",
format: "image/jpeg",
boundingBox: [22.23541667, 30.39790787, 36.73542827, 41.38958333],
useScaleRefresh: false,
});
map.addWCSLayer(wcsLayer, { isExtent: true });
UitWFSLayer
import UitWFSLayer from "uitgis-map-library/layer/uitWFSLayer";
/**
baseUrl: URL to call
source: VectorSource
style: Style
properties: Inject properties as key, value -> It is recommended to include an id for management
visible: Boolean for layer visibility
opacity: Layer opacity
zIndex: Layer z-index
*/
const wfsLayer = new UitWFSLayer({
baseUrl: "",
source: new VectorSource(),
style: new Style({
stroke: new Stroke({
color: "rgba(0, 0, 255, 1.0)",
width: 2,
}),
image: new CircleStyle({
radius: 3,
fill: new Fill({ color: "black" }),
stroke: new Stroke({
color: "black",
}),
}),
text: new Text({
font: "0.8rem sans-serif",
fill: new Fill({ color: "white" }),
stroke: new Stroke({
color: "rgba(0, 0, 0, 1)",
width: 4,
}),
}),
zIndex: 100,
}),
properties: { id: "wfsLayer", type: "wfsLayer" },
layerType: "vector",
visible: true,
opacity: 1,
zIndex: 100,
});
wfsLayer.addFeature(feature) // Adds a feature
wfsLayer.addFeatures(feature[]) // Adds an array of features
setSource(source) // Changes the current vector layer source
clear() // Deletes all features in the current vector layer
/**
Method to delete a feature
The internal logic of the openlayers vectorsource's removeFeature method
compares the feature's uid, but issues often arise where the removal doesn't work
due to the vue proxy pattern or when the feature is assigned, resulting in the object being wrapped.
In such cases, it is recommended to delete through comparison by feature properties.
*/
removeFeature(feature) // Deletes a specific feature
/**
baseUrl: URL to call
layerKey: Key for querying the feature
layerList: List of layers for querying the feature
filter: openlayer Filter object,
srsName: Name of the coordinate system
return: Promise type
*/
UitWFSLayer.getFeatures ({
baseUrl: "",
layerKey: layerKey,
layerList: [],
filter: intersects("SHAPE", feature.getGeometry(), "EPSG:3857"),
srsName: "EPSG:3857",
})
UitVectorLayer
import UitVectorLayer from "uitgis-map-library/layer/uitVectorLayer";
/**
baseUrl: URL to call
source: VectorSource
style: Style
properties: Inject properties as key, value -> It is recommended to include an id for management
visible: Boolean for layer visibility
opacity: Layer opacity
zIndex: Layer z-index
*/
const uitVectorLayer = new UitVectorLayer({
baseUrl: "",
source: new VectorSource(),
style: Style,
properties: { id: "vectorLayer", type: "vectorLayer" },
layerType: "vector",
visible: true,
opacity: 1,
zIndex: 100,
});
Usage is the same as wfsLayer.
UitWebglTileLayer
// Used in a manner similar to UitWMSLayer.
/**
style type {
variables?:
| {
[x: string]: string | number;
}
| undefined;
color?: ExpressionValue | undefined;
brightness?: ExpressionValue | undefined;
contrast?: ExpressionValue | undefined;
exposure?: ExpressionValue | undefined;
saturation?: ExpressionValue | undefined;
gamma?: ExpressionValue | undefined;
}
*/
import UitWebglTileLayer from "uitgis-map-library/layer/uitWebglTileLayer";
const uitWebglTileLayer = new UitWebglTileLayer({
baseUrl: "",
sourceParams: sourceParams,
crossOrigin: "Anonymous",
properties: {
id: "wmsLayer",
type: "wms",
},
layerType: "wms",
visible: true,
opacity: 1,
zIndex: 100,
style : {
}
});
(map as UitMap).addWebglTileLayer(uitWebglTileLayer);
// Method to change style, where style type is { [x: string]: number }
(map as UitMap).updateStyle(style);
UitWebGLVectorLayer
import UitWebGLVectorLayer from "uitgis-map-library/layer/uitWebGLVectorLayer";
//For style, please refer to [openlayer example](https://openlayers.org/en/latest/examples/style-expressions.html)
//and [openlayers docs](https://openlayers.org/en/latest/apidoc/module-ol_style_expressions.html).
webGLVectorLayer = new UitWebGLVectorLayer({
webglLayerProps: {
source: vectorSource,
style: expressionsStyle,
},
baseUrl: "",
});
//Add layer to map
(map as UitMap).addWebglVectorLayer(webGLVectorLayer);
/**
Precautions when using webgl Layer
If you do not set the variables yourself in the part where style is used,
or if they are not in the feature properties, an error may occur.
style: {
'stroke-color': ['get', 'strokeColor'],
'stroke-width': ['get', 'strokeWidth'],
'circle-radius': ['get', 'circleRadius'],
'circle-stroke-color': ['get', 'circleStrokeColor'],
'circle-stroke-width': ['get', 'circleStrokeWidth'],
'circle-fill-color': ['get', 'circleFillColor'],
}
If you created a style object like this, before adding the feature,
you must put the corresponding values in the properties of the feature, change the style, or use it by changing the expression.
*/
features?.forEach((feature) => {
feature.setProperties({
strokeWidth: 2,
strokeColor: color_main,
circleRadius: 3,
circleStrokeColor: color_main,
circleStrokeWidth: 0,
circleFillColor: color_main,
});
});
UitWebGLVectorLayer
import UitWebglPointsLayer from "uitgis-map-library/layer/uitWebglPointsLayer";
//For style, please refer to [openlayer example](https://openlayers.org/en/latest/examples/style-expressions.html)
//and [openlayers docs](https://openlayers.org/en/latest/apidoc/module-ol_style_expressions.html).
webglPointsLayer = new UitWebglPointsLayer({
source: vectorSource,
baseUrl: "",
properties: { id: "webglPointsLayer", type: "webglPointsLayer" },
style: expressionStyle,
visible: true,
});
//Add layer to map
(map as UitMap).addWebglLayer(webglPointsLayer);
Usage of UitLayer
addLayer is explained in each usage
/** Method to delete a layer
layerKey is generated when each layer is created.
It can be deleted through the value obtained by the getLayerKey method in each layer
*/
uitMap.removeLayer(layerKey: string)
/**
Method to add a listener for managing the on method of a layer or source
type is the collection of events for layer, source objects, used as the first parameter of (layer | source).on
Since the first parameter of on varies for each type for layer or source, please note
key is a unique value, fn is a callback function registered as map.on('type',fn)
target: a variable to indicate whether the target of the listener is layer or source
*/
addListener(type, evt: { key: string; fn: any; target: "layer" | "source" })
//Method to remove all listeners and unregister events
removeAllListeners()
//Method to remove all listeners of a specific type and unregister events
removeListenerByType(type)
//Method to remove a listener of a specific type with the same key value and unregister events
removeListenerByKey(type, key)
UitMapPrint
This is a utility object that displays the target to be printed on a modal map and prints it including the modal.
/**
The map to print
*/
new UitModalMap({
baseMapOpt: {
target: "modalBaseMap",
},
mapOpt: {
target: "modalMap",
},
referenceBaseMap: baseMap,
view: map.getMap().getView(),
referenceMap: map,
});
/**
Object for printing
baseMap : UitBaseMap
printTarget: The id of the DOM to be printed
kakaoStaticTarget: The id of the DOM to draw Kakao's staticMap,
(Due to Kakao's policy, a staticMap is needed for printing)
openlayersTarget: The id of the DOM where the current map is drawn
*/
const uitMapPrint = new UitMapPrint({
baseMap: baseMap,
printTarget: "print",
kakaoStaticTarget: "staticMap",
openlayersTarget: "modalMap",
});
/**
type: The code value of UitBaseMap (naver, vWorld, kakao)
DOMOption {
DOM: HTMLElement;
imgTarget: string;
contentId?: string;
}
{
DOM: The entire DOM to be printed,
imgTarget: The id of the DOM where the image should be placed within the entire DOM to be printed,
contentId: The id of the DOM containing both basemap and map
}
option? is mandatory when the code value is kakao due to Kakao's policy
{useProxy : if using a proxy, proxyUrl: the url when proxying}
ex) Setting in vite (vite.config.ts) in dev
proxy: {
"/staticMap": {
target: "https://map2.daum.net/",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/staticMap/, ""),
},
}
*/
print(type: string, DOMOption: DOMOption, option?: { useProxy: boolean; proxyUrl: string })
// ex) An img will be inserted into the imgTarget inside the DOM to be printed and it will be printed.
const title = document.createElement("div");
title.textContent = "hihi";
const body = document.createElement("div");
body.id = "imgTarget";
const contents = document.createElement("div");
contents.textContent = "foot";
const DOMToBePrinted = document.createElement("div");
DOMToBePrinted.append(title, body, contents);
uitMapPrint.print(
"kakao",
{ DOM: DOMToBePrinted, contentId: "modal-content", imgTarget: "imgTarget" },
{ useProxy: true, proxyUrl: "/staticMap" }
);
uitMapPrint.print(
"naver",
{ DOM: DOMToBePrinted, contentId: "modal-content", imgTarget: "imgTarget" }
);
uitMapPrint.image("naver");
uitMapPrint.image("kakao", { proxyUrl: "/staticMap" });
UitUploadFeature
/**
map: The target Openlayers map object
source: The VectorSource where features will be drawn
*/
const uitUploadFeature = new UitUploadFeature({
map: map.getMap(),
source: vectorLayer?.getSource(),
});
/**
Analyzes the file and generates features.
The file must include (proj, shp, dbf) files to work properly.
*/
uitUploadFeature.init(file)
//Retrieves the features from UitUploadFeature.
uitUploadFeature.getFeatures()
//
uitUploadFeature.uploadSource(features,option)
// ex ) The file received via input, type=file
const inputFile = document.createElement("input");
inputFile.type = "file";
inputFile.addEventListener("change", async (e: any) => {
const file = e.target!.files[0];
await uitUploadFeature.init(file);
const features = uitUploadFeature.getFeatures();
uitUploadFeature.uploadSource(features!, { useExtent: true });
});