<
meta
charset
="utf-8"
/>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
link
rel
="shortcut icon"
type
="image/x-icon"
href
="docs/images/favicon.ico"
/>
<
link
rel
="stylesheet"
href
="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity
="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin
=""
/>
<
script
src
="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity
="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin
=""
></
script
>
<
style
>
html, body
{
height
:
100%
;
margin
:
0
;
#map
{
width
:
1000px
;
height
:
700px
;
</
style
>
</
head
>
<
div
id
='map'
></
div
>
<
script
>
var
grayscaleLayer
=
L.tileLayer(
'
http://124.163.214.106:18065/arcgis/rest/services/shenjie_bg/MapServer/tile/{z}/{y}/{x}
'
,
{id:
'
map11
'
});
var
map
=
L.map(
'
map
'
, {
minZoom:
5
,
maxZoom:
12
,
center: [
39.73
,
-
104.99
],
zoom:
8
,
zoomDelta:
0.5
,
//
点击+-按钮的放缩刻度尺度，默认值1
zoomSnap:
0.5
,
//
地图能放缩的zoom的最小刻度尺度，默认值1
fullscreenControl:
false
,
//
全屏控件，不显示
zoomControl:
false
,
//
放大缩小控件，不显示
attributionControl:
false
//
右下角属性控件，不显示
map.addLayer(grayscaleLayer);
var
markers
=
[];
//
系统默认的marker,有一个蓝色图标
var
marker1
=
L.marker([
39.61
,
-
107.02
]);
//
自定义的circleMarker
var
marker2
=
L.circleMarker([
39.61
,
-
106.02
], {
stroke:
true
,
color:
'
#aaaaaa
'
,
weight:
1
,
opacity:
1
,
fillColor:
'
#00e400
'
,
fillOpacity:
1
,
radius:
10
//
用html的div来创建icon，但是有缺陷
var
icon3
=
L.divIcon({
html:
"
<div style='width: 15px;height:15px;border-radius: 50%;background-color:#00e400 ;'></div>
"
,
iconAnchor: [
1
,
1
]});
var
marker3
=
L.marker([
39.61
,
-
105.02
], { icon: icon3 });
//
用html的div的样式来创建marker的icon，注意需要加className属性，否则会出现marker1的问题
var
icon4
=
L.divIcon({
html:
"
<div style='width:24px;height:24px;border-radius:4px;background-color:#00e400 ;'></div>
"
,
className:
'
ss
'
,});
var
marker4
=
L.marker([
39.61
,
-
104.02
], { icon: icon4 });
markers.push(marker1);
markers.push(marker2);
markers.push(marker3);
markers.push(marker4);
var
citiesLayer
=
L.layerGroup(markers);
map.addLayer(citiesLayer);
</
script
>
</
body
>
</
html
>
注意mark清理和切换的方法如下：
if (this.graphicLayer)
{
if (map.hasLayer(this.graphicLayer))
{
map.removeLayer(this.graphicLayer);
}
}
