|
|
@@ -37,16 +37,16 @@ const MAP_MIN_ZOOM = 8;
|
|
|
* Extend leaflet hash for handling level value
|
|
|
*/
|
|
|
|
|
|
-L.Hash.parseHash = function(hash) {
|
|
|
- if(hash.indexOf('#') === 0) {
|
|
|
+L.Hash.parseHash = function (hash) {
|
|
|
+ if (hash.indexOf('#') === 0) {
|
|
|
hash = hash.substr(1);
|
|
|
}
|
|
|
var args = hash.split("/");
|
|
|
if (args.length >= 3 && args.length <= 4) {
|
|
|
var zoom = parseInt(args[0], 10),
|
|
|
- lat = parseFloat(args[1]),
|
|
|
- lon = parseFloat(args[2]),
|
|
|
- level = args.length === 4 ? parseInt(args[3], 10) : 0;
|
|
|
+ lat = parseFloat(args[1]),
|
|
|
+ lon = parseFloat(args[2]),
|
|
|
+ level = args.length === 4 ? parseInt(args[3], 10) : 0;
|
|
|
|
|
|
if (isNaN(zoom) || isNaN(lat) || isNaN(lon)) {
|
|
|
return false;
|
|
|
@@ -63,7 +63,7 @@ L.Hash.parseHash = function(hash) {
|
|
|
};
|
|
|
L.Hash.prototype.parseHash = L.Hash.parseHash;
|
|
|
|
|
|
-L.Hash.formatHash = function(map) {
|
|
|
+L.Hash.formatHash = function (map) {
|
|
|
var center = map.getCenter(),
|
|
|
zoom = map.getZoom(),
|
|
|
precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2));
|
|
|
@@ -76,8 +76,8 @@ L.Hash.formatHash = function(map) {
|
|
|
};
|
|
|
L.Hash.prototype.formatHash = L.Hash.formatHash;
|
|
|
|
|
|
-L.Hash.prototype.setLevel = function(lvl) {
|
|
|
- if(this._level !== lvl) {
|
|
|
+L.Hash.prototype.setLevel = function (lvl) {
|
|
|
+ if (this._level !== lvl) {
|
|
|
this._level = lvl;
|
|
|
var hash = this.formatHash(this.map);
|
|
|
window.location.replace(hash);
|
|
|
@@ -85,7 +85,7 @@ L.Hash.prototype.setLevel = function(lvl) {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-L.Hash.prototype.update = function() {
|
|
|
+L.Hash.prototype.update = function () {
|
|
|
var hash = window.location.hash;
|
|
|
if (hash === this.lastHash) {
|
|
|
return;
|
|
|
@@ -123,8 +123,9 @@ class MyMap extends Component {
|
|
|
* Alert this component that its size has changed
|
|
|
*/
|
|
|
invalidateSize() {
|
|
|
- if(this.elem && this.elem.leafletElement) {
|
|
|
+ if (this.elem && this.elem.leafletElement) {
|
|
|
this.elem.leafletElement.invalidateSize();
|
|
|
+ this.map = this.elem.leafletElement;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -165,23 +166,23 @@ class MyMap extends Component {
|
|
|
* @private
|
|
|
*/
|
|
|
async _loadData(bounds) {
|
|
|
- if(this.props.datalocked || (window.CONFIG.always_authenticated && !window.editor_user)) {
|
|
|
+ if (this.props.datalocked || (window.CONFIG.always_authenticated && !window.editor_user)) {
|
|
|
return new Promise(resolve => {
|
|
|
setTimeout(() => resolve(this._loadData(bounds)), 100);
|
|
|
});
|
|
|
}
|
|
|
- else if(!this.props.draw && this.getBounds() && this.elem.leafletElement.getZoom() >= window.CONFIG.data_min_zoom) {
|
|
|
+ else if (!this.props.draw && this.getBounds() && this.elem.leafletElement.getZoom() >= window.CONFIG.data_min_zoom) {
|
|
|
let bbox = bounds || this.getBounds();
|
|
|
|
|
|
// Only load data if bbox is valid and not in an already downloaded area
|
|
|
- if(
|
|
|
+ if (
|
|
|
bbox
|
|
|
&& bbox.getSouth() !== bbox.getNorth()
|
|
|
&& bbox.getWest() !== bbox.getEast()
|
|
|
&& (!this.loadedArea || !this.loadedArea.contains(bbox))
|
|
|
) {
|
|
|
// Augment bbox size if too small (to avoid many data reloads)
|
|
|
- while(bbox.getSouthWest().distanceTo(bbox.getNorthEast()) < 400) {
|
|
|
+ while (bbox.getSouthWest().distanceTo(bbox.getNorthEast()) < 400) {
|
|
|
bbox = bbox.pad(0.1);
|
|
|
}
|
|
|
|
|
|
@@ -193,7 +194,7 @@ class MyMap extends Component {
|
|
|
const result = await window.vectorDataManager.loadOSMData(bbox);
|
|
|
this.setState({ loading: false, dataready: result });
|
|
|
}
|
|
|
- catch(e) {
|
|
|
+ catch (e) {
|
|
|
alert("Can't download data from OSM server. Please retry later.");
|
|
|
this.setState({ loading: false, dataready: false });
|
|
|
}
|
|
|
@@ -218,7 +219,7 @@ class MyMap extends Component {
|
|
|
// // .replace(/\{switch:.+?\}/g, "{s}")
|
|
|
// // .replace(/\{-y\}/g, "{y}");
|
|
|
// const url = "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}";
|
|
|
-
|
|
|
+
|
|
|
// return <TileLayer
|
|
|
// attribution="© 高德地图"
|
|
|
// url={url}
|
|
|
@@ -269,7 +270,7 @@ class MyMap extends Component {
|
|
|
// // maxZoom={MAP_MAX_ZOOM}
|
|
|
// // />;
|
|
|
// const url = "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}";
|
|
|
-
|
|
|
+
|
|
|
// return <TileLayer
|
|
|
// attribution="© 高德地图"
|
|
|
// url={url}
|
|
|
@@ -286,14 +287,14 @@ class MyMap extends Component {
|
|
|
// return null;
|
|
|
// }
|
|
|
const url = "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}";
|
|
|
-
|
|
|
+
|
|
|
return <TileLayer
|
|
|
attribution="© 高德地图"
|
|
|
url={url}
|
|
|
// key={url}
|
|
|
minZoom={MAP_MIN_ZOOM} //{l.properties.min_zoom}
|
|
|
- maxNativeZoom={18} //{l.properties.max_zoom}
|
|
|
maxZoom={MAP_MAX_ZOOM}
|
|
|
+ maxNativeZoom={18} //{l.properties.max_zoom}
|
|
|
opacity={opacity}
|
|
|
tms={l.properties.url.indexOf("{-y}") > 0}
|
|
|
key='amap'
|
|
|
@@ -305,7 +306,7 @@ class MyMap extends Component {
|
|
|
* @private
|
|
|
*/
|
|
|
_getFloorMapLayer(floormap) {
|
|
|
- if(!floormap || !floormap.topleft) {
|
|
|
+ if (!floormap || !floormap.topleft) {
|
|
|
return null;
|
|
|
}
|
|
|
else {
|
|
|
@@ -313,7 +314,7 @@ class MyMap extends Component {
|
|
|
data={floormap}
|
|
|
key={floormap.id}
|
|
|
opacity={floormap.opacity !== undefined && !isNaN(parseFloat(floormap.opacity)) ? floormap.opacity : 1}
|
|
|
- ref={"floormap_"+floormap.id}
|
|
|
+ ref={"floormap_" + floormap.id}
|
|
|
level={this.props.level}
|
|
|
mode={this.props.mode}
|
|
|
tool={this.props.floorImageryMode}
|
|
|
@@ -325,11 +326,11 @@ class MyMap extends Component {
|
|
|
const floorImgs = window.imageryManager.getFloorImages();
|
|
|
let levelsList = null;
|
|
|
|
|
|
- if(this.props.mode === Body.MODE_EXPLORE) {
|
|
|
+ if (this.props.mode === Body.MODE_EXPLORE) {
|
|
|
levelsList = window.vectorDataManager.getAllLevels(true);
|
|
|
}
|
|
|
- else if(this.props.mode === Body.MODE_BUILDING) {
|
|
|
- if(this.props.building) {
|
|
|
+ else if (this.props.mode === Body.MODE_BUILDING) {
|
|
|
+ if (this.props.building) {
|
|
|
levelsList = this.props.building.properties.own.levels.slice(0);
|
|
|
levelsList.sort();
|
|
|
}
|
|
|
@@ -337,7 +338,7 @@ class MyMap extends Component {
|
|
|
levelsList = window.vectorDataManager.getAllLevels(false);
|
|
|
}
|
|
|
}
|
|
|
- else if([ Body.MODE_LEVELS, Body.MODE_FEATURES ].includes(this.props.mode) && this.props.building) {
|
|
|
+ else if ([Body.MODE_LEVELS, Body.MODE_FEATURES].includes(this.props.mode) && this.props.building) {
|
|
|
levelsList = this.props.building.properties.own.levels.slice(0);
|
|
|
levelsList.sort();
|
|
|
}
|
|
|
@@ -364,7 +365,7 @@ class MyMap extends Component {
|
|
|
<Map
|
|
|
minZoom={MAP_MIN_ZOOM}
|
|
|
maxZoom={MAP_MAX_ZOOM}
|
|
|
- className={"app-map"+(this.props.draw ? " leaflet-clickable" : "")}
|
|
|
+ className={"app-map" + (this.props.draw ? " leaflet-clickable" : "")}
|
|
|
ref={elem => this.elem = elem}
|
|
|
preferCanvas={false}
|
|
|
editable={true}
|
|
|
@@ -375,7 +376,8 @@ class MyMap extends Component {
|
|
|
boxZoom={false}
|
|
|
>
|
|
|
<AttributionControl
|
|
|
- prefix={window.EDITOR_NAME+" v"+PACKAGE.version}
|
|
|
+ // prefix={window.EDITOR_NAME + " v" + PACKAGE.version}
|
|
|
+ prefix={PACKAGE.name + " v" + PACKAGE.version}
|
|
|
/>
|
|
|
|
|
|
<ScaleControl
|
|
|
@@ -387,10 +389,6 @@ class MyMap extends Component {
|
|
|
position="bottomright"
|
|
|
/>
|
|
|
|
|
|
- {/* <SidePanelButton
|
|
|
- position="topright"
|
|
|
- /> */}
|
|
|
-
|
|
|
{[Body.MODE_EXPLORE, Body.MODE_BUILDING, Body.MODE_LEVELS, Body.MODE_FEATURES].includes(this.props.mode) && !this.state.loading && this.state.dataready && levelsList &&
|
|
|
<LevelSelector
|
|
|
position="topright"
|
|
|
@@ -399,10 +397,6 @@ class MyMap extends Component {
|
|
|
/>
|
|
|
}
|
|
|
|
|
|
- {/* <PreviewButton
|
|
|
- position="topright"
|
|
|
- /> */}
|
|
|
-
|
|
|
{this.props.selectedBaseImagery && this._getLayer(this.props.selectedBaseImagery, this.props.baseImageryOpacity)}
|
|
|
|
|
|
{this.props.selectedOverlaysImagery && this.props.selectedOverlaysImagery.map(ol => this._getLayer(ol, this.props.overlaysImageryOpacity))}
|
|
|
@@ -470,57 +464,47 @@ class MyMap extends Component {
|
|
|
this._loadData();
|
|
|
}, 500);
|
|
|
|
|
|
- window.mapUUID = this.props.uuid;
|
|
|
-
|
|
|
- //静态只读map
|
|
|
- Object.defineProperty(MyMap, 'map', {
|
|
|
- value: this.elem.leafletElement,
|
|
|
- writable: false,
|
|
|
- enumerable: false,
|
|
|
- configurable: false
|
|
|
- });
|
|
|
-
|
|
|
// URL hash for map
|
|
|
this._mapHash = new L.Hash(this.elem.leafletElement);
|
|
|
|
|
|
// If no valid hash found, use default coordinates from config file or stored cookie
|
|
|
- if(!window.location.hash || !window.location.hash.match(/^#\d+\/-?\d+(.\d+)?\/-?\d+(.\d+)?(\/(-?\d+(.\d+)?)?)?$/)) {
|
|
|
+ if (!window.location.hash || !window.location.hash.match(/^#\d+\/-?\d+(.\d+)?\/-?\d+(.\d+)?(\/(-?\d+(.\d+)?)?)?$/)) {
|
|
|
// Has cookie ?
|
|
|
const cookieHash = document.cookie.replace(/(?:(?:^|.*;\s*)lasthash\s*=\s*([^;]*).*$)|^.*$/, "$1");
|
|
|
let newHash;
|
|
|
|
|
|
- if(cookieHash && L.Hash.parseHash(cookieHash)) {
|
|
|
+ if (cookieHash && L.Hash.parseHash(cookieHash)) {
|
|
|
newHash = cookieHash;
|
|
|
}
|
|
|
else {
|
|
|
- newHash = "#"+window.CONFIG.map_initial_zoom+"/"+window.CONFIG.map_initial_latlng.join("/");
|
|
|
+ newHash = "#" + window.CONFIG.map_initial_zoom + "/" + window.CONFIG.map_initial_latlng.join("/");
|
|
|
}
|
|
|
|
|
|
window.history.pushState({}, "", window.location.href.split("#")[0] + newHash);
|
|
|
}
|
|
|
|
|
|
L.DomEvent.addListener(window, "hashchange", () => {
|
|
|
- document.cookie = "lasthash="+window.location.hash;
|
|
|
+ document.cookie = "lasthash=" + window.location.hash;
|
|
|
});
|
|
|
|
|
|
this.elem.leafletElement.on("dblclick", e => {
|
|
|
- if(!this.props.draw && this.props.mode !== Body.MODE_EXPLORE) {
|
|
|
+ if (!this.props.draw && this.props.mode !== Body.MODE_EXPLORE) {
|
|
|
PubSub.publish("body.unselect.feature");
|
|
|
}
|
|
|
});
|
|
|
|
|
|
this.elem.leafletElement.on("zoomend moveend", () => {
|
|
|
- if(this.elem && this.elem.leafletElement) {
|
|
|
+ if (this.elem && this.elem.leafletElement) {
|
|
|
this._loadData();
|
|
|
|
|
|
const zoom = this.elem.leafletElement.getZoom();
|
|
|
|
|
|
- if(zoom < window.CONFIG.data_min_zoom && (!this._lastZoom || this._lastZoom >= window.CONFIG.data_min_zoom)) {
|
|
|
+ if (zoom < window.CONFIG.data_min_zoom && (!this._lastZoom || this._lastZoom >= window.CONFIG.data_min_zoom)) {
|
|
|
this.elem.container.classList.add("app-map-novector");
|
|
|
PubSub.publishSync("body.unselect.feature");
|
|
|
-// PubSub.publish("body.mode.set", { mode: Body.MODE_BUILDING });
|
|
|
+ // PubSub.publish("body.mode.set", { mode: Body.MODE_BUILDING });
|
|
|
}
|
|
|
- else if(zoom >= window.CONFIG.data_min_zoom && (!this._lastZoom || this._lastZoom < window.CONFIG.data_min_zoom)) {
|
|
|
+ else if (zoom >= window.CONFIG.data_min_zoom && (!this._lastZoom || this._lastZoom < window.CONFIG.data_min_zoom)) {
|
|
|
this.elem.container.classList.remove("app-map-novector");
|
|
|
}
|
|
|
|
|
|
@@ -538,7 +522,7 @@ class MyMap extends Component {
|
|
|
* @property {int} zoom The new zoom level
|
|
|
*/
|
|
|
const alertZoom = () => {
|
|
|
- if(this.elem && this.elem.leafletElement) {
|
|
|
+ if (this.elem && this.elem.leafletElement) {
|
|
|
PubSub.publish("map.zoom.changed", { zoom: this.elem.leafletElement.getZoom() });
|
|
|
}
|
|
|
};
|
|
|
@@ -553,11 +537,11 @@ class MyMap extends Component {
|
|
|
* @property {int} [zoom] The zoom level
|
|
|
*/
|
|
|
PubSub.subscribe("map.position.set", (msg, data) => {
|
|
|
- if(data.bbox) {
|
|
|
+ if (data.bbox) {
|
|
|
const [minlat, maxlat, minlon, maxlon] = data.bbox;
|
|
|
this.elem.leafletElement.fitBounds([[minlat, minlon], [maxlat, maxlon]]);
|
|
|
}
|
|
|
- else if(data.zoom) {
|
|
|
+ else if (data.zoom) {
|
|
|
this.elem.leafletElement.setView(data.coordinates, data.zoom);
|
|
|
}
|
|
|
else {
|
|
|
@@ -574,20 +558,20 @@ class MyMap extends Component {
|
|
|
}
|
|
|
|
|
|
componentDidUpdate(fromProps) {
|
|
|
- if(this.props.level !== fromProps.level) {
|
|
|
+ if (this.props.level !== fromProps.level) {
|
|
|
this._mapHash.setLevel(this.props.level);
|
|
|
}
|
|
|
|
|
|
const floorImgs = window.imageryManager.getFloorImages();
|
|
|
|
|
|
// Force update of floor imagery after mode change
|
|
|
- if(fromProps.mode !== this.props.mode) {
|
|
|
+ if (fromProps.mode !== this.props.mode) {
|
|
|
this.invalidateSize();
|
|
|
|
|
|
floorImgs.forEach(img => {
|
|
|
// Check if we have a leaflet layer
|
|
|
- if(this.refs["floormap_"+img.id]) {
|
|
|
- this.refs["floormap_"+img.id].forceUpdate();
|
|
|
+ if (this.refs["floormap_" + img.id]) {
|
|
|
+ this.refs["floormap_" + img.id].forceUpdate();
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
@@ -597,8 +581,8 @@ class MyMap extends Component {
|
|
|
this.elem.leafletElement.on("mousemove", this._followMouse, this);
|
|
|
|
|
|
// Load wider area if necessary
|
|
|
- if(!this.props.draw && !this.state.loading && this.elem.leafletElement.getZoom() > 19) {
|
|
|
- this._loadData(this.getBounds().pad(0.5*(this.elem.leafletElement.getZoom()-19)));
|
|
|
+ if (!this.props.draw && !this.state.loading && this.elem.leafletElement.getZoom() > 19) {
|
|
|
+ this._loadData(this.getBounds().pad(0.5 * (this.elem.leafletElement.getZoom() - 19)));
|
|
|
}
|
|
|
}
|
|
|
|
Jay