|
|
@@ -92,12 +92,17 @@
|
|
|
<script>
|
|
|
// 图片展示
|
|
|
import 'viewerjs/dist/viewer.css';
|
|
|
-import {Select,Pointer} from "ol/interaction";
|
|
|
-import { Range,TileSuperMapRest as olTileSuperMapRest } from "ol/source";
|
|
|
-
|
|
|
-import { Image, Vector, Tile as TileLayer } from 'ol/layer';
|
|
|
+import { Style,Fill,Stroke,Circle,Text } from "ol/style";
|
|
|
+import { GeoJSON } from "ol/format";
|
|
|
+import { Polygon } from "ol/geom";
|
|
|
+import { Feature } from "ol";
|
|
|
+import { Select,Pointer } from "ol/interaction";
|
|
|
+import { Range,TileSuperMapRest as olTileSuperMapRest,TileWMS,Vector as SourceVector} from "ol/source";
|
|
|
+import { Image, Vector as LayerVector, Tile as TileLayer } from 'ol/layer';
|
|
|
import { altKeyOnly, click, pointerMove } from "ol/events/condition";
|
|
|
-import { Logo, TileSuperMapRest,FeatureService,MapboxStyles} from '@supermap/iclient-ol';
|
|
|
+import { Logo, TileSuperMapRest,FeatureService,QueryService,MapboxStyles} from '@supermap/iclient-ol';
|
|
|
+// 公共函数
|
|
|
+import commonFunction from '@/views/currentSystem/commonFunction/commonFunction'
|
|
|
export default {
|
|
|
components:{},
|
|
|
data() {
|
|
|
@@ -122,6 +127,7 @@ export default {
|
|
|
},
|
|
|
select:null,
|
|
|
themeSource:null,
|
|
|
+ siteLayers:[]
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -155,29 +161,237 @@ export default {
|
|
|
init(){
|
|
|
//this.iniSelect();
|
|
|
//this.initThemeMap();
|
|
|
- //this.initLayer();
|
|
|
- this.initLayers();
|
|
|
+ //this.initSource();
|
|
|
+ //this.initLayers();
|
|
|
+ //this.addFeatureSelect();
|
|
|
+ //this.initVector();
|
|
|
+ this.layerQuery();
|
|
|
+ },
|
|
|
+
|
|
|
+ layerQuery(){
|
|
|
+ let url = "http://192.168.2.242:8090/iserver/services/map-kxcgw/rest/maps/pipeline";
|
|
|
+ //miny="103.555941" maxy="103.598975" minx="29.725337" maxx="29.752859"
|
|
|
+ let polygon = new Polygon([[[103.555941, 29.725337],[103.555941,29.752859], [103.598975, 29.752859], [103.598975,29.725337]]]);
|
|
|
+ let polygonSource = new SourceVector({
|
|
|
+ features: [new Feature(polygon)],
|
|
|
+ wrapX: false
|
|
|
+ });
|
|
|
+ let vectorLayer = new LayerVector({
|
|
|
+ source: polygonSource,
|
|
|
+ style: new Style({
|
|
|
+ stroke: new Stroke({
|
|
|
+ color: 'red',
|
|
|
+ width: 3
|
|
|
+ }),
|
|
|
+ fill: new Fill({
|
|
|
+ color: 'rgba(0, 0, 255, 0.1)'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ });
|
|
|
+ //this.map.addLayer(vectorLayer);
|
|
|
+
|
|
|
+ var param = new SuperMap.QueryByGeometryParameters({
|
|
|
+ queryParams: {name: "pipeline@kxcgw"},
|
|
|
+ geometry: polygon
|
|
|
+ });
|
|
|
+ new QueryService(url).queryByGeometry(param, (serviceResult) => {
|
|
|
+ let vectorSource = new SourceVector({
|
|
|
+ features: (new GeoJSON()).readFeatures(serviceResult.result.recordsets[0].features),
|
|
|
+ wrapX: false
|
|
|
+ });
|
|
|
+ let resultLayer = new LayerVector({
|
|
|
+ source: vectorSource,
|
|
|
+ //style:this.styleFunction
|
|
|
+ });
|
|
|
+
|
|
|
+ var select=new Select({
|
|
|
+ condition: click, //pointerMove
|
|
|
+ layers:[resultLayer],
|
|
|
+ multi:true,
|
|
|
+ style:function (feature) {
|
|
|
+ console.log('feature',feature);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ select.on("select",function (e) {
|
|
|
+ console.log(e,e.selected,e.selected[0]);
|
|
|
+ // var features=e.selected;
|
|
|
+ // var feature=features[0];
|
|
|
+ // var geometry=feature.getGeometry();
|
|
|
+ // var attribute= feature.getProperties();
|
|
|
+ // var temp=attribute["NAME"];
|
|
|
+ // temp=attribute.NAME;
|
|
|
+ // var coordinates=geometry.getCoordinates();
|
|
|
+
|
|
|
+ });
|
|
|
+ this.map.addInteraction(select);
|
|
|
+ this.map.addLayer(resultLayer);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ styleFunction(feature,isSelect) {
|
|
|
+ console.log('function',feature);
|
|
|
+ var _name="",
|
|
|
+ _color="rgba(255, 255, 255, 0.8)";
|
|
|
+ return new Style({
|
|
|
+ fill: new Fill({ //矢量图层填充颜色，以及透明度
|
|
|
+ color:_color
|
|
|
+ }),
|
|
|
+ stroke: new Stroke({ //边界样式
|
|
|
+ color: '#319FD3',
|
|
|
+ width: 1
|
|
|
+ }),
|
|
|
+ text: new Text({ //文本样式
|
|
|
+ text:_name,
|
|
|
+ font: '12px Calibri,sans-serif',
|
|
|
+ fill: new Fill({
|
|
|
+ color: '#000'
|
|
|
+ }),
|
|
|
+ stroke: new Stroke({
|
|
|
+ color: 'red',
|
|
|
+ width: 3
|
|
|
+ }),
|
|
|
+ //textAlign:"left",
|
|
|
+ offsetX:"0"
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ initVector(){
|
|
|
+ let vectorSource = new SourceVector({
|
|
|
+ url:"http://192.168.2.242:8090/iserver/services/map-kxcgw/rest/maps/pipeline",
|
|
|
+ format:new GeoJSON()
|
|
|
+ });
|
|
|
+
|
|
|
+ let vectorLayer = new LayerVector({
|
|
|
+ source: vectorSource,
|
|
|
+ style: (feature,isSelect) =>{
|
|
|
+ let _name="";
|
|
|
+ let _color="rgba(255, 255, 255, 0.8)";
|
|
|
+ if(isSelect==true)
|
|
|
+ {
|
|
|
+ _name=feature.get("NAME");
|
|
|
+ _color= "rgba(255, 0, 0, 0.8)";
|
|
|
+ }
|
|
|
+ _name=this.map.getView().getZoom()>4?_name:"";
|
|
|
+ return new Style({
|
|
|
+ fill: Fill({ //矢量图层填充颜色，以及透明度
|
|
|
+ color:_color
|
|
|
+ }),
|
|
|
+ stroke: new Stroke({ //边界样式
|
|
|
+ color: '#319FD3',
|
|
|
+ width: 1
|
|
|
+ }),
|
|
|
+ text: new Text({ //文本样式
|
|
|
+ text:_name,
|
|
|
+ font: '12px Calibri,sans-serif',
|
|
|
+ fill: new Fill({
|
|
|
+ color: '#000'
|
|
|
+ }),
|
|
|
+ stroke: new Stroke({
|
|
|
+ color: 'red',
|
|
|
+ width: 3
|
|
|
+ }),
|
|
|
+ //textAlign:"left",
|
|
|
+ offsetX:"0"
|
|
|
+ })
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ var select=new Select({
|
|
|
+ condition: pointerMove,
|
|
|
+ layers:[vectorLayer],
|
|
|
+ multi:true,
|
|
|
+ style:function (feature,layer) {
|
|
|
+ console.log(feature,layer)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ select.on("select",function (e) {
|
|
|
+ var features=e.selected;
|
|
|
+ var feature=features[0];
|
|
|
+ var geometry=feature.getGeometry();
|
|
|
+ var attribute= feature.getProperties();
|
|
|
+ var temp=attribute["NAME"];
|
|
|
+ temp=attribute.NAME;
|
|
|
+ var coordinates=geometry.getCoordinates();
|
|
|
+ var polygons=geometry.getPolygons();
|
|
|
+ var polygon=geometry.getPolygon(0);
|
|
|
+ alert(feature.get("NAME"));
|
|
|
+ });
|
|
|
+
|
|
|
+ this.map.addLayer(vectorLayer);
|
|
|
+ this.map.addInteraction(select);
|
|
|
+ },
|
|
|
+
|
|
|
+ initSource(){
|
|
|
+ let layers = this.map.getLayers();
|
|
|
+ let ly = null;
|
|
|
+ for (var i = 0; i < layers.getLength(); i++) {
|
|
|
+ const layer = layers.array_[i];
|
|
|
+ const layerName = layer.values_.name;
|
|
|
+ if (layerName === '专用线缆') {
|
|
|
+ //layer.setVisible(true);
|
|
|
+ // layer.events.on({"layerInitialized": ()=>{
|
|
|
+ // console.log("000");
|
|
|
+ // }});
|
|
|
+ console.log("layer",layer);
|
|
|
+ ly = layer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(ly == null) return;
|
|
|
+ console.log("layer",ly);
|
|
|
+ let selectClick = new Select({
|
|
|
+ // 事件类型
|
|
|
+ condition: click,
|
|
|
+ layers:[ly],
|
|
|
+ // 点击后的样式
|
|
|
+ style: function(fea, res){
|
|
|
+ console.log("----------",fea,res,selectClick.getLayer(fea))
|
|
|
+ return [
|
|
|
+ new Style({
|
|
|
+ stroke: new Stroke({
|
|
|
+ color: 'rgba(255,92,92, 0.2)',
|
|
|
+ width: 10
|
|
|
+ })
|
|
|
+ }),
|
|
|
+ new Style({
|
|
|
+ stroke: new Stroke({
|
|
|
+ color: "rgba(255,92,92, 1)",
|
|
|
+ width: 4
|
|
|
+ }),
|
|
|
+ })
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.map.addInteraction(selectClick);
|
|
|
+ selectClick.on('select', function(e) {
|
|
|
+ console.log("000------------------------1");
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
|
|
|
iniSelect(){
|
|
|
if(this.select != null) return;
|
|
|
if(this.map == null) return;
|
|
|
- let url = "http://192.168.2.238:8090/iserver/services/map-fd/rest/maps/fddt";
|
|
|
+ let url = "http://192.168.2.242:8090/iserver/services/map-kxcgw/rest/maps/pipeline";
|
|
|
// 添加图层
|
|
|
- let layer = new TileLayer({
|
|
|
+ let layer = new TileLayer({
|
|
|
source: new TileSuperMapRest({
|
|
|
url: url,
|
|
|
wrapX: true
|
|
|
}),
|
|
|
projection: 'EPSG:4326'
|
|
|
- });
|
|
|
- this.map.addLayer(layer);
|
|
|
-
|
|
|
+ });
|
|
|
+ this.map.addLayer(layer);
|
|
|
this.select = new Select({
|
|
|
- condition: click
|
|
|
+ condition: click,
|
|
|
+ layers:[layer]
|
|
|
});
|
|
|
this.map.addInteraction(this.select);
|
|
|
this.select.on("select", e => {
|
|
|
+ console.log('123');
|
|
|
if (e.selected.length != 0) {
|
|
|
// 当前点的坐标
|
|
|
var coordinate = e.mapBrowserEvent.coordinate;
|
|
|
@@ -189,17 +403,97 @@ export default {
|
|
|
|
|
|
}
|
|
|
});
|
|
|
- // 设置鼠标划过矢量要素的样式
|
|
|
- this.map.on("pointermove", e => {
|
|
|
- var pixel = this.map.getEventPixel(e.originalEvent); //pixel为当前鼠标屏幕坐标，如 [0,0],[304,642]
|
|
|
- var feature = this.map.forEachFeatureAtPixel(pixel, function(feature) {
|
|
|
- return feature;
|
|
|
- });
|
|
|
- console.log("feature", feature);
|
|
|
- if (feature == undefined) {
|
|
|
- this.map.getTargetElement().style.cursor = "auto";
|
|
|
+
|
|
|
+ let hightStyle = new Style({
|
|
|
+ //填充色
|
|
|
+ fill: new Fill({
|
|
|
+ color: 'rgba(255, 255, 255, 0.2)'
|
|
|
+ }),
|
|
|
+ //边线颜色
|
|
|
+ stroke: new Stroke({
|
|
|
+ color: '#FF0000',
|
|
|
+ width: 5
|
|
|
+ }),
|
|
|
+ //形状
|
|
|
+ image: new Circle({
|
|
|
+ radius: 7,
|
|
|
+ fill: new Fill({
|
|
|
+ color: '#ffcc33'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ let lineDedalut = new Style({
|
|
|
+ //填充色
|
|
|
+ fill: new Fill({
|
|
|
+ color: 'rgba(255, 255, 255, 0.2)'
|
|
|
+ }),
|
|
|
+ //边线颜色
|
|
|
+ stroke: new Stroke({
|
|
|
+ color: '#1E90FF',
|
|
|
+ width: 5
|
|
|
+ }),
|
|
|
+ //形状
|
|
|
+ image: new Circle({
|
|
|
+ radius: 7,
|
|
|
+ fill: new Fill({
|
|
|
+ color: '#ffcc33'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ this.map.on('pointermove', (evt) => {
|
|
|
+ let highFeature = null;
|
|
|
+ let pixel = this.map.getEventPixel(evt.originalEvent);
|
|
|
+ let features = this.map.forEachFeatureAtPixel(pixel, (feature,layer) => {
|
|
|
+ return {
|
|
|
+ feature:feature,
|
|
|
+ layer:layer
|
|
|
+ };
|
|
|
+ });
|
|
|
+ if(features){
|
|
|
+ console.log("features",features);
|
|
|
+ highFeature = features.feature;
|
|
|
+ features.feature.setStyle(hightStyle)
|
|
|
+ }else{
|
|
|
+ if(highFeature)
|
|
|
+ highFeature.setStyle(lineDedalut)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @description 给地图添加要素选择主组件
|
|
|
+ */
|
|
|
+ addFeatureSelect() {
|
|
|
+ // 给增加的矢量图层增加 点击事件
|
|
|
+ this.select = new Select({
|
|
|
+ // 事件类型
|
|
|
+ condition: click,
|
|
|
+ layers: this.siteLayers.concat([
|
|
|
+ commonFunction.getLayerByName(this.map, '专用线缆')
|
|
|
+ ]),
|
|
|
+ style: (fea, res) => {
|
|
|
+ // 判断是否为点要素
|
|
|
+ if (fea.getGeometry() instanceof Point) {
|
|
|
+ console.log('Point');
|
|
|
+ } else if (fea.getGeometry() instanceof LineString) {
|
|
|
+ console.log('LineString');
|
|
|
+ } else if (fea.getGeometry() instanceof MultiLineString) {
|
|
|
+ console.log('MultiLineString');
|
|
|
+ } else if (fea.getGeometry() instanceof Polygon) {
|
|
|
+ console.log('Polygon');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.map.addInteraction(this.select);
|
|
|
+ this.select.on('select', e => {
|
|
|
+ var aryLen = e.target.getFeatures().getLength();
|
|
|
+ if (aryLen > 0) {
|
|
|
+
|
|
|
} else {
|
|
|
- this.map.getTargetElement().style.cursor = "pointer";
|
|
|
+
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
@@ -238,7 +532,7 @@ export default {
|
|
|
|
|
|
const result = getFeaturesEventArgs.result;
|
|
|
if (result && result.features) {
|
|
|
- //this.addThemeLayer();
|
|
|
+ this.addThemeLayer();
|
|
|
//this.themeSource.addFeatures(result.features);
|
|
|
}
|
|
|
},
|
|
|
@@ -317,10 +611,6 @@ export default {
|
|
|
selectFeature.activate();
|
|
|
},
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
addThemeLayer(){
|
|
|
if(this.themeSource != null) return;
|
|
|
this.themeSource = new Range("ThemeLayer",
|
|
|
@@ -365,16 +655,6 @@ export default {
|
|
|
this.map.addLayer(themeLayer);
|
|
|
},
|
|
|
|
|
|
- initLayer(){
|
|
|
- let url = "http://192.168.2.238:8090/iserver/services/data-kxc_map_test/rest/data";
|
|
|
- let resolutions = this.getResolutions(10, 0.00000346145499464224, 0, 16);
|
|
|
- let style = new MapboxStyles({
|
|
|
- url: url,
|
|
|
- map: this.map,
|
|
|
- resolutions: resolutions
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
getResolutions(zoom, scale, targetMinZoom, targetMaxZoom) {
|
|
|
var res = this.scaleToResolution(scale);
|
|
|
var minRes = res * Math.pow(2, zoom - targetMinZoom);
|
tengmingxue