|
|
|
@ -2,49 +2,49 @@
|
|
|
|
<div id="container"></div>
|
|
|
|
<div id="container"></div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
|
//import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
//此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
|
|
|
|
//此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
|
|
|
|
//map:null,
|
|
|
|
//map:null,
|
|
|
|
adcode: '310000',
|
|
|
|
adcode: "310000",
|
|
|
|
dep: 2
|
|
|
|
dep: 2,
|
|
|
|
};
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
initMap() {
|
|
|
|
initMap() {
|
|
|
|
AMapLoader.load({
|
|
|
|
AMapLoader.load({
|
|
|
|
key: '9a18085d520884e61312cba93787a8f2', // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
|
key: "9a18085d520884e61312cba93787a8f2", // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
|
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
|
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
|
plugins: ['AMap.MapType'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|
|
|
plugins: ["AMap.MapType"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.then((AMap) => {
|
|
|
|
.then((AMap) => {
|
|
|
|
this.map = new AMap.Map('container', {
|
|
|
|
this.map = new AMap.Map("container", {
|
|
|
|
//设置地图容器id
|
|
|
|
//设置地图容器id
|
|
|
|
center: [121.43333, 31.2],
|
|
|
|
center: [121.43333, 31.2],
|
|
|
|
layers: [
|
|
|
|
layers: [
|
|
|
|
AMap.createDefaultLayer() //高德默认标准图层
|
|
|
|
AMap.createDefaultLayer(), //高德默认标准图层
|
|
|
|
],
|
|
|
|
],
|
|
|
|
zoom: 9.5
|
|
|
|
zoom: 9.5,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.map.addControl(new AMap.MapType()); //图层切换，用于几个常用图层切换显示
|
|
|
|
this.map.addControl(new AMap.MapType()); //图层切换，用于几个常用图层切换显示
|
|
|
|
//console.log(AMap.DistrictLayer.Province);
|
|
|
|
//console.log(AMap.DistrictLayer.Province);
|
|
|
|
var disProvince = new AMap.DistrictLayer.Province({
|
|
|
|
var disProvince = new AMap.DistrictLayer.Province({
|
|
|
|
zIndex: 12,
|
|
|
|
zIndex: 12,
|
|
|
|
adcode: ['310000'],
|
|
|
|
adcode: ["310000"],
|
|
|
|
depth: 2,
|
|
|
|
depth: 2,
|
|
|
|
styles: {
|
|
|
|
styles: {
|
|
|
|
fill: 'rgba(161,207,251,0.5)',
|
|
|
|
fill: "rgba(161,207,251,0.5)",
|
|
|
|
'province-stroke': 'blue',
|
|
|
|
"province-stroke": "blue",
|
|
|
|
'city-stroke': 'white', // 中国地级市边界
|
|
|
|
"city-stroke": "white", // 中国地级市边界
|
|
|
|
'county-stroke': 'blue' // 中国区县边界
|
|
|
|
"county-stroke": "blue", // 中国区县边界
|
|
|
|
}
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
disProvince.setMap(this.map);
|
|
|
|
disProvince.setMap(this.map);
|
|
|
|
//this.map.addControl(new AMap.DistrictSearch()); //行政区查询服务，提供了根据名称关键字、citycode、adcode 来查询行政区信息的功能
|
|
|
|
//this.map.addControl(new AMap.DistrictSearch()); //行政区查询服务，提供了根据名称关键字、citycode、adcode 来查询行政区信息的功能
|
|
|
|
this.map.on('click', function (ev) {
|
|
|
|
this.map.on("click", function (ev) {
|
|
|
|
var px = ev.pixel;
|
|
|
|
var px = ev.pixel;
|
|
|
|
var props = disProvince.getDistrictByContainerPos(px); // 拾取所在位置的行政区
|
|
|
|
var props = disProvince.getDistrictByContainerPos(px); // 拾取所在位置的行政区
|
|
|
|
//console.log(props);
|
|
|
|
//console.log(props);
|
|
|
|
@ -55,24 +55,26 @@ export default {
|
|
|
|
//nation-stroke': nationStroke,
|
|
|
|
//nation-stroke': nationStroke,
|
|
|
|
// 海岸线
|
|
|
|
// 海岸线
|
|
|
|
//'coastline-stroke': '',
|
|
|
|
//'coastline-stroke': '',
|
|
|
|
'province-stroke': 'blue',
|
|
|
|
"province-stroke": "blue",
|
|
|
|
'city-stroke': 'white', // 中国地级市边界
|
|
|
|
"city-stroke": "white", // 中国地级市边界
|
|
|
|
'county-stroke': 'blue', // 中国区县边界
|
|
|
|
"county-stroke": "blue", // 中国区县边界
|
|
|
|
fill: function (props) {
|
|
|
|
fill: function (props) {
|
|
|
|
return props.NAME_CHN == NAME_CHN ? 'rgba(161,207,251,0.8)' : 'rgba(161,207,251,0.5)';
|
|
|
|
return props.NAME_CHN == NAME_CHN
|
|
|
|
}
|
|
|
|
? "rgba(161,207,251,0.8)"
|
|
|
|
|
|
|
|
: "rgba(161,207,251,0.5)";
|
|
|
|
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.catch((e) => {
|
|
|
|
.catch((e) => {
|
|
|
|
console.log(e);
|
|
|
|
console.log(e);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
mounted() {
|
|
|
|
//DOM初始化完成进行地图初始化
|
|
|
|
//DOM初始化完成进行地图初始化
|
|
|
|
this.initMap();
|
|
|
|
this.initMap();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
<style lang="less">
|
|
|
|
<style lang="less">
|
|
|
|
|
fanluyan
2 years ago