|
|
@@ -31,10 +31,6 @@ import HistoryTrack from './layers/HistoryTrack';
|
|
|
import POIObject from './layers/POIObject';
|
|
|
import MapUtil from './utils/MapUtil';
|
|
|
|
|
|
-
|
|
|
-const MAP_MAX_ZOOM = 22;
|
|
|
-const MAP_MIN_ZOOM = 8;
|
|
|
-
|
|
|
/*
|
|
|
* Extend leaflet hash for handling level value
|
|
|
*/
|
|
|
@@ -115,6 +111,12 @@ class MyMap extends Component {
|
|
|
loading: false,
|
|
|
dataready: false,
|
|
|
initHisTrack: false,
|
|
|
+
|
|
|
+ center: null,
|
|
|
+ zoom: null,
|
|
|
+ minZoom: null,
|
|
|
+ maxZoom: null,
|
|
|
+ maxBounds: null,
|
|
|
};
|
|
|
|
|
|
this.mapStyler = new MapStyler();
|
|
|
@@ -127,7 +129,31 @@ class MyMap extends Component {
|
|
|
invalidateSize() {
|
|
|
if (this.elem && this.elem.leafletElement) {
|
|
|
this.elem.leafletElement.invalidateSize();
|
|
|
+
|
|
|
this.map = this.elem.leafletElement;
|
|
|
+
|
|
|
+ // 设定初始化的值
|
|
|
+ this.setState({
|
|
|
+ center: this.props.center,
|
|
|
+ zoom: this.props.zoom,
|
|
|
+ minZoom: this.props.minZoom,
|
|
|
+ maxZoom: this.props.maxZoom,
|
|
|
+ maxBounds: this.props.maxBounds
|
|
|
+ })
|
|
|
+
|
|
|
+ // // 设置地图中心、缩放
|
|
|
+ // if (this.props.center) {
|
|
|
+ // this.setView(this.props.center, this.props.zoom);
|
|
|
+ // } else {
|
|
|
+ // this.setZoom(this.props.zoom);
|
|
|
+ // }
|
|
|
+ // // 设置缩放范围
|
|
|
+ // this.setZoomRange(this.props.minZoom, this.props.maxZoom);
|
|
|
+
|
|
|
+ // // 设置视图范围
|
|
|
+ // if (this.props.maxBounds.length === 2) {
|
|
|
+ // this.setMaxBounds(this.props.maxBounds)
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -139,6 +165,117 @@ class MyMap extends Component {
|
|
|
this.setState({ loading: false, dataready: false });
|
|
|
}
|
|
|
|
|
|
+ /**
|
|
|
+ * 修改地图状态
|
|
|
+ */
|
|
|
+ setView(center, zoom) {
|
|
|
+ let latlng = L.latLng(center)
|
|
|
+ if (this.elem && this.elem.leafletElement) {
|
|
|
+ this.elem.leafletElement.setView(latlng, zoom);
|
|
|
+ // this.setState({
|
|
|
+ // center: latlng,
|
|
|
+ // zoom: zoom
|
|
|
+ // })
|
|
|
+ } else {
|
|
|
+ console.error('setView')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setCenter(center) {
|
|
|
+ let latlng = L.latLng(center)
|
|
|
+ if (this.elem && this.elem.leafletElement) {
|
|
|
+ this.elem.leafletElement.setView(latlng, this.state.zoom);
|
|
|
+ // this.setState({
|
|
|
+ // center: latlng
|
|
|
+ // })
|
|
|
+ } else {
|
|
|
+ console.error('setCenter')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setZoom(zoom) {
|
|
|
+ if (this.elem && this.elem.leafletElement) {
|
|
|
+ this.elem.leafletElement.setZoom(zoom);
|
|
|
+ // this.setState({
|
|
|
+ // zoom: zoom
|
|
|
+ // })
|
|
|
+ } else {
|
|
|
+ console.error('setZoom')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setMinZoom(zoom) {
|
|
|
+ if (this.elem && this.elem.leafletElement) {
|
|
|
+ this.elem.leafletElement.setMinZoom(zoom);
|
|
|
+ // this.setState({
|
|
|
+ // minZoom: zoom
|
|
|
+ // })
|
|
|
+ } else {
|
|
|
+ console.error('setMinZoom')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setMaxZoom(zoom) {
|
|
|
+ if (this.elem && this.elem.leafletElement) {
|
|
|
+ this.elem.leafletElement.setMaxZoom(zoom);
|
|
|
+ // this.setState({
|
|
|
+ // maxZoom: zoom
|
|
|
+ // })
|
|
|
+ } else {
|
|
|
+ console.error('setMaxZoom')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setZoomRange(min, max) {
|
|
|
+ if (this.elem && this.elem.leafletElement) {
|
|
|
+ this.elem.leafletElement.setMinZoom(min);
|
|
|
+ this.elem.leafletElement.setMaxZoom(max);
|
|
|
+ // this.setState({
|
|
|
+ // minZoom: min,
|
|
|
+ // maxZoom: max
|
|
|
+ // })
|
|
|
+ } else {
|
|
|
+ console.error('setZoomRange')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setMaxBounds(corner) {
|
|
|
+ let corner1 = L.latLng(corner[0]), corner2 = L.latLng(corner[1]);
|
|
|
+ let bounds = L.latLngBounds(corner1, corner2)
|
|
|
+ if (this.elem && this.elem.leafletElement) {
|
|
|
+ this.elem.leafletElement.setMaxBounds(bounds)
|
|
|
+ // this.setState({
|
|
|
+ // maxBounds: bounds
|
|
|
+ // })
|
|
|
+ } else {
|
|
|
+ console.error('setMaxBounds')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @param {Array} [10, 20] [-20, 10]
|
|
|
+ */
|
|
|
+ pathTo(offsetPix) {
|
|
|
+ if (this.elem && this.elem.leafletElement) {
|
|
|
+ this.elem.leafletElement.pathTo(offsetPix)
|
|
|
+ } else {
|
|
|
+ console.error('pathTo')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * @param {Array/Object} center [10, 20] {lat: 10, lng: 10}
|
|
|
+ * @param {Number} zoom 18
|
|
|
+ */
|
|
|
+ flyTo(center, zoom) {
|
|
|
+ let latlng = L.latLng(center)
|
|
|
+ if (this.elem && this.elem.leafletElement) {
|
|
|
+ this.elem.leafletElement.flyTo(latlng, zoom)
|
|
|
+ } else {
|
|
|
+ console.error('flyTo')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取地图状态
|
|
|
+ */
|
|
|
+
|
|
|
/**
|
|
|
* Get the coordinates of map center
|
|
|
* @return {LatLng} Coordinates of map center (or null if not ready)
|
|
|
@@ -147,6 +284,26 @@ class MyMap extends Component {
|
|
|
return (this.elem && this.elem.leafletElement) ? this.elem.leafletElement.getCenter() : null;
|
|
|
}
|
|
|
|
|
|
+ getZoom() {
|
|
|
+ return (this.elem && this.elem.leafletElement) ? this.elem.leafletElement.getZoom() : null;
|
|
|
+ }
|
|
|
+
|
|
|
+ getMinZoom() {
|
|
|
+ return (this.elem && this.elem.leafletElement) ? this.elem.leafletElement.getMinZoom() : null;
|
|
|
+
|
|
|
+ }
|
|
|
+ getMaxZoom() {
|
|
|
+ return (this.elem && this.elem.leafletElement) ? this.elem.leafletElement.getMaxZoom() : null;
|
|
|
+
|
|
|
+ }
|
|
|
+ getZoomRange() {
|
|
|
+ return (this.elem && this.elem.leafletElement) ? [this.elem.leafletElement.getMinZoom(), this.elem.leafletElement.getMaxZoom()] : [];
|
|
|
+ }
|
|
|
+
|
|
|
+ getContainerSize() {
|
|
|
+ return (this.elem && this.elem.leafletElement) ? this.elem.leafletElement.getSize() : null;
|
|
|
+ }
|
|
|
+
|
|
|
/**
|
|
|
* Get the bounding box of currently shown area on map
|
|
|
* @return {LatLngBounds} Bounding box of the map
|
|
|
@@ -210,96 +367,16 @@ class MyMap extends Component {
|
|
|
* Generate layer from given configuration
|
|
|
* @private
|
|
|
*/
|
|
|
- _getLayer(l, opacity) {
|
|
|
- // if(!l || !l.properties || !l.properties.url) {
|
|
|
- // return null;
|
|
|
- // }
|
|
|
-
|
|
|
- // if(l.properties.type === "tms") {
|
|
|
- // // const url = l.properties.url
|
|
|
- // // .replace(/\{zoom\}/g, "{z}")
|
|
|
- // // .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}
|
|
|
- // // key={url}
|
|
|
- // minZoom={MAP_MIN_ZOOM}//{l.properties.min_zoom}
|
|
|
- // maxNativeZoom={18}//{l.properties.max_zoom}
|
|
|
- // maxZoom={MAP_MAX_ZOOM}
|
|
|
- // opacity={opacity}
|
|
|
- // tms={l.properties.url.indexOf("{-y}") > 0}
|
|
|
- // key='amap'
|
|
|
- // />;
|
|
|
- // }
|
|
|
- // // else if(l.properties.type === "wms") {
|
|
|
- // // let url = l.properties.url;
|
|
|
- // // const params = {};
|
|
|
- // // const urlParts = l.properties.url.split('?');
|
|
|
-
|
|
|
- // // if(urlParts.length > 1) {
|
|
|
- // // url = urlParts[0];
|
|
|
- // // const blacklist = ['srs', 'width', 'height', 'format', 'service', 'request', 'bbox', 'key', 'crs'];
|
|
|
-
|
|
|
- // // urlParts[1].split('&').forEach(p => {
|
|
|
- // // const [k,v] = p.split('=');
|
|
|
- // // if(!blacklist.includes(k.toLowerCase())) {
|
|
|
- // // params[k.toLowerCase()] = v;
|
|
|
- // // }
|
|
|
- // // else if(['key'].includes(k.toLowerCase())) {
|
|
|
- // // params[k.toUpperCase()] = v;
|
|
|
- // // }
|
|
|
- // // });
|
|
|
- // // }
|
|
|
-
|
|
|
- // // return <WMSTileLayer
|
|
|
- // // attribution={l.properties.attribution ? '<a href="'+l.properties.attribution.url+'" target="_blank">'+l.properties.attribution.text+'</a>' : ''}
|
|
|
- // // url={url}
|
|
|
- // // key={l.properties.url}
|
|
|
- // // opacity={opacity}
|
|
|
- // // {...params}
|
|
|
- // // />;
|
|
|
- // // }
|
|
|
- // else if(l.properties.type === "bing" && window.CONFIG.providers && window.CONFIG.providers.bing) {
|
|
|
- // // return <BingLayer
|
|
|
- // // bingkey={window.CONFIG.providers.bing}
|
|
|
- // // type='Road'//"CanvasLight"
|
|
|
- // // maxNativeZoom={20}
|
|
|
- // // // culture='zh-Hans'
|
|
|
- // // minZoom={MAP_MIN_ZOOM}
|
|
|
- // // 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}
|
|
|
- // // key={url}
|
|
|
- // minZoom={MAP_MIN_ZOOM}//{l.properties.min_zoom}
|
|
|
- // maxNativeZoom={18}//{l.properties.max_zoom}
|
|
|
- // maxZoom={MAP_MAX_ZOOM}
|
|
|
- // opacity={opacity}
|
|
|
- // tms={l.properties.url.indexOf("{-y}") > 0}
|
|
|
- // key='amap'
|
|
|
- // />;
|
|
|
- // }
|
|
|
- // else {
|
|
|
- // return null;
|
|
|
- // }
|
|
|
+ _getLayer(min, max) {
|
|
|
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}
|
|
|
- maxZoom={MAP_MAX_ZOOM}
|
|
|
- maxNativeZoom={18} //{l.properties.max_zoom}
|
|
|
- opacity={opacity}
|
|
|
- tms={l.properties.url.indexOf("{-y}") > 0}
|
|
|
- key='amap'
|
|
|
+ key={url} // 'amap'
|
|
|
+ minZoom={min}
|
|
|
+ maxZoom={max}
|
|
|
+ maxNativeZoom={18} // 瓦片源即高德地图可用最大缩放数
|
|
|
/>;
|
|
|
}
|
|
|
|
|
|
@@ -325,7 +402,7 @@ class MyMap extends Component {
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
- const floorImgs = window.imageryManager.getFloorImages();
|
|
|
+ // const floorImgs = window.imageryManager.getFloorImages();
|
|
|
let levelsList = null;
|
|
|
|
|
|
if (this.props.mode === Body.MODE_EXPLORE) {
|
|
|
@@ -365,8 +442,11 @@ class MyMap extends Component {
|
|
|
</div>
|
|
|
}
|
|
|
<Map
|
|
|
- minZoom={MAP_MIN_ZOOM}
|
|
|
- maxZoom={MAP_MAX_ZOOM}
|
|
|
+ center={L.latLng(this.props.center)}
|
|
|
+ zoom={this.props.zoom}
|
|
|
+ minZoom={this.props.minZoom}
|
|
|
+ maxZoom={this.props.maxZoom}
|
|
|
+ maxBounds={this.props.maxBounds}
|
|
|
className={"app-map" + (this.props.draw ? " leaflet-clickable" : "")}
|
|
|
ref={elem => this.elem = elem}
|
|
|
preferCanvas={false}
|
|
|
@@ -399,11 +479,13 @@ class MyMap extends Component {
|
|
|
/>
|
|
|
}
|
|
|
|
|
|
- {this.props.selectedBaseImagery && this._getLayer(this.props.selectedBaseImagery, this.props.baseImageryOpacity)}
|
|
|
+ {this._getLayer(this.props.minZoom, this.props.maxZoom)}
|
|
|
+
|
|
|
+ {/* {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))}
|
|
|
+ {/* {this.props.selectedOverlaysImagery && this.props.selectedOverlaysImagery.map(ol => this._getLayer(ol, this.props.overlaysImageryOpacity))} */}
|
|
|
|
|
|
- {this.props.mode !== Body.MODE_EXPLORE && floorImgs && floorImgs.map(fi => this._getFloorMapLayer(fi))}
|
|
|
+ {/* {this.props.mode !== Body.MODE_EXPLORE && floorImgs && floorImgs.map(fi => this._getFloorMapLayer(fi))} */}
|
|
|
|
|
|
{/* {!this.state.loading && this.state.dataready && [Body.MODE_BUILDING, Body.MODE_FLOOR_IMAGERY].includes(this.props.mode) &&
|
|
|
<Building
|
|
|
@@ -466,6 +548,7 @@ class MyMap extends Component {
|
|
|
*/
|
|
|
_followMouse(e) {
|
|
|
this._mouseCoords = e.latlng;
|
|
|
+ // console.log(this._mouseCoords)
|
|
|
}
|
|
|
|
|
|
componentDidMount() {
|
|
|
@@ -574,18 +657,18 @@ class MyMap extends Component {
|
|
|
this._mapHash.setLevel(this.props.level);
|
|
|
}
|
|
|
|
|
|
- const floorImgs = window.imageryManager.getFloorImages();
|
|
|
+ // const floorImgs = window.imageryManager.getFloorImages();
|
|
|
|
|
|
// Force update of floor imagery after mode change
|
|
|
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();
|
|
|
- }
|
|
|
- });
|
|
|
+ // floorImgs.forEach(img => {
|
|
|
+ // // Check if we have a leaflet layer
|
|
|
+ // if (this.refs["floormap_" + img.id]) {
|
|
|
+ // this.refs["floormap_" + img.id].forceUpdate();
|
|
|
+ // }
|
|
|
+ // });
|
|
|
}
|
|
|
|
|
|
// Follow mouse position
|
Jay