Skip to content

蒋波涛 / super_mapboxgl_vue

Go to a project
Toggle navigation
Toggle navigation pinning
c344db20 by unknown
Options

20191215

1 parent 8c172ce3
Inline Side-by-side
Showing 6 changed files with 130 additions and 34 deletions
......@@ -2,7 +2,7 @@
* @Author: jiangbotao
* @Date: 2019-12-12 17:40:15
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-14 11:49:06
* @LastEditTime: 2019-12-15 13:28:05
* @FilePath: \mymapbox\src\App.vue
-->
<template>
......@@ -49,7 +49,7 @@ export default {
height: 64px;
padding: 0 25px;
line-height: 64px;
background: #096fd0;
background: #2e7fb4;
color: white;
font-size: 26px;
border-bottom-style: solid;
......
......@@ -2,7 +2,7 @@
* @Author: jiangbotao
* @Date: 2019-12-09 23:17:48
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-14 12:06:23
* @LastEditTime: 2019-12-15 12:28:03
* @FilePath: \mymapbox\src\components\Map3857.vue
-->
<template>
......@@ -24,7 +24,7 @@ export default {
}
},
mounted(){
var map, host = "http://support.supermap.com.cn:8090";
var host = "http://support.supermap.com.cn:8090";
var url = host + "/iserver/services/map-world/rest/maps/World";
var map = new mapboxgl.Map({
......@@ -33,7 +33,7 @@ export default {
"version": 8,
"sources": {
"raster-tiles": {
"attribution": 'attribution',
"attribution": '展示栅格数据并从服务器上获取地图信息',
"type": "raster",
"tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
"tileSize": 256,
......@@ -47,7 +47,7 @@ export default {
"maxzoom": 22
}]
},
center: [-74.50, 40],
center: [-96, 37.8],
maxZoom: 18,
zoom: 2
});
......
......@@ -2,7 +2,7 @@
* @Author: jiangbotao
* @Date: 2019-12-09 23:17:48
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-14 00:21:29
* @LastEditTime: 2019-12-15 12:36:46
* @FilePath: \mymapbox\src\components\Map3857.vue
-->
<template>
......
......@@ -2,49 +2,133 @@
* @Author: jiangbotao
* @Date: 2019-12-09 23:17:48
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-10 16:43:29
* @LastEditTime: 2019-12-15 14:19:14
* @FilePath: \mymapbox\src\components\Map3857.vue
-->
<template>
<div >
<div id="map"></div>
<a-card title="业务图层操作" :bordered="false" style="width: 320px">
<p>
<a-button v-on:click="addLayer">加载图层</a-button>
<a-button v-on:click="clearLayer">隐藏图层</a-button>
<a-button v-on:click="showLayer">展示图层</a-button>
</p>
</a-card>
</div>
</template>
<script>
import mapboxgl from 'mapbox-gl';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import { Logo } from '@supermap/iclient-mapboxgl';
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
export default {
name: 'MVT',
data () {
return {
map: null
}
},
mounted(){
var map = new mapboxgl.Map({
this.map = new mapboxgl.Map({
container: 'map',
attributionControl: false,
style: 'http://support.supermap.com.cn:8090/iserver/services/map-mvt-China/rest/maps/China/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
center: [110.143, 30.236], // starting position
zoom: 3 // starting zoom
});
map.addControl(new Logo(), 'bottom-right');
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
map.addControl(new mapboxgl.ScaleControl({}));
map.addControl(new mapboxgl.FullscreenControl(),'top-right');
map.addControl(new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
}),'top-left');
map.addControl(new mapboxgl.AttributionControl({compact: true}));
var Draw = new MapboxDraw();
map.addControl(Draw,'top-left');
this.map.addControl(new mapboxgl.NavigationControl(), 'top-left');
this.map.addControl(new mapboxgl.ScaleControl({}));
},
methods:{
addLayer(){
var polygon = {
"type": "Polygon",
"coordinates": [[[118, 20], [120, 20], [120, 50], [-120, 50], [118, 20]]]
};
var getFeatureParams = new SuperMap.GetFeaturesByGeometryParameters({
toIndex: -1,
datasetNames: ["World:Capitals"],
geometry: polygon,
spatialQueryMode: "INTERSECT"
});
var dataUrl = "https://iserver.supermap.io/iserver/services/data-world/rest/data";
var featureService = new mapboxgl.supermap.FeatureService(dataUrl);
var features = null;
var __this = this;
featureService.getFeaturesByGeometry(getFeatureParams, function (serviceResult) {
features = serviceResult.result.features;
var phvals = features.features.map(f => f.properties.SMID);
var min = Math.min(...phvals);
var max = Math.max(...phvals);
var range = max-min;
console.log(min);
console.log(max);
console.log(range);
console.log(features);
if (!__this.map.getSource("queryDatas")) {
__this.map.addSource("queryDatas", {
"type": "geojson",
"data": features
});
} else {
__this.map.getSource("queryDatas").setData(features);
}
if(__this.map.getLayer("queryDatasLayer")){
__this.map.removeLayer('queryDatasLayer');
}
__this.map.addLayer({
"id": "queryDatasLayer",
"type": "circle",
"source": "queryDatas",
"paint": {
'circle-radius': {
'base': 2,
'stops': [
[6, 3],
[10, 180]
]
},
'circle-color': {
property:'SMID',
stops: [
[min,'#6879FB'],
[min + 1/3*range,'#68FB75'],
[min + 2/3*range, '#F94B18'],
[max, '#F92918']
]
},
'circle-opacity': 1.0,
"circle-stroke-width": 2,
"circle-stroke-color": "#007cbf",
"circle-stroke-opacity": 0.7
}
});
var popup = new mapboxgl.Popup({
anchor: 'bottom',
closeButton: false,
offset: {
'bottom': [0, -20],
}
});
__this.map.on('mousemove', "queryDatasLayer", function (e) {
popup.setLngLat(e.lngLat).setHTML(e.features[0].properties.CAPITAL).addTo(__this.map);
__this.map.getCanvas().style.cursor = 'pointer';
});
__this.map.on('mouseout', "queryDatasLayer", function () {
__this.map.getCanvas().style.cursor = '';
popup.remove();
})
});
},
clearLayer(){
this.map.setLayoutProperty("queryDatasLayer", 'visibility', 'none');
},
showLayer(){
this.map.setLayoutProperty("queryDatasLayer", 'visibility', 'visible');
}
}
}
</script>
......@@ -56,4 +140,12 @@ export default {
width: 100%;
background-color: white
}
.ant-card {
width: 320px;
height: 120px;
background-color: #e6f7ff;
right: 5px;
position: absolute;
top: 5px;
}
</style>
\ No newline at end of file
......
......@@ -2,7 +2,7 @@
* @Author: jiangbotao
* @Date: 2019-12-09 23:17:48
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-10 17:42:07
* @LastEditTime: 2019-12-15 12:36:14
* @FilePath: \mymapbox\src\components\Map3857.vue
-->
<template>
......@@ -13,9 +13,7 @@
<script>
import mapboxgl from 'mapbox-gl';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import { Logo } from '@supermap/iclient-mapboxgl';
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
export default {
name: 'RasterTiles',
......@@ -34,7 +32,7 @@ export default {
"version": 8,
"sources": {
"raster-tiles": {
"attribution": 'SuperMap Mapbox GL',
"attribution": '展示栅格瓦片和各种Mapbox控件',
"type": "raster",
"tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
"tileSize": 256
......@@ -62,7 +60,15 @@ export default {
trackUserLocation: true
}),'top-left');
map.addControl(new mapboxgl.AttributionControl({compact: true}));
var Draw = new MapboxDraw();
var Draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
line_string: true,
polygon: true,
point: true,
trash: true
}
});
map.addControl(Draw,'top-left');
}
}
......
......@@ -2,11 +2,9 @@
* @Author: jiangbotao
* @Date: 2019-12-12 17:40:15
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-14 11:51:38
* @LastEditTime: 2019-12-15 14:22:04
* @FilePath: \supermapvue\src\main.js
*/
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Antd from 'ant-design-vue'
import App from './App'
......