preface
Possible in the real front project development, we use the hypergraph API loading of hypergraph mapping service, then customer requirements can be a figure of heaven and earth and hypergraph service switch, then will use in terms of screen visualization to the nerazzurri background map world, online articles is mixed and disorderly, no, I do summarized here in combination with the usual development, facilitate everybody, I also hope you can share your experience.
1. Introduce hypergraph apis
Here IS the online JS address of the hypergraph directly introduced in the HTML file
<script type="text/javascript"src="https://iclient.supermap.io/web/libs/iclient8c/libs/SuperMap.Include.js"></script>
Copy the code2. Add JS files to expand the map of heaven and Earth
Here is also a direct take of the code encapsulated by others, you can find examples on the Internet.
/* eslint-disable */
/ * * *@requires window.SuperMap/Layer/CanvasLayer.js
* @requires window.SuperMap/Layer/Grid.js
* @requires window.SuperMap/Tile/Image.js
*/
/ * * * Class: window. SuperMap. Layer. Tianditu * map service Layer Class. * is used to display the map world map service, use the < Windows. SuperMap. Layer. Tianditu > * constructor can create the heavens and the earth tutu Layer, more information see: * * Inherits the from: * -
*/
window.SuperMap.Layer.Tianditu = window.SuperMap.Class(window.SuperMap.CanvasLayer, {
/** * APIProperty: layerType * {String} layerType (vec: vector layer, img: image layer, ter: topographic layer) */
layerType: 'vec'.//(veC: Vector layer, CVA: Vector label layer, img: Image layer, CIA: Image label layer, TER: Terrain, CTA: Terrain label layer)
/** * APIProperty: isLabel * {Boolean} Is a label layer
isLabel: false./** * Property: attribution * {String} The layer attribution. */
attribution:
"Data by <a style='white-space: nowrap' target='_blank' href='http://www.tianditu.com'>Tianditu</a>"./** * Property: url * {String} image url. */
url:
'http://t${num}.tianditu.com/DataServer?T=${type}_${proj}&x=${x}&y=${y}&l=${z}&tk=8177363d1b5e8f65ab85876dd85ca41f'.//cva_url:"http://t${num}.tianditu.com/DataServer?T=cva_${proj}&x=${x}&y=${y}&l=${z}",
/** * Property: zOffset * {Number} Z offset */
zOffset: 1./** * APIProperty: dpi * {Float} Number of pixels per inch on the screen. * This parameter is used in conjunction with the layer scale to calculate the resolution of the layer below that scale. The default is 96. * /
dpi: 96./ * * * Constructor: window. SuperMap. Layer. Tianditu * * * Example created the heavens and the earth tutu Layer: * (code) * var tiandituLayer = new window.SuperMap.Layer.Tianditu(); * (end) */
initialize: function(options) {
var me = this;
me.name = Map of heaven and Earth;
// options = window.SuperMap.Util.extend({
// maxExtent: new window.SuperMap.Bounds(
// minX, minY, maxX, maxY
/ /),
// tileOrigin:new window.SuperMap.LonLat(minX, maxY),
// //maxResolution:maxResolution,
// //minResolution:minResolution,
// resolutions:resolutions,
// units:me.units,
// projection:me.projection
// }, options);
window.SuperMap.CanvasLayer.prototype.initialize.apply(me, [me.name, me.url, null, options]);
},
/**
* APIMethod: clone
* 创建当前图层的副本。
*
* Parameters:
* obj - {Object}
*
* Returns:
* {<window.SuperMap.Layer.Tianditu>} 新的图层。
*/
clone: function(obj) {
var me = this;
if (obj == null) {
obj = new window.SuperMap.Layer.Tianditu(me.name, me.url, me.params, me.getOptions());
}
obj = window.SuperMap.CanvasLayer.prototype.clone.apply(me, [obj]);
obj._timeoutId = null;
return obj;
},
/** * Method: getTileUrl ** Parameters: * xyz - {Object} */
getTileUrl: function(xyz) {
var me = this;
var proj = this.projection;
if (proj.getCode) {
proj = proj.getCode();
}
if (proj == 'EPSG:4326') {
var proj = 'c';
} else {
var proj = 'w';
}
var x = xyz.x;
var y = xyz.y;
var z = xyz.z + me.zOffset;
var num = Math.abs((xyz.x + xyz.y) % 7);
var lt = this.layerType;
if (this.isLabel) {
if (this.layerType == 'vec') lt = 'cva';
if (this.layerType == 'img') lt = 'cia';
if (this.layerType == 'ter') lt = 'cta';
}
var url = window.SuperMap.String.format(me.url, {
num: num,
x: x,
y: y,
z: z,
proj: proj,
type: lt
});
return url;
},
/** * Method: setMap * Set the map property for the layer. This is done through an accessor * so that subclasses can override this and take special action once * they have their map variable set. * * Here we take care to bring over any of the necessary default * properties from the map. * * Parameters: * map - {
} */
setMap: function(map) {
window.SuperMap.CanvasLayer.prototype.setMap.apply(this, [map]);
var proCode = null;
var proj = this.projection || map.projection;
if (proj) {
if (proj.getCode) {
proCode = proj.getCode();
} else{ proCode = proj; }}this.setTiandituParam(proCode);
},
/** * Method: setTiandituParam ** Parameters: * projection - {String} projection frame */
setTiandituParam: function(projection) {
var lt = this.layerType;
if (lt == 'vec') {
var resLen = 18;
var resStart = 0;
this.zOffset = 1;
this.numZoomLevels = 18;
} else if (lt == 'img') {
var resLen = 17;
var resStart = 0;
this.zOffset = 1;
this.numZoomLevels = 17;
} else if (lt == 'ter') {
var resLen = 13;
var resStart = 0;
this.zOffset = 1;
this.numZoomLevels = 13;
}
if (projection == 'EPSG:4326') {
var minX = -180;
var minY = -90;
var maxX = 180;
var maxY = 90;
/ / var maxResolution = 156543.0339;
/ / var minResolution = 0.5971642833709717;
var resolutions = [];
for (var i = resStart; i < resLen; i++) {
resolutions.push(1.40625 / 2 / Math.pow(2, i));
}
this.units = 'degree';
this.projection = new window.SuperMap.Projection('EPSG:4326');
this.maxExtent = new window.SuperMap.Bounds(minX, minY, maxX, maxY);
this.tileOrigin = new window.SuperMap.LonLat(minX, maxY);
this.resolutions = resolutions;
} else {
var minX = -20037508.3392;
var minY = -20037508.3392;
var maxX = 20037508.3392;
var maxY = 20037508.3392;
/ / var maxResolution = 156543.0339;
/ / var minResolution = 0.5971642833709717;
var resolutions = [];
for (var i = resStart; i < resLen; i++) {
resolutions.push(156543.0339 / 2 / Math.pow(2, i));
}
//this.numZoomLevels = 18;
this.units = 'm';
this.projection = new window.SuperMap.Projection('EPSG:3857');
this.maxExtent = new window.SuperMap.Bounds(minX, minY, maxX, maxY);
this.tileOrigin = new window.SuperMap.LonLat(minX, maxY);
this.resolutions = resolutions; }},CLASS_NAME: 'window.SuperMap.Layer.Tianditu'
});
export default window.SuperMap.Layer.Tianditu;
Copy the code3. Add the following code to the map page code
The introduction of encapsulated hypergraph loading heaven and Earth map script; Perform style dark penetration
<template>
<div class="super" id="mapwg"></div>
</template>
<script>
import '@/utils/Tianditu';
export default {
name: 'super'.data() {
return {
map: null}; },mounted() {
this.map = new window.SuperMap.Map('mapwg', {
controls: [new window.SuperMap.Control.Navigation(), new window.SuperMap.Control.Zoom()],
allOverlays: true
});
// Extranet map layer
let tiandituLayer = new window.SuperMap.Layer.Tianditu();
let tianMarkerLayer = new window.SuperMap.Layer.Tianditu();
tianMarkerLayer.layerType = 'cva';
tianMarkerLayer.isLabel = true;
console.log('tiandituLayer', tiandituLayer);
this.layer3 = [tiandituLayer, tianMarkerLayer];
this.map.addLayers(this.layer3);
this.map.setCenter(new window.SuperMap.LonLat(108.94167.34.25529), 13); }};</script>
<style lang="scss" scoped>
.super {
width: 100%;
height: 100vh;
filter: invert(100%) hue-rotate(180deg);
-webkit-filter: invert(100%) hue-rotate(180deg);
mix-blend-mode: exclusion;
}
</style>
Copy the code4. Style inversion render
filter: invert(100%) hue-rotate(180deg); Realize the map of heaven and earth from white to dark mode map service, so as to meet the requirements.