the problem:
error in ./node_modules/geotiff/src/geotiff.js
Module parse failed: Unexpected token (283:35)
You may need an appropriate loader to handle this file type.
| }
return usedImage.readRasters({ ...options, window: wnd });
| }
| }
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/layers/Basemap.vue 9:0-30
@ ./src/components/layers/Basemap.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
code in vue:
import 'ol/ol.css';
import ol from 'ol';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import { ScaleLine, defaults } from 'ol/control';
import { fromLonLat } from 'ol/proj';
export default {
data() {
return {
chartInterface: null,
};
},
mounted() {
this.initolMap();
},
methods: {
initolMap() {
let centerCordination = fromLonLat([20.32054491252795, 16.05904125934657]);
// 创建一个比例尺控件
var scaleLineControl = new ScaleLine({
units: 'metric', // 比例尺默认的单位
});
this.olMap = new Map({
controls: defaults().extend([
scaleLineControl, // 将比例尺控件添加到地图中
]),
layers: [
new TileLayer({
source: new OSM(),
}),
],
target: 'map',
view: new View({
//投影坐标系
projection: 'EPSG:3857',
center: centerCordination,
zoom: 12,
// rotation:10,
maxZoom: 18,
minZoom: 1,
//1.设置缩放级别为整数
constrainResolution: true,
//2.关闭无级缩放地图
smoothResolutionConstraint: false,
}),
});
},
drawing(type) {
return new Draw({
type: type,
source: this.sourceVector,
free: false,
});
},
addInteraction(type) {
if (this.draw) {
this.olMap.removeInteraction(this.draw);
}
this.sourceVector = new ol.source.Vector();
this.layerVector = new ol.layer.Vector({
source: sourceVector,
});
this.olMap.addLayer(this.layerVector);
this.draw = this.drawing(type);
this.draw.on('drawend', e => {
console.log('画完了', e);
this.feature = e.feature;
// this.remove();
console.log(e.feature.getGeometry().getCoordinates());
});
this.olMap.addInteraction(this.draw);
},
},
};
question:
open -- https://github.com/geotiffjs/geotiff.js/issues/163
open -- https://github.com/geotiffjs/geotiff.js/issues/254
closed -- https://github.com/geotiffjs/geotiff.js/issues/255
fix:
Change import { OSM } from 'ol/source' to import OSM from 'ol/source/OSM'
delete import ol from 'ol';
add import Vector from 'ol/source/Vector'
import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import Vector from 'ol/source/Vector';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import View from 'ol/View';
import { ScaleLine, defaults } from 'ol/control';
import { fromLonLat } from 'ol/proj';
import Draw, { createBox, createRegularPolygon } from 'ol/interaction/Draw';
import Polygon from 'ol/geom/Polygon';
export default {
data() {
return {
chartInterface: null,
};
},
mounted() {
this.initolMap();
},
methods: {
initolMap() {
let centerCordination = fromLonLat([120.32054491252795, 36.05904125934657]);
// 创建一个比例尺控件
var scaleLineControl = new ScaleLine({
units: 'metric', // 比例尺默认的单位
});
this.olMap = new Map({
controls: defaults().extend([
scaleLineControl, // 将比例尺控件添加到地图中
]),
layers: [
new TileLayer({
source: new OSM(),
}),
],
target: 'map',
view: new View({
//投影坐标系
projection: 'EPSG:3857',
center: centerCordination,
zoom: 12,
// rotation:10,
maxZoom: 18,
minZoom: 1,
//1.设置缩放级别为整数
constrainResolution: true,
//2.关闭无级缩放地图
smoothResolutionConstraint: false,
}),
});
},
drawing(type) {
return new Draw({
type: type,
source: this.sourceVector,
free: false,
});
},
addInteraction(type) {
if (this.draw) {
this.olMap.removeInteraction(this.draw);
}
this.sourceVector = new Vector({ wrapX: false });
this.layerVector = new VectorLayer({
source: this.sourceVector,
});
this.olMap.addLayer(this.layerVector);
this.draw = this.drawing(type);
this.draw.on('drawend', e => {
console.log('画完了', e);
this.feature = e.feature;
// this.remove();
console.log(e.feature.getGeometry().getCoordinates());
});
this.olMap.addInteraction(this.draw);
},
},
};\
0 评论